Media

Learn how to add and manipulate media assets, such as images and videos, in your p5.js sketch.

Start

Key Concepts

Review core concepts you need to learn to master this subject

The preload() Function

Loading Images

Drawing Images to the Canvas

Loading Videos

Looping Videos

Playing Videos

Hiding Videos

Stopping Videos

The `preload()` Function

let img;

function preload() {
	img = loadImage('myImage.jpg');
}
function setup() {
	// Image is completed loaded when the setup function runs
}

The preload() function can be used to load any media assets that need to be completely loaded before the setup() and draw() functions run.

Images and Videos

Lesson 1 of 1

1
Introduction to Images and Videos
So far, we’ve learned to create dynamic p5.js sketches using only shapes and colors. But, just like how you might add external images or videos onto a normal webpage, you can also use the p5.js li…
Start
2
Loading and Drawing Images
Unlike the primitive shapes we’ve drawn so far, media, like images, are considered external assets. To include them in our sketches, we will need to load them using special, built-in p5.js function…
Start
3
The Preload Function
If you’ve ever web-surfed with poor internet connection—you know firsthand that images can take a while to show up, even if other parts of the page load just fine. This same behavior applies to p5…
Start
4
Videos
Now that we can add images into the canvas let’s learn how to add another major type of media: videos! To create a p5.js video element, use the createVideo() function. It requires the video file’s…
Start
5
Video Options
Now that we can add videos to the canvas let’s take a look at some extra options p5.js gives us to control video options and playback. These options also build off of HTML and JavaScript’s existing…
Start
6
Filters
Adding photos and videos into the canvas is cool, but the real fun comes when we add effects to them through tools like filters. Filters in p5.js work in two ways: across the entire canvas and app…
Start
7
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 …
Start
8
The Pixels Array
Before diving into more complex image manipulation techniques, let’s look at what’s happening under the hood with the get() and set() functions. The pixels array is a special data structure that e…
Start
9
Loading the Pixels Array
As mentioned earlier, pixel density can affect how you read the pixels array. Since different monitors have different pixel densities, let’s make things uniform by working with a pixel density of 1…
Start
10
Manipulating the Pixels Array
Once we have the pixels array, we need to know how to read and write to it. That requires correctly indexing into it to get the color values for each pixel. Because each pixel has four color value…
Start
11
Review
In this lesson, we learned how to bring media into our p5.js Sketches with images and videos. We also learned how to play around with them through filters and pixel manipulation. Let’s take a mome…
Start