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
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
- 1So 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…
- 2Unlike 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…
- 3If 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…
- 5Now 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…
- 7We 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 …
- 8Before 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…
- 9As 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…
- 10Once 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Media
Start