14.1. Using Decisions with Images

We can create image effects by conditionally executing code on pixels that meet a particular criteria. In the code below we will, try to change the French flag (the image on top), into the flag of Chad (bottom).

To do this, we need to change just the white pixels in the image and make them yellow. This means we need a way to answer the question “is this pixel white?”. A pure white pixel has red, green, and blue values all of 255. A not quite pure white may not have 255 for each of the three values, but they will all be high, and they will all be very similar to each other. In comparison, a blue pixel is going to have a high blue value and low red and green (potentially 0 for a “perfect” blue). A red pixel will have a high red value and low blue and green ones.

So in general, to find a white pixel we could look for something where red > 250 and green > 250 and blue > 250. 250 is not always going to be the right number to use, it just represents a value that is pretty close to maxed out without counting on all three colors being exactly 255. (In this image, we could get away with just looking at green > 250 as we would not expect the blue or red pixels to have a high green value. But we will stick with a more generic recipe.)

All of the white pixels need to be changed to yellow. A yellow will always have a relatively high green and red value and a low blue value. A good value for the yellow in the flag is 254 red, 242 green, 0 blue.

The Belgian flag is very similar to the Chad flag. See if you can turn the Chad falg into the Belgian one by turning the blue pixels into black ones. Hint: the blue is not a perfect blue. An approximate color value is (red = 0, green = 100, blue = 180). You should not count on pixels having exactly those values - come up with a recipee using > and < that selects the blue pixels but not the yellow or red ones.

You have attempted of activities on this page