Drawing images is similar to drawing shapes. However there are a few extra steps. To draw an image we need to do three things:

1. Upload/store the image
2. Load the image
3. Draw the image

1. Upload/store the image

Before we can load the image we need to make sure the image is in our project, similar to how we would place an image in our images directory in a HTML web page project.

In the p5.js web editor we can see the files in our project by clicking on the > in the top left of the project. You should see the following files:

We can upload our image file directly into the project folder however it is best to keep images together, so create a new folder called images, by selecting the arrow to the right of the project-folder and selecting Add folder.

Now click on the arrow next to the newly created images directory and select Add file:

We will use the option to add files using drag and drop:

Your uploaded file should now appear in the project (in this case robot.jpg):

2. Load the image

Loading the image is simple just call the loadImage() function with the path to the image file. It will return an image object containing the image data which will need to be stored in a variable that we can access later, e.g.:

var img;

void setup() {
  img = loadImage("images/robot.jpg");
}

We should load our images in setup because we only want to do it once (unless the image is dynamically loaded). We then assign it to the image variable.

A note on variable scope

We define a variable using the var keyword. But where can it be accessed? If a variable is defined in a function it can only be used in that function. For example, we can re-write the above example to have the variable img defined in the setup() function:

void setup() {
  var img = loadImage("images/robot.jpg");
}

However, the img variable now only exists in the function it was defined, it can't be accessed in other functions. This is a problem if we want to draw the image later in the draw() function. The bounds on where a variable can be accessed is known as the variable's scope.

To allow a variable to be accessed in multiple functions it must be declared globally, i.e. outside of any functions, at the top level of the source file. In the example in the previous section we defined the img variable outside the setup() function so that we can access the loaded image in the draw() function.

It is quite common to have a list of variables at the top of your source file which are global variables, and used throughout the program. Global variables are a form of data sharing, i.e. sharing data between functions. Global variables are not always the most elegant solution as you can end up with a mass of global variables at the top of the file. Later in the course we will look at a more elegant method of sharing data through passing parameters.

3. Draw the image

Use the image() function to draw the image onto the canvas in the draw() function:

function draw() {
  image(img, 50, 50);
}

In this example we are drawing the loaded image at the location (50, 50). There are some more options on the image() function which you can read about in the reference. One option is to modify the width and height of the drawn image, for example if the source image is larger than what you need, or perhaps to perform an image size animation.