Graffathon 2023

Getting started with demo-making

This is a step-by-step tutorial on how to make your very first demo. We will need to set up the following things:


Processing is a free, open-source programming language aimed at visual artists. To get started with Processing, head to the downloads page, pick the version for your operating system and extract the zip file to the folder you want. Launch Processing, and copy the following code into the editor:

void setup() {
  size(640, 480, P3D);

void draw() {
  translate(width/2, height/2, -100);
  rotateY(millis() * 0.001);
  rotateX(millis() * 0.001);

and click the Run (Play) button in the upper left corner. Don't worry if you don't understand this code yet, but now you should see a black screen with a spinning cube in the middle.


Rocket is a tool for synchronizing visuals and music in demos. It includes a timeline editor and a programming interface for using the timeline in your program. Download the Rocket editor from the following links:

When you launch Rocket, you should see a simple window:

If you can't get Rocket to work, don't hesitate to ask for help!

Moonlander and minim

The final step is to install minim and Moonlander to connect your Processing sketch to Rocket.

Minim can be directly installed from Processing. Open a Processing sketch, and navigate to the menu Sketch -> Import Library -> Manage Libraries, search for minim, select it from the list and click install.

To install Moonlander, download the latest version from here, and extract the folder Moonlander to your processing library folder:

You can also find the sketch folder from the Processing editor from the menu File -> Preferences -> Sketchbook folder.

After you have installed the libraries, restart Processing to make them available.

Putting it all together

Finally, open both Processing and Rocket, and copy the following example code to your sketch:

import moonlander.library.*;
import ddf.minim.*;

Moonlander moonlander;

void setup() {
  // Uncomment the following lines for the final submission:


  // This sets the screen size and 2D- or 3D mode
  size(640, 480, P3D);

  // Parameters:
  // - PApplet
  // - soundtrack filename (relative to sketch's folder)
  // - beats per minute in the song
  // - how many rows in Rocket correspond to one beat (4 or 8 is recommended)
  moonlander = Moonlander.initWithSoundtrack(this, "data/example-music-140bpm.mp3", 140, 4);

  // Last thing in setup; start Moonlander. This either
  // connects to Rocket (development mode) or loads data
  // from 'syncdata.rocket' (player mode).
  // Also, in player mode the music playback starts immediately.
  moonlander.start("localhost", 1338, "data/syncdata.rocket");

void draw() {

  // Drawing goes here

  // Get values from Rocket using
  // float my_value = (float) moonlander.getValue("track_name");
  // or
  // int my_value = moonlander.getIntValue("track_name");

  // Example:
  background(0); // Clear previous frame
  translate(width/2, height/2, -100); // Move object to middle of screen and 100 units out
  float rotation = (float) moonlander.getValue("box-rotation"); // Get rotation value from rocket
  rotation = radians(rotation);

  // Rotate the box below with the value from Rocket.
  // Note that rotateX/Y/Z work in radians, that's why we use the radians() function above

  // Draw a 3D box

Download the example song from here, create a folder called data next to your sketch file (Sketch -> Show Sketch Folder), and put the song there. The next steps will not work without the song.

Open the Rocket editor if it's not running already. Then, click Run in Processing to start your sketch. The Rocket editor should now say "Connected" in the lower left corner, and it should have a column box-rotation. If this is not working, ping us and we'll help you!

Type a number in a cell and press enter to confirm. The cube should now be tilted depending on the number you entered (note: the number is in degrees, so you can try values like 30 or 40).

Use the arrow keys (or scroll) to move to another row (you can leave gaps) and enter another number. Go back to the beginning, and press Space to play back the animation. To make the cube spin smoothly, press I to change the interpolation mode between values. To delete numbers, you have to use the Delete key (fn+Backspace on Mac) instead of Backspace.

Now you are all set! Whenever you add a line like float x = (float) moonlander.getValue("some_name"); in your sketch (note that you have to re-run it!), the column some_name will appear in the Rocket editor. A list of keyboard shortcuts for Rocket is available on GitHub.

Some resources

Royalty-free music

When using music made by someone else, remember to always check the license. In particular, the CC-NoDerivatives license explicitly forbids using CC-ND licensed music as part of a demo.

Alternative demotools

If you're feeling adventurous, you can also use some other system than Processing for making your demo. For example:

Note, however that the organizers of Graffathon are less familiar with these tools, so we might not be able to offer so much help if you encounter a problem. It is also your responsibility to ensure that it's possible run your demo on the compo machine.

Network provided by Polygame ry

Graffathon is organized by the active members of the board of DOT. Contact us at