{"id":170,"date":"2012-12-13T19:47:54","date_gmt":"2012-12-13T19:47:54","guid":{"rendered":"https:\/\/brettjpeterson.com\/blog\/?p=170"},"modified":"2012-12-13T19:47:55","modified_gmt":"2012-12-13T19:47:55","slug":"visual-language-color","status":"publish","type":"post","link":"https:\/\/brettjpeterson.com\/blog\/2012\/12\/13\/visual-language-color\/","title":{"rendered":"Visual Language: Color"},"content":{"rendered":"

Let’s start with a test:<\/p>\n

color hue test<\/a><\/p>\n

The task is to arrange the colors from one end to the other in order to create a seamless gradient. The lower the score, the better. How’d you do? Here’s my score:<\/p>\n

\"color<\/a><\/p>\n

 <\/p>\n

I did pretty well! I found that if I stopped looking at the individual colors and looked at the whole range, It was much more apparent which colors were in the wrong order.<\/p>\n

The next part of our assignment was to create a sketch to explore 3 different aspects of color: hue, brightness and saturation. I created a pixel mirror that would use only 1 of the three from the original pixels and set the other 2 values to a constant number. Here’s the original, reflecting the correct hue, brightness and saturation:<\/p>\n

\"Normal\"<\/a><\/p>\n

Here’s what happens when you keep the brightness and contrast constant and only reflect the hue of each pixel:<\/p>\n

\"Hue\"<\/a><\/p>\n

Here’s brightness:<\/p>\n

\"Brightness\"<\/a><\/p>\n

and Saturation:<\/p>\n

\"Saturation\"<\/a><\/p>\n

The sketch I made will cycle through these when the user clicks the mouse, and the value for the other 2 variables is set by the mouse’s y position. Here’s a video:<\/p>\n

http:\/\/vimeo.com\/55553932<\/a><\/p>\n

and here’s the code:<\/p>\n

https:\/\/gist.github.com\/4279216<\/a>
\n