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.

Setting individual pixels to red

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