Working with Images using p5.js

Authored by John Kuiphoff (adapted from http://p5js.org/learn/examples/Image_Load_and_Display_Image.php)


So far, our world has been filled with simple shapes and flat colors. By now, you might want to include images in your sketches. As it turns out, it's actually very simple to add ".jpg" and ".png" files to your code.

Displaying an Image

First, obtain or create an image. Then, save the image to the root of your sketch folder. In the screenshot below, you'll see that we'll be using an image named 'monkey.jpg':

P5.js accepts ".jpg" and ".png" files (and ".gif", too). Note: a native Photoshop (.psd) files won't work - you'll need to save your images as a ".jpg" or ".png" file.

A ".jpg" file is generally used for photographs and does not have a transparent background. A ".png" file is generally used for flat graphics (logos, cartoons, etc) and supports transparency. Support for transparency will be important later when we develop our "Simple Game" project later in the semester. Also, you might want to use Photoshop to make sure that your images are 96dpi and that they are resized to the size that you want them to appear in your sketch. You don't want to bring in a 15MB image file into p5.js.

Note: It is important to place the loadImage() function inside of the preload() function so that it loads before the rest of the sketch executes. Here is the code to get an image to appear in your sketch:

var img;

function preload()
{
  // load image
  img = loadImage("monkey.jpg");
}

function setup() 
{
  // set canvas size
  createCanvas(400, 250); 
}

function draw() 
{
  background(255);

  // display image (img, x, y)
  image(img, 0, 0); 
}

Before you are able to display an image, you must first load it into memory in your sketch's setup() function. The image() function accepts three parameters: a reference to the image, x location, y location.

Displaying Two Images

You can also add more than one image to the screen.

var bg, ufo;

function preload()
{
  // load images
  bg = loadImage("greenhall.jpg");
  ufo = loadImage("ufo.png");
}

function setup() 
{
  // set canvas size
  createCanvas(400, 250);
  
  // hide mouse cursor
  noCursor();
}

function draw() 
{
  background(255);

  // display background image
  image(img, 0, 0); 
  
  // display ufo
  image(ufo, mouseX, mouseY);
  
}

Move the mouse over the sketch:

Image Filters

P5.js can do a lot more than just display images. It can manipulate live video, access information about each pixels and a whole lot more. We will be spending more time with images later in the semester. But for now, let's see how easy it is to apply filters to images. It's a little bit like Instagram:

var originalImage, thresholdImage, invertImage;

function preload()
{
  // load original image
  originalImage = loadImage("monalisa.jpg");
  
  // load in a few more copies (yes, I know that I could also use clone())
  thresholdImage = loadImage("monalisa.jpg");
  grayImage = loadImage("monalisa.jpg"); 
}

function setup() 
{
  // set canvas size
  createCanvas(600, 300);
}

function draw() 
{
  background(255);
  
  // add filters to images
  thresholdImage.filter("threshold", 0.5);
  grayImage.filter("gray"); 
  
   // display images
  image(originalImage, 0, 0); 
  image(thresholdImage, 200, 0);  
  image(grayImage, 400, 0);
  
  // display text labels
  fill(255);
  noStroke();
  text('Original', 25, height - 25);
  text('Threshhold', 225, height - 25);
  text('Greyscale', 425, height - 25);
}

Read more about applying filters using p5.js

comments powered by Disqus