Sometimes you don’t want to draw everything using elementary shape functions, sometimes you just want to display a cool image. image() has you covered.
Loading and displaying an image is always the same process.
Let’s say you have an image file called bird.png. First, you:
bird.png isn’t like 100MB. Remember that people are viewing your work in their browser, they don’t want to download GIGANTIC FILESbird.png has appropriate dimensions for your canvas. No point loading a 1920x1080 image to display on a 640x480 canvas.bird.png in the assets/images folder of your projectNow the image is in your project you can load it. We’re going to write a function called preload() that we’ll call in setup(). In it we will load our image into a variable. That’s right, a variable can contain an image.
// We need a variable to store our image in so we can use it later
// "undefined" here means that there's nothing useful in the variable YET.
let birdImage = undefined;
/**
* Load our bird image
*
* Note the "async" at the front here which we need to be able to
* load files in p5.
*/
async function preload() {
// This is how you load an image!
// Note that loadImage() needs the PATH to your image inside your project
// Note that the path is CASE SENSITIVE
// Note that the filename is CASE SENSITIVE
// Note the QUOTE MARKS around the path
birdImage = await loadImage("assets/images/bird.png");
// Note the use of "await" before we call loadImage() as well,
// we need this because we're loading a file which takes time,
// so our program needs to (a)wait the file!
// It means the program will *pause* here until the file is loaded.
}
/**
* setup() is run once at the start of our program.
*
* Note that because we're loading files we put "async" in front of setup()
* to show that it involves instructions that take variable time (loading).
*/
async function setup() {
createCanvas(640, 480);
// We call preload() to load our files and include "await" in front of
// it so our program pauses until the preloading of the files is done.
await preload();
}
function draw() {
background(0);
// This is how you display an image!
// The image will be drawn from its TOP LEFT CORNER like a rectangle
// The arguments here are:
// - birdImage <- The variable with the image in it
// - 100 <- the x coordinate for the top left corner
// - 50 <- the y coordinate for the top left corner
// So the TOP LEFT CORNER of the bird image will be at (100, 50)
image(birdImage, 100, 50);
}
And now there’s a bird image on the canvas.
If you want to, you can display images based on the centrepoint of the image, too:
push();
imageMode(CENTER);
// Now the CENTER of the bird image will be at (100, 50)
image(birdImage, 100, 50);
pop();
We’re most often trying to keep all the properties of something like a bird together in one place, so we will probably want our bird image to be a property of an object:
let bird = {
// Position of the bird (where we will place the image)
x: 100,
y: 50,
// The bird is going to move so it has velocity
velocity: {
x: 2,
y: 1
},
// The image of the bird, which we will load in preload()
image: undefined
};
async function preload() {
// Load the bird image into our bird object's image property
bird.image = await loadImage("assets/images/bird.png");
}
asyc function setup() {
createCanvas(640, 480);
await preload();
}
function draw() {
background(0);
// Move the bird
bird.x += bird.velocity.x;
bird.y += bird.velocity.y;
// Display the bird
push();
imageMode(CENTER);
image(bird.image, bird.x, bird.y);
pop();
}
The birdie! It’s flying, mom!
Using loadImage() we can load an image into a variable (or property). Using image() in draw() we can display the image. Using imageMode(CENTER) we can display images from their centrepoint.
We will pay attention to image file sizes and image dimensions to make sure they are appropriate.