U3LA3.1: Preload, Images, Tint

How can I utilize the preload function and load images into my program?

Teacher Notes && 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. In the second half of the lesson, students will learn to adjust and manipulate their images.

Many students have limited experience with saving files locally. Anticipate needing to teach a lot of [what you might think of as] basic skills, including naming conventions for files. Ideally, files should follow the same rules as variables - camel case and no spaces.

Anticipate that students may also struggle with image file types - a common error is for students to accidentally save something that is not a compatible image (due to clicking the wrong option) and not realizing what they did. Because of this, we plan in time to discuss file types/extensions - this knowledge will be built onto in AP CSP, when students will also discuss lossy and lossless compression.

Objectives

Students will be able to:

• Identify image file types to use in their program

• Use the preload function to load images from local and web-based files

• Add images to their canvas, position, and resize.

• Use a for loop to draw mulitple instances of an image

• Use tint to alter the appearance of an image

Suggested Duration

2 class periods (~90 minutes)

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

9-12.DL.1 Type proficiently on a keyboard.

9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

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

• Background - elements farthest away in the back of a scene

• Middle ground - elements in the middle of a scene

• Foreground - elements at the front of a scene

• tint - a colored overlay that adjusts the appearance of pictures. (think Instagram filters!)

Planning Notes

Planning Notes	Materials Needed
There are no specific planning notes for this lesson, but it is the first lesson students will be using media - whoo!	No special materials needed.

Resources

• Finding, Naming, Saving Image Files (Youtube Video)

• Adding and Displaying Images in p5.js (Youtube Video)

• Coding Train - Uploading Media Files (Youtube Video)

• p5.js Media Example #1

• p5.js Media Example #2 (callback function)

• Using Tint (Youtube Video)

• Sample Forest Project

Assessments

Formative

• Collect student work on importing images

• Exit Slip

Summative

• Mini Project: Vision Board

• End of Unit Project: Meme Generator

Do Now/Warm Up (3 -5 min)

Have students respond to the following prompt:

List the five things that you absolutely cannot start your day without having or doing.

After students have responded, give time for them to share out. Push students to think about why these things are necessary for their day to be successful. Explain that there are some things that might also be crucial to our programming running and that we want to make sure they happen before anything else takes place.

File Types & Finding Files (10 - 12 min)

Discuss the goals of this lesson:

1. Figure out how to find and add images to our project

2. Make sure images are loaded before our program is run

3. Code images to display on our canvas

Before students can continue with a code-along, first establish the basics of file types/extensions and their definitions. Then, introduce students to common types of image files:

Common Image File Types	Sound and Video File Types	Other File Types
.jpeg/.jpg .png .bmp .tiff .gif .svg	.mp3 .mp4 .wav .aac	.html .pdf .docx .py .web

NB: If you're prepping students for an AP CS course, this would be a great time to sneak in the idea of lossy and lossless file types - but it's not necessary!

Now, to add images into our program, we first need to find some images. Because we are making small, personal projects for the purpose of education, we will be using Google Images and won't be super concerned about the source of our images. However, it is important for students to know that images may be subject to copyright protection and should always be properly credited in their code via code comments.

If you are so inclined, you may choose to teach students about copyright, fair use, digital licensing, and creative commons licenses. You can also have students pull from images that are under creative commons/fair use licenses using the following sites, but they can sometimes be limited in scope:

• Creative Commons Image Search

• Creative Commons on Flickr

• Smithsonian Open Access

• Or try searching for 'open source', 'royalty free', or 'stock' photos and see what you can find!

But for now, to Google! There are two different ways that we can get images into our program:

1. We can save the image locally and add the image file to our program, which is a best practice to make sure the image is always right where we need it to be and we aren't making too many pull requests for an image that lives on someone else's server space.

2. We can get the image URL, which is where the image, in particular, lives on the internet, and use that to put the image in our program. This is a fine solution for our small, personal projects but not a great practice if we were making something bigger or commercial.

We are going to focus on #1 for now, but we will give an example of #2 later in the lesson. It's safe to assume that students have never (or rarely) been asked to save a file locally to their computer as they exist in the generation of the ☁️cloud☁️. Give students one minute (use a timer - it's easy for kids to go down a rabbit hole) one minute to find an image they like of some prompt you've given, like say, a dog. Then, walk them through these steps:

1. Create a new folder somewhere on your computer named after this class. Putting it on the desktop will make it easy to find later.

