DA1:004 – More Images / Iteration (for loops)



If you don’t care about the font of your text, you can just use the command text() to draw text on the screen with a default sans-serif font.


If you would like to have more control, you can load a specific font for drawing your text. There are two ways to do it:

  • loadFont(): loads a font file from a folder called data inside your sketch folder. The font needs to be in .vlw format. You can create .vlw files with the Create Font tool (Tools–>Create Font)
  • createFont(): You can also use any font installed on your system with the createFont(). It will dynamically convert your font to the correct format.

Check the reference and the examples for more details on how to use the text tools.


In order to display images in Processing, we need to use the PImage class.

PImage photo;

void setup() {
  size(640, 480);
  photo = loadImage("imageFileName.jpg");

void draw() {
  image(photo, 0, 0);

Where does the file have to be?

  • You can have the image file on your computer. It needs to be saved in a folder called data inside your sketch folder.
  • You can also use an url to load an online image.

Other Things You Can Do With Images


  • tint() – can be used to colorize an image, but an even more useful purpose for the tint command is to control the opacity of an image.
  • noTint() – easy way to turn off the the tint effect




PGraphics class is used to draw content into an off-screen buffer. It is very useful for:

  • Saving some parts of your rendered output as an image
  • Creating something like a “layer group” in Photoshop where you draw your output into a separate layer.
  • Applying a filter to an image without overwriting the original image.
  • Drawing mask images that you can then use to mask images you load from the disk.
  • And many other purposes

Iteration & Loops: for, while

I wrote a separate page that covers the while and for loops. Please check it out.

Mapping Values