Using Images

So far, you have mostly been drawing you own pictures to use in your sketches. Wouldn't it be nice to be able to use a picture drawn in another app, or a picture taken with a camera? Well, you can!

Unfortunately the Khan Academy is not the best place for learning how to do this because they put strong restrictions on what pictures you are allowed to use. Even worse, using p5 from your "D:/" drive also fails to load pictures properly. So even though it is rather slow, GitHub turns out to be the best place to put sketches that use image files. As usual, you can create a new copy of the template folder on your "D:/" drive, and you should put whatever image files you want to use into that folder, too. But before you'll be able to test it, you'll have to upload the folder to GitHub and continue to work on it there. Because sketches on GitHub just fail if any little thing is wrong, work in small steps, commit each small change to your code and test it regularly to make sure your code works.

Here is a small example that shows the main ideas of creating a variable to hold an image, preloading the image from a file into the variable before the rest of the code runs, then displaying and moving the image on the canvas. I forgot to include a background command in the draw function to clear the canvas after each move, so the image leaves a trail. When I saw it, I liked the effect, so I've left it that way.

Source code for the sketch