Gil Sperling

video, stage and music

color manipulation

November 6, 2019 by gilsperling

ICM Media week 2 project with Sarah Lariano

The plan

  1. Load an image
  2. Click the mouse on a point in the image
  3. Any point of the same color as the clicked one (reference point) changes color, starting from the reference point and moving outward. The desired result: If the face was clicked, only the face will change color over time.


Run an x,y nested for-loop over an increasing area, test the color of each pixel against the reference, if it matches then change it.


At first we used the get function to test the color on each pixel and the set function to change it. This resulted usually in the sketch freezing (even when using very small images).
Next we used loadPixels and updatePixels, resulting in slow and jumpy performance, or colors continuously changing instead of changing once.
In the final versions, we’re creating a variable for the transformed color, then setting the stroke/fill to that variable and drawing a point/shape over the image.

But then, there is the question of how to test for the color match. We wanted to play with the hue variable. However, the pixel array works in R,G,B,A. There did not seem to be a way to change a color’s hue and then translate its new color to RGB, at least not easily. Therefore we attempted manipulations of the R,G, and B values. Matching was controlled by an if statement, testing if the pixel’s RGB values were within a range around the reference value.
The result kind of works. The color manipulation is based on observing what happens to RGB values when you change a color to its complementary (adding 180 to the hue). The sensitivity of the matching function is a bit unpredictable (results vary depending on where you click).

code version A

In another version, we were able to do everything in HSB since ultimately we are drawing a shape and we can change the colorMode. But we weren’t able to calibrate the hue, saturation and brightness filters to get the intended result of changing only one section (for example, the face). Nonetheless, the result is a manipulation of color.

code version B

Posted in Fall '19 - Introduction to Computational Media, Uncategorized |

Comments are closed.