Tutorial: Images

Now we create our global image variable "panda".

As you already know the setup() function is called before our draw() loop starts. But Javascript is asynchronous, meaning that it allows multiple things to happen at the same time. So if we would load our image in setup(), it could happen that the image file is still not fully loaded before it's needed in another line of code. Therefore it's better to use another built-in function of p5: preload().

The loadImage command loads an image from the given path. Because we uploaded our file to this sketch in OpenProcessing, we can just use the filename "panda.jpg". We could also put in a URL to an image file here.

When we run our sketch, p5 calls preload() first, and then pauses execution until loadImage has finished loading our image file.

Now we display the image in our draw() function with the image command:

xxxxxxxxxx

image(img, x, y, [width], [height])

As input parameters we use:

1. Image variable: panda
2. Position on the x axis (upper-left corner): 50
3. Position on the y axis (upper-left corner): 100
4. Optional: width of the displayed image
5. Optional: height of the displayed image

Note that the reference point for positioning the images is the upper-left corner (for ellipses it is the center).

Since we leave out width and height, the image is displayed in its full dimensions.