Interactive Abstract Expressionism

Posted: September 25, 2013 in Web3
Tags: , ,

interactive-abstract

For this Web3 assignment I used CSS3 properties and Javascript to create an interactive and playful webpage. Using CSS’s transition allows for smooth animation like actions, so when using the :hover selector to change the objects’ shape, location, and color the transition happens smoothly rather than abruptly. ¬†Additionally the @media query dectects if the browser is resized to a small width or height and causes the shapes to behave differently. If the user clicks on the shapes they will change color an action that is being implemented using a javascript function that converts HSV input values to RGB outputs for CSS. This allows for easier play with color (it’s much easier to adjust colors using HSV than RGB when passing number values). The function takes randomly generated numbers as inputs for the Hue and Saturation parameters. Saturation stays in the upper end so the colors don’t get too pastel looking, while Hue cycles through all 360 degrees of the color spectrum. Setting a min-max value for saturation involved a bit of a hack for the Math.random() method but appears to work well. Value (aka brightness) is kept at 100% so the shapes don’t get muddy or grey looking. For Safari to read the CSS transition selector it pust be prefixed with `-webkit-`.

link to live webpage here

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s