Overview
This learning activity demonstrates asynchronous calls and the need to use p5`s preload function or callback functions to make sure media files are fully loaded before trying to access them in our sketches. We will also review how to save images and image file types before doing light coding to add our first images!
Suggested Duration
45 minutes
Objectives
Students will be able to:
Student Outcomes
Algorithms:
Prototype:
Vocabulary
preload() |
a function that loads data before the other functions begin running |
|---|---|
| callback | a function that will execute at a certain time, once another task has been completed |
| File Type / Extension | the .EXT after a file determines how a computer interprets the data in the file. Common image file types: .gif, .jpeg, .png, .tiff, .svg |
Resources
Finding, Saving && Uploading Images
Did you know that p5 has been hiding things from you? When we type into the editor, we have so far just been typing into a Javascript file - but Javascript works alongside HTML and CSS to create websites. This HTML and CSS has been there the whole time, hidden by the p5 Editor. If we click the little arrow on the side, we will expand to be able to see our hidden files - and have a space to upload our own files. While we can look through the HTML and CSS if we want (and those of us with some web dev skills might want to start making fully realize sites!) we are going to mostly ignore them for now.
To upload an image, we first need to find an image. The easiest place to do this is to go to Google images and search, but we could pull images from most websites we go on - we can even take screenshots and use those! If you are unsure whether the images are allowed to be used in your project, please select the following filters when searching on Google Images: Click on Tools -> Usage rights -> labeled for reuse. When you want to save an image, right click (or control-click) and select 'Save Image As…' Keep track of the folder where you're saving your images! Most operating systems will save them to a folder called "Downloads".
Make sure when you save your image you give it an easy to remember name without any spaces. Because of how computers process spaces, they hate file names that start with capitals and that include spaces, and that will throw a lot of errors our way.
Once we've saved our file to a computer, we should see it saved somewhere on our computer. It will usually say something like 'filename.jpeg' The .jpeg is called a file extension or file type - it tells the computer what type of data it will be reading. Different file types do slightly different things, but for our purposes, we just need to make sure we are looking for image files, which may have types such as:
Ideally, for this project, we would work with JPEG and PNG files as they're typically small in size and won't take much memory. While we can also use .gif files, we will notice that they do not play their animation in p5. There is a workaround for this, but for now, we will focus on static images. To upload an image, click the downward arrow next to program-file, select 'add file', and drag/drop or select the image you'd like to upload. Once you've done this, you can rename the image to an easy file name! Be sure to leave the file's extension.
Loading Files
p5 can draw images, text with certain font types, and play sounds. In order to display (or play) them, it must first load the file in question. Take a look at the sketch below: we load the birch.png file within setup(), and then call the image function to draw it in draw(). From this code, one would expect to see an image in the sketch. However, chances are you are only seeing the gray background.
Why is this happening? Let's look at what loadImage does in more detail. The file birch.png is stored in on a server computer somewhere on the web. loadImage makes a request to the server to send the file to the computer where p5 is running. Image files can be sizeable: the transfer takes some time. This would not be a problem if Javascript, the language we are programming in, was synchronous ––if, after calling a function, it paused running until that function has finished doing its task. Javascript, however, is asynchronous, meaning that it allows multiple things to happen at the same time. After we call loadImage, and while the transfer is still not complete, p5 goes on to execute the lines that come next on our program: it creates the canvas (line 5), and continues to the draw function, where it draws the gray background), and attempts to draw birch.png, most likely before it has been fully transferred to our computer.
Use preload()
To solve this problem, p5 adds another step to our familiar setup() once, and draw() forever program flow: the preload() function. When it runs our sketch, p5 calls preload() first, and then pauses execution until loadImage has finished loading our image file. In the following example, we place our call to loadImage within the preload function, to make sure that the image drawing function will never be called before birch.png is fully loaded.
Display Your Image
Once your image has been loaded, you will notice that it does not show up on the screen right away. That's because while it is loaded in our program, we've never told it to display! We can solve this problem by using the image() function in p5. We will tell it to draw our image by calling the variable.
The image() function can take 5 arguments:
image(variableName, x, y, width, height)
Once you get one image working, trying to get more! As a special challenge, see if you can find images with transparent backgrounds so you can overlap them instead of having an unsightly grid of pictures.
Another method: use a callback function
In some cases, we do not know which image we need to load at the time we are writing the code. Perhaps it comes from a social media account that updates while our sketch is running after preload has been called. In cases like this, we can use a callback function. Instead of placing our call to loadImage within the preload function, we place it in our setup or draw functions as appropriate, passing an extra parameter to it. This second parameter is the name of the function p5 should call once loadImage is done. In this case, we called it imageLoaded. Within this function, it is safe to draw the image to the canvas.
Both methods will allow you to successfully load and draw an image in your program. For the purposes of this course, you can pick your favorite to use on any projects we create. As you become a more sophisticated program, it may become obvious, in certain situations, why one method is better than another, just like a practiced artist knows when to use which type of pen or pencil.
Both the preload and callback techniques apply to any other type of media files that need to be loaded into your sketch, such as sound or font files.