Skip to Content
Learn
Images and Videos
Introduction to Pixel Manipulation

We can also use p5.js to manipulate images and videos, down to the pixel. p5.js offers built-in functions to do this: get() and set().

The get() function accesses the color of a specific pixel on the canvas. When given a pixel location, it returns the color of that pixel as an array of four numbers, representing the red, green, blue, and alpha (RGBA) values.

let pixelColor = get(28, 35); // Returns [r, g, b, a], where r, g, b, a are values between 0 and 255

A diagram that shows the get() function on a small photo of a puppy. It returns a pink color at coordinates (28, 35).

Alternatively, the get() function also can retrieve regions of the canvas, returning them as a p5.js image element.

// Using get() to access a portion of canvas let x = 0; let y = 0; let w = 100; let h = 100; let partOfCanvas = get(x, y, w, h); // Returns a region starting at (x, y) that's w-pixels wide and h-pixels high

When provided no arguments, it retrieves the entire canvas as a p5.js image element.

// Using get() to access entire canvas let entireCanvas = get();

The set() function sets a pixel at a given location on the canvas to a new color.

let red = [255, 0, 0, 255]; set(28, 35, red); // Sets pixel at (28, 35) to red

A diagram that shows the set() function on a small photo of a puppy. It changes the pixel at (28,35) to red.

The color can be in several formats. Above, we’re using an array of 4 RGBA values, but you can also use a single greyscale value or a p5.js color element.

Just calling the set() function doesn’t change what you see—to reflect changes onto the canvas, you need to use the updatePixels() function after the set() call.

let red = [255, 0, 0, 255]; set(0, 0, red); // Pixel is not actually changed on screen updatePixels(); // Now pixel is changed!

If you use set() multiple times, calling updatePixels() once will reflect all those changes.

let red = [255, 0, 0, 255]; set(0, 0, red); set(0, 1, red); updatePixels(); // Both pixels are updated

The get() and set() functions also work as methods on individual image or video elements.

When using the .set() method on images or videos, you’ll need to call it, along with the .updatePixels() method, before you draw them to the canvas.

let red = [255, 0, 0, 255]; img.set(50, 50, red); // Pixel is not actually changed in our image element img.updatePixels(); // Now pixel is changed in our pixel element image(img, 0, 0); // Now our modified image element is on the screen

Because they’re time-intensive, get() and set() are best suited for conveniently accessing a few pixels at a time. Later, we’ll see how to do larger-scale manipulations, such as accessing pixels in very large images and/or doing manipulations repeatedly in the draw() loop.

Instructions

1.

The p5.js Sketch to the right draws a smiley image that follows the movement of your mouse cursor.

In this exercise, we will use the .get() and .set() methods on the smiley’s image element to change the black outlines in the image to blue ones. We will do this in setup(), so that we can draw the modified image later within the draw() loop.

First, in the setup() function, look for the double for loop that iterates through the pixels in the image. Inside the double for loop, use the .get() method to get the current pixel color, taking in the i, j position. Store the result as a new variable.

2.

Knowing that the get() function returns a length-4 array of RGBA values, create an if statement that checks if the current pixel color is black.

Use the isPixelBlack() function defined at the bottom of sketch.js, which takes in a RGBA color array.

3.

Using the if statement you just created, create logic that will set the color at the current pixel location to blue if it was originally black.

When setting the color, use the RGBA color array for the color blue: [0, 0, 255, 255].

4.

Call the .updatePixels() method on the image after all pixels are iterated through, but before the image is drawn with the image() function.

Folder Icon

Take this course for free

Already have an account?