Image Code

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.


The image "x.png" is very simple -- it's a very small black square with a white "x" at its center. PNG (Portable Network Graphics) is a image format, like JPG. Here is x.png:

x.png Code Example

Our first image code example loads the x.png image 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

Pixel Set Red/Green/Blue Functions

Aside: Image Functions Reference

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

Experiments On Pixel (0, 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 ProblemsSolution
Set pixel (0, 0) to be green.
pixel = image.getPixel(0, 0);
Set pixel (0, 0) to be yellow.
pixel = image.getPixel(0, 0);
pixel.setRed(255);  // idea: set red and green to 255
Set pixel (1, 0) to be yellow. Where is that pixel?
pixel = image.getPixel(1, 0);
// Calling getPixel(1, 0) edits the pixel
// one to the right of pixel (0, 0).
Set pixel (0, 0) to white.
pixel = image.getPixel(0, 0);
Set pixel (0, 0) to be dark yellow -- set the necessary colors to 150 instead of 255.
pixel = image.getPixel(0, 0);
Set pixel (0, 0) to be a light, pastel red.
pixel = image.getPixel(0, 0);
// Set red at 255, green and blue equal but lower.

< exercises