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.
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.
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:
- Daniel shiffman video lecture here: http://icm.shiffman.net/15.0/
- Or Chapter Image 1: Display, Tint in the textbook.
- Or the first half of this tutorial (up to the pixels, pixels section).
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.
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.
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?