How to use images in p5.js

Image handling allows users to display and manipulate images. The p5.js library has built-in functions that allow for such interactions to take place.

Images

To use images, we’ll primarily be using two functions: loadImage() and image(). There is one nuance with the loadImage() function that it must be called in the preload() function rather than setup(). This is because loadImage() is an asynchronous functionAsynchronous functions do not halt the execution of the application, rather, they wait for the function to be finish processing in the background., and calling it in setup() might cause the application to start without successfully loading the image.

The preload() function

The preload() function is a special function called before the execution of the setup() function. This function waits for all promisesAny asynchronous function returns a “promise,” which we use to get the output of that function once it has finished executing. to return before the control is returned to the application. We use the preload() function to load assets like music, sounds, images, or videos.

We’ll call the loadImage() function in the preload() function. The loadImage() function takes in only one argument, i.e., the image’s URL.

Note: The image may be locally stored with the code, or hosted online (accessible through some API call). The function signature remains the same. In our example, we will be using an image hosted online.

The image() function

The image() displays the image onto the canvas. This function takes in five parameters. The signature of this function is:

• The img is an p5.Image object.

• The x and y are the coordinates for the image.

• The width and height are the width and height of the image.

Note: The x, y, width, and height are optional parameters. Their default values are:

• x = 0

• y = 0

• width = width of the image loaded

• height = height of the image loaded

The full signature of the function looks like image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight], [fit], [xAlign], [yAlign]), but this is only applicable in complex situations.

The fit parameter is not required. It allows us to draw a specific part of the source image without changing its shape. If we set fit to CONTAIN, the entire part will fit inside the destination rectangle. If we set fit to COVER, the part will cover the entire destination rectangle, similar to zooming in.

The xAlign and yAlign decide how to align the fitted part. xAlign can be set to LEFT, RIGHT, or CENTER, while yAlign can be set to TOP, BOTTOM, or CENTER. By default, both xAlign and yAlign are set to CENTER.

Let’s look at some examples:

Example: Loading an image

Take a look at the example below. We’re loading an image and displaying it onto the canvas.

Code explanation

• Lines 1–5: The img variable stores the image, which will be an p5.Image object. The imgUrl stores the path to the image.

• Lines 8–11: In the preload() function, we are using the loadImage() function to load the image from the path imgUrl.

• Lines 14–23: In the setup() function, we are using the createCanvas() function to create a canvas for the application. We use the background() function to set the background to 240, which means a gray value of 255 (white). Then, we use the image() function to display the image at coordinates 0,0 and size 500, 120.

• Line 30: The image() function displays a specific part of the img on the canvas. The destination coordinates 0, 300 and dimensions 200, 200 determine where on the canvas the image is placed while the source coordinates 300, 900 and dimensions 300, 300 specify the portion of the img image to be shown. Optional parameters include fit set to CONTAIN, ensuring the image fits within the specified rectangle, and xAlign and yAlign set to CENTER, aligning the subsection both horizontally and vertically.

Example: Image position manipulation

Take a look at the example below. We’re loading an image and displaying it onto the canvas. The mouse position controls the position of this image.

Code explanation

• Lines 1–8: The x  and y variables store the position of the image.

• Lines 17–33: In the setup() function, we set the variables x and y to zero initially. We set the imageMode to CENTER. This puts the image coordinates in the center instead of the top-left corner.

• Lines 35–45: We redraw the background and image at each frame in the draw() function. We set the x and y to mouseX and mouseY respectively. These are the coordinates of the mouse pointer.

Conclusion

The p5.js allows the user to work with images in a simple way. There are also other functions like the createImage()Used to create a p5.Image object. function, or image manipulation like tint()Used to add a color overlay to images. that we can use to perform more complex image interactions.