2. Right-click (this is a command-click or two-finger click if you're using a Mac) the image that you want to save.

3. Scroll down to 'Save Image As...'

4. Give the image a name you will remember. DO NOT use spaces or lead with a number - use the same rules we use for variables when naming images!

After students have saved their first image, show them that they have some control over the results from a google image search. If they click the 'Tools' button (bottom right under the search bar when in Google Images) it will bring up several options. If they select 'Color --> Transparent' they will be shown only images with a transparent background, which can be useful when adding to our program. (You can also search by usage rights using the Tools button - just select 'labeled for reuse.') Have students save two more images (preferably with transparent backgrounds) to practice.

Now, let's head to our program. Did you know that there is an entire section of our sketch that p5.js has been hiding from us? 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.

HTML (Hyper Text Markup Language) can be thought of like the bones of the website, CSS (Cascading Style Sheets), like the clothing or makeup, and JavaScript like the muscles that animate it. 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 realized sites!) we are going to mostly ignore them for now.

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 filename! Be sure to leave the file’s extension.

Once you've done one image together, ask students to load the other two in for practice. Circulate the room and make sure students can see their images now listed in the sidebar with the other files.

preload() (12 - 15 min)

NB: Your code will vary from the examples as you are finding and uploading your own sample image with students. As such, your file may not be called birch.png, and your image may not even be of a tree!

p5 can draw images, text with external 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() into a variable, 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.

var tree;

function setup() {
  tree = loadImage("tree.png") //must be exact and include file extension in ""
  createCanvas(400, 400);
  //Loop is off so it would load faster
  noLoop()
}

function draw() {
  background(64);
  tint(180,70,60);
  image(tree,200,300,100,200); 
}

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.

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.

Code along with students to introduce the idea of preload() and demonstrate that we have, all along, had access to other files than just our javascript. It’s not necessary to show students the HTML and CSS right now (coming when they look at fonts!), but this is where they can host pictures in their project that they’ll be using in their designs. Be sure to demonstrate uploading before running through preload and talking about how to get an image loaded into our program.

var tree;

function preload() {
  tree = loadImage("tree.png")
}

function setup() {
  createCanvas(400, 400);
  //Loop is off so it would load faster
  noLoop()
}

function draw() {
  background(64);
  }

This is enough to load the image in, but not to actually draw it - to draw the image, we would need to do the following:

function draw() {
  background(64);
  image(tree, 0,0,100,100)
  }

The image() function takes in five values - the variable holding an image, an x and y position, and a width and height, with the latter two being optional: image(x, y, [width], [height])

Once one image is working, encourage students to do the same for the rest of their images. They should aim to get ~6 images loaded into their program and displaying on their screen! As students work, watch for these common errors:

1. Just as we only have one setup and draw, there should only be one function preload (where you can preload many images into variables).

2. Make sure you've actually added the file to the program. This seems self-explanatory, but things happen!

3. Spelling matters! If something doesn't work, look to make sure the spelling is exact and the file types match. (Sometimes students go on autopilot and give everything a .jpg extension including things that do not have a .jpg extension.)

4. Watch for trailing spaces. Sometimes students will name images with a space at the end of the name, which can throw a wrench in things. Watch for these if errors are occurring - this goes along with spelling matters!

5. Make sure they have opened/closed the {} for each function appropriately.

If students are at a loss for what images to put in their program, consider making a scavenger hunt of items for them to find images of and go from there.

Load an Image & Play with Position, Size, and Tint (5 - 10 minutes)

This will likely be the start of a new class period - you may want to begin by asking students the following:

You've just taken a picture that you want to share with the world. What are some things you might want to do to it before you post it on social media, or send it to friends/family?

After students share their ideas, relate some of these to computer science (adding text or mark up can easily be done in p5!) and explain that the idea of "filters" relates to what they will learn today.

Remind students again how to load an image into their project, make sure it has a usable name, etc etc. Once the image is there, review position and size, which students saw in the first half of the lesson.

The new material for them involves applying tint to an image, which for our purposes we will think of like fill - but for images instead of drawn shapes. In that way, it's a bit like an image filter, which your students are probably very used to hearing about. The best way to explain it is to draw a lot of comparisons to filters they are familiar with from Instagram or other photo apps! The big difference here is that in p5 we have total control - so we can make overwhelming tints that essentially turn an entire image blue, or we can be subtle and just balance out the colors. Try to steer your students towards the latter (unless they want to read about brutalism and make some intense and purposeful design decisions). Tint is based on what color mode you are in - HSB or RGB - and will look like this (alpha being an optional 4th value like in fill): tint(v1, v2, v3, [alpha])

In this activity, we are going to play with our image a bit. Just for fun, go find an image of some creature you find in nature - try to find one with a transparent background (most likely this will be a png file). When searching from Google Images, click Tools after your search, then click Colors -> Transparent to filter for images with a transparent background.

