PFA:004 – Text & Images




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 generic 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. createFont() renders the text as vectors when you use the default renderer.

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.

Some Examples for Working with Images

Load and Display Image + createFont() for Loading a Font

Define an area of the Image as a Button

Use tint() to Control the Opacity of an Image

  • tint() can be used to colorize or fade an image
  • noTint() is an easy way to turn off any tint effect
  • map() is used to map the values from the mouse coordinates to a range of 0–255
PImage doge;

void setup(){
	doge = loadImage("doge.png");

void draw(){
	float opacity = map(mouseX,0,width,0,255);
	text("Move the mouse from left to right to see magic!",40,height/2);
This is just a GIF. Open the example in OpenProcessing, the embedding doesn’t seem to work properly…

Use get() to Get the Color of a Pixel

  • PImage get() – will give you the color value of a certain pixel
PImage img;
int x;
int y;
float s;
color c;

void setup(){
  img = loadImage("doge.jpg");

void draw(){
  x = int ( random(img.width) );
  y = int ( random(img.height) );
  c = img.get(x,y);
  s = map(mouseX, 0, width, 5, 30);
This is just a GIF. Open the example in OpenProcessing, the embedding doesn’t seem to work properly…



If you try to search for video in the Processing language reference, you will notice that there is nothing to be found. The reason for that is that video playback is not part of the core Processing functionality, you need to use an additional library.

Libraries are collections of code that extend the functionality of Processing. There are a couple of libraries that are built-in (such as Serial and Network), but most of them need to be installed from the Library Manager. (Sketch–>Import Library—>Add Library)


Search for the official Video library from The Processing Foundation and install it.


The best way to figure out how the library works, is to go through the examples that come with it. Note that the functionality is split into two main classes:

  • Movie: used to play video files. The library is a bit fussy about the codec of the video. H264 .mov files seem to work well.
  • Capture: Used to capture the image from a webcam connected to the computer.


Playing sound in Processing also requires an external library. Try these libraries:

  • Sound library – The official sound library from the Processing foundation (has some bugs and issues. Especially on Windows)
  • Minim library – Often works better, so let’s use this mainly

There are some other sound libraries also, if you need to do something more specific.

Again the best way to learn how it works is to go through the examples.

Other Useful Libraries

You might want to install some additional libraries while you are at it. Some of the features might be beyond your skill level right now, but the libraries listed below are some interesting ones that you might want to come back to later. I added links to the libraries, but you should be able to install these directly with the Library Manager.

  • List of Processing libraries – Don’t just listen to my suggestions, check the list to find the libraries that would be useful for you.
  • Arduino (Firmata) – For controlling Arduino from Processing
  • Box2D – Physics library
  • controlP5 – Add GUI elements
  • oscP5 – OSC library for Processing. Very useful for connecting Processing to some other software (like Pure Data).
  • Open Kinect for Processing – For working with the Kinect sensor.
  • Syphon – Used for sharing frames between applications
  • toxiclibs – A collection of useful tools (physics, simulation

4th Assignment

No need to return anything today, since OpenProcessing doesn’t really work so well if you try to work with external files. Enjoy your weekend!

I would still recommend exploring the examples in more detail. Try finding things that are relevant to your interests.