Image-2 Code and Images

< CS101

In this section, we'll look at simple code to load and manipulate a digital image. Here we'll just manipulate one pixel at a time. In the next section, scaling up to operate on thousands of pixels at a time.

x.png

• x.png - a tiny example image
• 10 pixels wide by 10 pixels high
• PNG is an image format, like JPG

The image "x.png" is very simple - it's a very small black square with a white "x" at its center. Here is x.png:

PNG (Portable Network Graphics) is a format to store an image in a computer file, like JPG and GIF.

x.png Code Example

• Three line program
• First line stores image named "x.png" into variable named "image":
• image = new SimpleImage("x.png");
• image.setZoom(20); -- set zoom option to 20 (10, 20, ... whatever)
• print(image); -- print out image as usual
• Zoom: each pixel shown 20x size here

Our first image code example loads the x.png image into a variable and prints it. Run the code to see what it does. Try changing the image.setZoom(20) to use the number 10 or 30 instead.

pixel.setRed(255) Example

• Now add some pixel-manipulation lines
• First line gets pixel (0, 0) and stores it in a variable named "pixel":
• pixel = image.getPixel(0, 0);
• pixel.setRed(255); -- set red value of that pixel
• Try setRed() with different values in the range 0..255

Pixel Set Red/Green/Blue Functions

• pixel.setRed(number); -- set the red value of the pixel to be the given number (0..255)
• pixel.setGreen(number); -- set the green value
• pixel.setBlue(number); -- set the blue value

noun.verb() Pattern

• Computer code has a widely used patterns
• One, we're seeing here is the noun.verb() pattern
• The noun is the thing we want to operate on (e.g. a pixel)
• The verb (aka "function") operates on that noun
• e.g. the functions setRed and setZoom
• Getting used to this pattern, our code will look less weird

Aside: Image Functions Reference

For later reference, there is a separate image functions reference page which lists in one place all the image functions such as pixel.setRed(number) we are using here.

Experiments On Pixels (0, 0) and (1, 0)

To see how image.getPixel(x, y) and pixel.setRed(number) etc. work, we'll try the experiments listed below (use the "show" button to see the solution code).

Example Problems	Solution
Set pixel (0, 0) to be green.	show pixel = image.getPixel(0, 0); pixel.setGreen(255);
Set pixel (0, 0) to be yellow.	show // Set red and green to 255, leave blue at 0 pixel = image.getPixel(0, 0); pixel.setRed(255); pixel.setGreen(255);
Set pixel (1, 0) to be yellow. Where is that pixel?	show pixel = image.getPixel(1, 0); pixel.setRed(255); pixel.setGreen(255); // getPixel(1, 0) retrieves the pixel // one to the right of pixel (0, 0).
2 Pixels Set pixel (0, 0) to green (1, 0) to red.	show // Set (0, 0) to green pixel = image.getPixel(0, 0); pixel.setGreen(255); // Change pixel variable to refer to (1, 0) // then set it to red pixel = image.getPixel(1, 0); pixel.setRed(255);
Set pixel (0, 0) to white.	show pixel = image.getPixel(0, 0); pixel.setRed(255); pixel.setGreen(255); pixel.setBlue(255);
Set pixel (0, 0) to be dark yellow -- set the necessary colors to 150 instead of 255.	show pixel = image.getPixel(0, 0); pixel.setRed(150); pixel.setGreen(150);
Set pixel (1, 0) to be a light, pastel red.	show pixel = image.getPixel(1, 0); pixel.setRed(255); pixel.setGreen(200); pixel.setBlue(200); // Set red at 255, green and blue equal but lower.

> exercises