Once you load your image, it should look something like this:

NB: Your code will vary from the examples as you are finding and uploading your own sample image with students. As such, your file may not be called birch.png, and your image may not even be of a tree!

var tree 

function preload() {  
   tree = loadImage("tree.png")
}
 function setup() {  
   createCanvas(400, 400);
   colorMode(HSB)
}
 function draw() {  
   image(tree,200,300, 100, 200); 
}

As we’ve seen before, the second and third parameters of the image function set its position on the canvas. In the sketch below, instead of drawing our image at the canvas origin as above, we are drawing it at (x,y) = (200, 300). If we were to add a fourth and fifth parameter, so it reads image(tree,200,300,100,200); we would be adjusting the width and height to 100px and 200px respectively.

If we choose to use tint, we call it before the image function, similarly to how we call fill before the shape we wish to change. Tint causes the image to be drawn with a color fill, defined by RGB or HSB values depending on the current colorMode. Adding a fourth parameter for the alpha channel we could make the image transparent. In the example below the tint color uses HSB to create a slightly bluer version of our tree:

var tree
 function preload() {  
   tree = loadImage("tree.png")
}
 function setup() {  
   createCanvas(400, 400);
   colorMode(HSB)
}
 function draw() {  
   background(220);
   tint(180,70,60);
   image(tree,200,300,100,200);
 }

When we change tint with high saturation and brightness, the results can be very overwhelming - however, if we are more subtle in our adjustments, they can work like Instagram filters and make images look better, or go better together.

An Experiment in Opacity (5 - 10 min)

Let’s add another tree, and with this one, adjust the opacity. What do you notice?

var tree 

function preload() { 
 tree = loadImage("tree.png")
}

 function setup() {  
   createCanvas(400, 400);
   colorMode(HSB)
}

 function draw() {  
   background(220);
   tint(180,70,60); 
   image(tree,200,300,100,200); 
   tint(180,70,60,0.3); 
   image(tree,250,350,100,200);
}

Using Tint to Create Depth (5 - 10 minutes)

Let's take a pause for a moment to discuss a little color theory; move away from the editor for just a moment so we can talk about how tint (and colors in general) can be used to create depth in a 2D design. From an art perspective, any scene you create has a foreground, a middle ground, and a background. Check out this classical example to understand each one:

Image of a bucolic oil painting with background, middle ground, and foreground labeled.

Generally, the foreground has the warmest, most saturated colors, because you are supposed to feel that it is close. Warm colors tend to be reds and oranges, but sometimes we see this effect with other colors that are just very saturated. The middle ground has colors somewhere in the middle, while the background has the coolest, least saturated colors. Cool colors are generally blues, purples, and greens, but this effect can be achieved with any unsaturated color. While it’s not true in this example, sometimes the background might be darker, as well, depending on the scene that is being created.

If you are interested in doing a deep dive into art/design/color theory, you could turn a good 20-40 minutes into just exploring this idea with colored paper cutouts and having students make a design with a defined fore/middle/background - but that is way above and beyond and not totally necessary to complete this project.

Create a Forest Scene (7-10 min)

As a pair programming activity or on their own, have students find an image of a tree (or several trees) with a transparent background. Using several for loops, create ‘rows’ of trees to create a forest scene. Give each row a unique tint so that it creates the illusion of having a foreground, middle ground, and background.

NB: Students could absolutely do this without for loops, but it would be a much less efficient way of solving this problem and would probably take a long time. If you have students who go this route (because combining the for loop and image skill may be confusing), be sure to talk about it with them (and the class, if necessary) to get more buy-in using a for loop.

Please view the sample project if you need guidance on the output!

Wrap Up (5 min)

Students can submit their project as a formative assessment if you’d like, or answer one of the following questions as an exit slip:

1. What is the purpose of the preload() function?

2. Describe the steps needed to upload an image and get it to display on your canvas.

3. What are common file types for images? Which file type(s) did you use in today's project?

Extensions

For students who are racing ahead, there is no particular extension for this assignment. There isn’t much ‘more challenging’ about uploading images. It is recommended to have them start trying to create compositions with images, or have them start searching for images with transparent backgrounds to explore layering, rather than having them move on to new skills.

You can also have students do a quick little Google exploration for websites that will remove background from images, which is a great tool to be aware of for when they can't find the image they want with a transparent background already!

Can you add the following to your project?

• Add multiple tree images to an array, and select a random tree to draw each time.

• Hide several creatures within your forest - play with opacity if you want them to be super camouflaged!

• Increase the brightness of the tint on a row of trees if it is clicked on