Loading and Displaying Images

Grade 6~8

Uploading an Image

  • First and foremost, let’s switch over to the latest version of p5.js on the p5.js Editor!
  • Find an image for your project or start with this picture of a cat;
  • Open the p5.js Editor and select the arrow next to sketch.js on the top left of the Editor. The sketch folder will appear on the left sidebar. Click the plus “+” button, and select “Upload file”.
  • Select the image from your device and upload them into the sketch folder. You can drag and drop the files into the upload box that appears, or click the box and select files from your computers’ files manager.

Upload image in editor

Tip: p5.js Editor accepts images with .jpg, .png, .gif extensions.

Tip: .png support images with transparent backgrounds, while .gif contains a series of images that can be displayed as an animation.

Loading an Image

In order to load an image, you will first need to create an empty variable, then store the image using loadImage():

let catFront; // create a variable to store the image

async function setup() {
  catFront = await loadImage("cat_front.png"); // load the image into catFront
  createCanvas(400, 400);
  imageMode(CENTER); // Shifts image anchor point to the center
}

Tip: Using async and await ensures that your image completes loading before the program continues to run.

Displaying Image

To display the image, move over to function draw() and apply the image() feature:

function draw() {
  background(220);
  image(catFront, x, y, 100, 100); // variable name, x, y, w, h
}

Cat sitting

If you don’t have a square image, the approach above might have distorted your image. To avoid distortion, use catFront.width and catFont.height to access the width and height values of your uploaded image:

let catFront; // create a variable to store the image

async function setup() {
  catFront = await loadImage("cat_front.png"); // load the image into catFront
  createCanvas(400, 400);
  imageMode(CENTER); // Shifts image anchor point to the center
  console.log(catFront.width, catFront.height); // width and height of the uploaded image
}

Then you can use division to cut the width and height of an image down at the same ratio:

function draw() {
  background(220);
  image(catFront, x, y, catFront.width / 5, catFront.height / 5); // variable name, x, y, w, h
}

Code Snippet: cat sitting image.