Kinetic Typography, Workshop Notes

Posted on 2011-07-07 by Jan Vantomme
Tags: processing, teaching

In this article, I'll explain some techniques I use on a regular basis to create typographic experiments with Processing. The examples were used in the Kinetic Typography workshop I did last year with my students in Brussels. The goal of this workshop is to visualize a word or phrase using Processing. Students need to choose a word, an appropriate typeface and use particles to animate that text.

The Basic Example

I usually start by creating a reference image with black and white pixels. This image contains the words I want to render on the screen. For performance, this image should be kept small. I generally use images of 192x108 pixels. Renders of my sketch are High Definition video at 1920x1080 pixels. Each pixel in the reference image stands for an area of 10 x 10 pixels in the final image.

In the basic example, I created an image with the word "BUBBLES". The particles move from the bottom of the screen to the top. The size of the particles is set by the speed of the velocity vector. The bigger the particles are, the faster they go to the top. This is an easy trick to create a sense of depth without using 3D. The update() method in the Bubble class checks if in which 10 x 10 area of pixels the location vector is, and maps it to the pixel in the reference image. If that pixel is black, the bubble grows and is filled. If the pixel is white, the bubble is rendered as an outline. The video below shows what the final sketch will look like.

If you want to know a little more about how the Bubbles class, I suggest you to read these articles I wrote during my Processing Month.

The Advanced Example

Rendering the sketch from an image is somewhat limited. You always need to go back to Photoshop or another image editor if you want to render another text. In the advanced example, I've used the ControlP5 library by Andreas Schlegel to create a small interface so I can easily interact with the sketch. The finished interface looks like this:

The finished interface made with the ControlP5 Processing library

The reference image is rendered on the fly when you enter text into the textfield. I'm using a PGraphics object to do this. The code for rendering text on a PGraphics object looks a lot like what you would normally do in Processing, but with the name of the object in front of every function. This is the code I've used to create my object.

void generateReference()
{
    reference.beginDraw();
    reference.noStroke();
    reference.background( 255 );
    reference.fill( 0 );
    reference.textAlign( CENTER );
    reference.textFont( font, 48 );
    reference.text( theText, 96, 70 );
    reference.endDraw();
}

In the basic example, you needed to press keys to save an image or movie. In the advanced example, you can use the buttons on the interface. Be sure that you hide the reference image when you save files, otherwise it will be visible.