Skip to main content

Section 21.6 Thinking About Pixel Locations

When we loop through the pixels in an image, our loop moves from left to right across each row starting from the top one and working our way to the bottom.
Figure 21.6.1. The order that pixels are processed if you use img.getPixels(). First, we visit the top row moving from left to right. Then we go to the second row and move from left to right again. The process continues until we reach the bottom of the image.
Sometimes, we don’t care where a particular pixel is in the image. But if we want to accomplish a goal like “Make the bottom half of the image black”, we need to know if the current pixel is in the bottom half or not.
To find out where a pixel is, we can use the .getX() and .getY() functions of the pixel object. This code sample shows using the two functions to ask for the x and y locations of each pixel.
If you examine the output, you should see that the first pixel is at x = 0, y = 0. Then we move to x = 1, y = 0. The next pixel is at x = 2, y = 0. A few important details to notice:
  • We start counting from 0 for both x and y. The leftmost pixel is at x = 0. The pixel to its right is at x = 1.
  • This image is 128 pixels wide. So x counts up to 127 before reaching the end of the row (one less than width since we start counting from 0).
Figure 21.6.2. The x, y locations of various pixels in a 4 x 4 image.

Checkpoint 21.6.3.

    If an image has a width of 10 and a height of 5, what would the coordinates of the last pixel visited by a loop be?
  • 4, 9
  • Remember that the width defines the possible x coordinates and the x comes first
  • 5, 10
  • Remember that the width defines the possible x coordinates and the x comes first
  • 9, 4
  • Correct. We start counting from 0, so a width of 10 means columns 0-9. A height of 5 means rows 0-4.
  • 10, 5
  • That would be true if the image had a width of 11 and a height of 6. Remember that we start counting from 0.
Now let’s put the pixel coordinates to work. We are going to use the location of each pixel to modify its color. We will do so by subtracting its x coordinate from each of the color values (red, green, blue). This means on the left side of the image, where x is 0 or close to it, there is little change. On the right side, where x is larger, we remove more and more of the color, getting closer and closer to pure black. (Once we hit column 255, we could only get black as the starting red/green/blue values are all 255 at most.)
We don’t always have to modify the pixel color. We can also use the coordinates to move a particular pixel to a new location. This sample calculates a newY that is used as the y coordinate for the pixel when we put it back in the image. This newY is calculated as the height of the image minus one minus the y location of where we got the pixel. Then instead of updating the pixel in its old location, we use setPixel to copy it to the new location.

Checkpoint 21.6.4.

    What happened when we copied the pixel from (x, y) to (x, newY)?
  • We rotated the image 90 degrees to the left and flipped it over.
  • This would be true if we created a new image and set the values in the new image from the old pixel values.
  • We mirrored the image around a horizontal line.
  • Correct. The top rows are copied to the bottom and end up erasing the top part of the image.
  • We flipped the image horizontally.
  • This would be true if we created a new image and set the values in the new image from the old pixel values.
  • No change.
  • Compare this image to the original student2.jpg image.
You have attempted of activities on this page.