5 – Adding media

So far we have spent time looking at drawing elements. Processing also makes it really easy to add media to sketches – like if we want to show an external image file. Processing can show most standard image types, jpgs, pngs etc.

You must make sure that any media files you are using are in the data folder that sits in your sketch folder. This is the default path and if you files are not there, processing will not show them.

Screen Shot 2015-02-23 at 8.49.19 PM


There is a short cut which is to save your sketch. Then drag your image into the processing window and it will automatically place itself in the data folder. This will only work if you have saved your sketch.

The following code shows that images are stored in their own data type called PImage, it is declared and assigned like any other. So this is the example from the processing examples folder.

 * Load and Display 
 * Images can be loaded and displayed to the screen at their actual size
 * or any other size. 
// The next line is needed if running in JavaScript Mode with Processing.js
/* @pjs preload="moonwalk.jpg"; */ 
PImage img;  // Declare variable "a" of type PImage
void setup() {
  size(640, 360);
  // The image file must be in the data folder of the current sketch 
  // to load successfully
  img = loadImage("moonwalk.jpg");  // Load the image into the program  
void draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0); 
  // Displays the image at point (0, height/2) at half of its size
  image(img, 0, height/2, img.width/2, img.height/2);

If you copy, save and run this code as a new example, you must update the line with the EXACT name of your chosen image file.
Check and double check, everyone makes typos with this.

img = loadImage("moonwalk.jpg");  // Load the image into the program

Notice images are like special variables and we deal with them in much the same way. There are 3 steps in loading your image.
1. declare image variable PImage
2. load image file with loadImage(‘filename’) function.
3. draw image to the screen with the image(img, 0,0); function.

Check out image functions in the Processing reference.

For more information and examples on images see:


It is also possible to draw text to the screen and change the font of this text. Font files must also reside in the data folder of your sketch. You can either manually copy over a font file and place it in the data folder.

Screen Shot 2015-02-23 at 8.57.41 PM

Or you can go to the Processing Tools menu, click Create Font and select which file you want automatically added to the Processing Data folder.

Screen Shot 2015-02-23 at 8.57.48 PM

Here is an example loading a font and writing text to the screen:

PFont font;
String words= "hello world!"; //create a string variable called words and put the phrase 'hello world' into it.
// The font must be located in the sketch's 
// "data" directory to load successfully
font = loadFont("LetterGothicStd-32.vlw"); //load in font file that is in your data folder. Check name has no typos.
textFont(font, 32); //textFont sets font and size of your sketch
text(words, 10, 50); //text is a function with 3 parameters. The first is the string you need to write, the next at the x 
//coordinate and the y coordinate of your text.

Again, for this to run you have to add the font to your data folder and make sure you update the line:

font = loadFont("LetterGothicStd-32.vlw");

With your chosen font name.

Processing 2 also has the capability of creating fonts that are preloaded into your computer with the createFont(); function.

This makes working with fonts a little easier (dont have to move them to your data folder) but it also means that running sketches with unusual fonts across different computers can result in problems.


  • Create a character mashup image collage. Load an image of a person into processing and change their head by layering another image that appears when the mouse is clicked. Also don’t forget you can use a png file type to get transparencies in your images.
  • Can you make their head move?
  • Can you make another sketch using a for loop to repeat an image into a grid?