A Pattern for Image Processing

Section 21.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 colors around in crazy ways. It sets the red value to the original green, the green to the original blue, and the blue to the original red. Compare the results of running this program with the original goalkeeper image from the Image Library.

🔗

The fundamental steps are:

🔗

USE THE IMAGE LIBRARY. We need to import the image library.
PICK THE IMAGE AND DISPLAY IT AND DISPLAY IT. We pick a particular image from our library by specifying its name as a string (with quotation marks) inside the parentheses.
LOOP THROUGH THE PIXELS. This example gets every pixel in the image and loops through them all one at a time.
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 don’t need all the colors. If your program just needs to work with red, you don’t have to get the green and blue values.
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.
UPDATE THE IMAGE. This will update the image using the new colors of the pixel.

🔗

Notice that steps 4-6 are indented in the code. That means they are part of the for loop on line 9. They get repeated for each of the pixels in the image. Step 7 is not indented. It happens just once after all the pixels are processed in the for loop.

🔗

Time to experiment with our pattern.

🔗

Checkpoint 21.4.1.

What happens if in step 5 you set all three colors to originalGreen?

🔗

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?

🔗

Checkpoint 21.4.2.

Change lines 17-19 so that the new red value is 255 and blue and green are each 150. What happens?

🔗

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!

🔗

Checkpoint 21.4.3.

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?

🔗

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, which is "no red"… still is lots of red visible.
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.

🔗

You have attempted 1 of 3 activities on this page.

🔗

Prev Top Next