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 (a programming language and code editor)
• Rocket (a timeline editor for arranging the demo)
• Moonlander and minim (two Processing libraries to connect Processing and Rocket)

Processing

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);
  frameRate(60);
  smooth();
}

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

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

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:

• Windows: Download and extract the zip file from here.
• Mac: Download and extract the zip file from here. If it refuses to start because it's from an "unidentified developer", see the instructions here.
• Linux: Try this binary, or you can try to compile the editor yourself with qmake using the instructions from here. If you run Arch, you can install rocket-git from AUR.

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:

• On Windows, the library folder is by default C:\Users\[username]\Documents\Processing\libraries
• On Mac: /Users/[username]/Documents/Processing/libraries
• On Linux: ~/sketchbook/libraries

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:
  //noCursor();
  //fullScreen();

  frameRate(60);

  // 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() {
  moonlander.update();

  // 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
  rotateX(rotation);
  rotateY(rotation/2);
  rotateZ(rotation/4);

  // Draw a 3D box
  box(100);
}
      

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

• The Processing documentation has a handy list of available functions.
• You can also check the Processing examples and tutorials for some inspiration and guidance.
• Large language models like ChatGPT can be very helpful with technical questions at all skill levels.

Royalty-free music

• Incompetech has lots of Creative Commons (CC) licensed music.
• The Creative Commons site has a list of free music sites.
• You can also try searching e.g. Soundcloud or Bandcamp for CC-licensed music.
• For very simple audio editing (cutting, fading in/out, etc.), Audacity is a great free tool.
• To properly synchronize your demo with music, you need to know the tempo (BPM, beats per minute). Sometimes the BPM of a song is shown on the download page, but if it's not, you can google "tap tempo" to find a website where you can click in time with the music to find out the BPM. For us, the first result was this site, which seemed to work okay.
• If you want to jump in at the deep end, Ardour and LMMS are free complete music making suites. Commercial programs, such as Ableton, FL Studio and Reaper also have free trial versions available. Remember however that the weekend is short, so you should consider whether it's worth spending several hours learning to use a complicated audio production program.

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:

• cables is a node-based visual programming system for making audiovisual programs
• p5.js is a web-based Javascript version of Processing

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.