Introduction to Processing

(And a few other things)


  • Basics needed for a demo

  • Processing

  • Rocket & Moonlander

  • General tips

Demo example

Demo basics

  • Graphics

  • Music

  • Graphics usually in sync with music

  • Last few minutes

    These vary depending competition rules and categories

Demo example

Demoscene history

  • Started in copyparties back in the days

  • People started to make 'intros' to copies left over space

  • Eventually the idea of making real-time computer grapchics separated as it’s own art

  • Size-limited compos, e.g. 4k intro + full no-size limits categories

Demo example


  • "Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts."

  • Free & Open source

  • Works on major PC platforms

Processing Basics

  • Integrated development environment for writing, compiling and running sketches

  • Has it’s own simple programming language

    • Internally transformed and run as Java code

  • Good tutorials, examples and reference (

Sketch Structure

intro to processing sketch structure

Global Variables

  • Imports go before these (e.g. import moonlander.library.*;)

  • Useful for constants

  • Used when a variable needed in both setup() and draw()

Settings Function

  • Can be mostly ignored

  • Used if using variables for the size() function parameters

// These control how big the opened window is.
int CANVAS_WIDTH = 480;
int CANVAS_HEIGHT = 360;

void settings(){

setup function

  • Called once per sketch before draw

  • Used to initialize systems

void setup(){
	size(480, 360, P2D); // Size and render mode
	// OR
	fullScreen(P2D); // (use this for compo entry)
	frameRate(60); // Target framerate
	... //other initializations
	// Moonlander init, to a global variable
	moonlander = Moonlander.initWithSoundtrack(...);

draw function

  • Draw one frame to the screen

  • Normally the first line clear the screen

    • (But can be left out for interesting effects)

  • Moonlander update() method must be called

void draw(){
	moonlander.update(); //needs to be called every frame



rocket example


  • Live editing numeric values for variables at time instants

  • Can move forward and backwards in time while sketch is running

  • Define interpolations between defined values

  • Read values to Processing via Moonlander

  • Configuration can be saved as a file to be run without Rocket

Installing moonlander

  • First install Minim dependency

    • Sketch → Import Library → Add Library

  • Download Moonlander and unzip to your Sketchbook location

    • File → Preferences "Sketchbook location"

    • (libraries subfolder, next to minim folder)


  • Use music that you have created yourself or have a license/permission to use

  • Making it yourself will give you more control, but the learning workload might be outside the scope of the event

  • In both cases, you’ll need the tempo BPM number (Beats Per Minute) for Moonlander

Music cont’d

In practice choose something that is Creative Commons (CC) and mention in the credits, however do not use CC-ND (Creative Commons "No Derivates")


Tips - extra

  • Code everything as function of time

  • Code everything resolution independent

  • Only needs to look good on the compo machine

  • Effects can be short and can be repeated

  • Use a "scene" variable in rocket for pacing

Tips - extra2

  • Libraries

    • PeasyCam

    • QueasyCam