How to Use Processing to Make Interactive Art

Using Processing to Make Interactive Art

Processing is a computer language used by visual artists to make generative and interactive art. As well as creating graphics on screen, the language is also used to make all kinds of interactive sculpture and physical arts. At first, it’s hard to grasp what it’s for, but suffice it to say,the art world has embraced Processing as its programming language of choice.

In this article, we see how the band The Sinatra Test created a cover for its forthcoming album which creates a unique version for every user via a Mac app distributed with the music.

Album Cover Generator

For their forthcoming album “ambientertainment,” The Sinatra Test wanted to have a cover design that reflected the generated nature of the music on the album. Processing offered a simple and easy to learn method to do just that.

The code for the album cover is not quite finished at the time of writing, but they were pleased enough with the output to let us look at the results so far and publish the code for this early version for people to try for themselves.

The code is very short and simple, but it does the job. In this current version on the Mac, running the build of the app creates a variation on the design and saves it to the same location as the app.


To install Processing, go to the Download Page on the site, and click the link for your platform. When it’s downloaded, unpack the ZIP file and drag the Application to your Applications folder.

Make it a PDF

The first step is to load the PDF creation library:

import processing.pdf.*;

Then we set the size of the output on screen, in this case 500 pixels square:

size(500, 500);

Obviously the output is a PDF vector graphic, so it can be scaled to any size without degradation or jaggy lines.

Next we need to define a filename for the resulting PDF and start recording the graphics as they are created for storage in the final image:

beginRecord(PDF, "cover.pdf");

The colors of the image are then defined. The background is black:


When in Doubt, Randomize

To create the colors of the strands it was decided that they should be mostly green but with variations. The strategy was that the RGB of the colors be randomized but with the green element always being able to go higher than the red or the blue. Green can go all the way up to 256, but the other two channels are capped at 100.

So we define the floating variables red, green and blue with the following values:

float red = random(100);
float green = random(255);
float blue = random(100);

This creates a new colorway each time, green every time but with varying degrees of red, green and blue to adjust the shade. There is always more green than red or blue.

Hair, Leaves or Chives? Who Knows!

Now the code for drawing the strands. The line weight of each strand is randomized, and the horizontal position of the top and bottom of the strands are also varied randomly within certain parameters. The strands are 60% translucent, resulting in a pleasing hair-like strand effect:

for (int i = 0; i < 500; i++) {
    float r = random(10);
    strokeWeight(r); stroke(red, green, blue, 60);
    float offset = r * 5.0;
    line(i-20, 500, i+offset, 0);

Now Some Text

Next the font must be created. For use in Processing, fonts must be converted to a .vlw format. This is done from a face in the fonts directory on the host system.

Note: this is one area that the band is still working on. For web apps the converted font can be stored on the server, never being installed on the user's system.

PFont font;
font = createFont("CooperBlackMS",24);

Once the font is created the text is written to the image, the name of the band top left and the name of the album bottom right:

text ("the sinatra test", 10, 20);
text ("ambientertainment", 250, 490);

Apparently it took a lot of trial and error to position the text properly, and the seemingly arbitrary coordinates are the ones which looked the best on screen.

Wrap It up

Then the recording of the PDF is ended, effectively stopping the program and writing the finished image to disk with the filename defined above:


Finally the program prints a message to the console to indicate it’s finished:

print("Done it! New Album Created");


The final version of the app will have some refinements, such as an embedded font and a slightly more interactive user interface, perhaps allowing the user to preset some parameters.

Also, the Processing program on the Mac writes Java by default for making apps, which is what it was used for in this instance,  but you can include other modes such as Coffeescript, Javascript and Python if you so desire. Also under investigation is a version of the software encoded for Javascript that creates the album cover via a web page and downloads it to the user’s computer.

Generating art using software is a growing trend in modern art. Have you had any experience in Processing or generative art? Let us know your thoughts in the comments below.

Phil South
Phil South

Phil South has been writing about tech subjects for over 30 years. Starting out with Your Sinclair magazine in the 80s, and then MacUser and Computer Shopper. He's designed user interfaces for groundbreaking music software, been the technical editor on film making and visual effects books for Elsevier, and helped create the MTE YouTube Channel. He lives and works in South Wales, UK.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox