Learn creative coding writing simple programs

48. Load and animate an image of Rick

Discover how to load a JPG image into your Processing program. JPG is the standard photo format for most digital cameras and cell phones. The first thing you need to do is to save your Processing program to your hard drive, and then use the "Add File" option in the sketch menu of Processing to copy the image into your project folder.
Once the image is inside your project folder it is accessible from your program. Then you need to do two things: first, to load the image into a variable using loadImage(). Instead of storing the image in a float variable, which is good for storing numbers, we use a PImage variable, which is good for storing images.
Once the image is inside the variable we just call image(photo, 0, 0) and the photo will appear on the top left corner of your window. In this example "photo" is the name of the variable, but you can try choosing a better name.

Tags: roll, school, load, image, animate, rick

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```