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() 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
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();
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
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
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
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,
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
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
.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
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
j position. Store the result as a new variable.
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.
isPixelBlack() function defined at the bottom of sketch.js, which takes in a RGBA color array.
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].
.updatePixels() method on the image after all pixels are iterated through, but before the image is drawn with the