9.4. A Pattern for Image Processing¶
There is a fair amount of code involved in a program like this. But there is a pattern to the code we need to write. Learning to recognize the pattern makes it easier to write a new program - we can follow the steps of the pattern and only worry about modifying small parts of the basic recipe.
A basic image processing pattern is shown in the program below. This program changes the red to the original green, the green to the original blue, and the red to the original green. But, mostly we are trying to describe a pattern that you can use to create many image effects.
Here is the recipe without the code:
STEP 1: USE THE IMAGE LIBRARY. We need to import the image library.
- STEP 2: PICK THE IMAGE. We pick a particular image from our library by specifying
it inside of the parentheses and double quotes.
- STEP 3: LOOP THROUGH THE PIXELS. This example gets every pixel in the image and
loops through them all one at a time.
- STEP 4: GET THE DATA. You could always use the STEP 4 lines just as they are above,
but you might be able to make it shorter if you wanted. If you only needed red and were going to set the green and blue to zero, you don’t have to get the green and blue.
- STEP 5: MODIFY THE COLOR. This is the part that you will most often change. Here’s where
you change the red, green, and/or blue. You don’t have to change all of them.
STEP 6: UPDATE THE IMAGE. This will update the image at the original pixel location to the new color.
STEP 7: SHOW THE RESULT. This will draw the changed image in a window.
Time to experiment with our pattern.
- It turns totally green
- Did you try it?
- It becomes a black and white picture
- Yes, anytime the red, green, and blue values are the same we get a shade of gray.
- It takes on a green cast
- Did you try it?
- All the green disappears
- Did you try it?
What happens if in step 5 you set all three colors to originalGreen
?
- The goalkeeper looks pink
- Did you try it?
- It becomes solid red
- Did you try it?
- The goalkeeper looks red
- Did you try it?
- It becomes solid pink
- Yes - we are ignoring the original colors completely!
Change lines 17-19 so that the new red value is 255 and blue and green are each 150. What happens?
- Values above 255 are treated as 255 and values less than 0 are treated as 0.
- Yes, if you use a value less than 0 it becomes 0. If you use a value over 255, it becomes 255.
- Values outside of the range 0-255 are treated as 0.
- That would mean 300 red would be treated as 0... there still is lots of red.
- Values outside of the range 0-255 are treated as 255.
- That would mean -100 blue would be treated as 255... but there is no blue in the image.
- Values outside the range 0-255 "wrap around". Going past 255 takes you back to 0, so 300 is the same as 300 - 255 = 45.
- That does not seem to be the case. 300 red looks the same as 255 red.
We know that the color values are each supposed to be 0-255. What happens if we use values outside of that range?
Change lines 17-19 so that the new red value is 255 and blue and green are each 0. Run the program and observe the results. Then change the red value to 300 and the blue to -100. Run it again. What seems to happen?