CDA -Images and Pixels Lesson

Images and Pixels

Images are an important part of any media communication. A picture is made up of individual elements known as pixels. A pixel is a picture element that stores red, green, and blue values from 0 to 255 for each pixel in a picture.

Pictures are arranged in a two-dimensional array of pixels. The chart demonstrates a color for each pixel at a specific index location.      

The grid has columns and rows.

Each pixel has an (x, y) position in the grid

x specifies the column, starting at 0

y  specifies the row, starting at 0

This is called column-major order.

Processing provides a built in array to store pixels. The name of the array is:

pixels[]

Before you use the pixels[] array, you need to use the loadPixels() method to make sure that the pixel data is properly loaded.

  • loadPixels() This function is called before you access the pixel array
  • updatePixels() This function is called after you finish with the pixel array

In the Processing language, the Color class has defined class constants for many different colors:    

Color.RED, Color.BLUE, Color.BLACK, Color.WHITE, Color.YELLOW, Color.GRAY, Color.ORANGE, Color.PINK, Color.CYAN, Color.MAGENTA

The syntax to create a color object is below:

color c = color(255, 204, 0);  

c is the object that stores the color values.  It can be used to represent the color.

fill(c);

Since a picture is made up of pixels and each is organized in a grid, you can change the colors for each pixel or only certain pixels.  

Since the Processing display screen is made of pixels, you can access individual pixels or you can use a for loop to loop through the entire pixel array. 

loadPixels();

  for(int i = 0; i < pixels.length; i++)

    {

    pixels[i] = color(255,0,0);

    }  

    updatePixels();

    float len = pixels.length;

    System.out.println(pixels.length);

You can find out how many pixel elements are in the array by accessing the length variable.  

float len = pixels.length;

We then know the pixel array has a total number of elements equaling WIDTH * HEIGHT.

The following video explains how to use the:

  • pixels[] array
  • loadPixels()
  • updatePixels()

Red White Video

Watch the Red White video below.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION