Choosing the demomaking tools is an endless topic of discussion. There’s no right way to do it, and especially at Graffathon pretty much anything goes. But if you’re a beginner, haven’t done creative coding previously or are even a little unsure about what to go with, we’ve got some recommendations!

p5.js

1. Download Visual Studio Code (or your favorite code editor)

https://code.visualstudio.com/

1. Download p5.js demo template
   • https://github.com/DOTAalto/p5.js-demo-template
   • Download zip from GitHub and open the folder in a code editor
2. You should only be concerned with two files: index.html and demo.js.
   • Inside demo.js there is the function draw(), This function is called every frame. This is where you can work and edit the scenes. Start by changing a few numbers and see what happens :)
   • Open index.html in your browser to watch your demo

!! If working from a code editor feels too complicated to start doing your demo with, we recommend starting with the p5.js online editor and focusing on only learning p5.js https://editor.p5js.org/. We can help you to export/compile your visuals.

Useful p5.js links:

• Tutorials and docs https://p5js.org/tutorials/, https://p5js.org/reference/
• Inspiration https://openprocessing.org/

Processing

JavaScript not your thing? You can write the demo with the Processing Development Environment using a Java or Python based language with a similar API to p5.js.

1. Download and install PDE from https://processing.org/download
2. Head over to https://processing.org/tutorials/gettingstarted. Also take a look at the reference and other tutorials.
3. Create a sketch and add some visuals.
4. Install the official sound library to play music: go to Sketch > Import library > Manage libraries and search “Sound”. The example at https://processing.org/reference/libraries/sound/SoundFile_play_.html shows how to play music.
   1. The audio file needs to be in ./data directory relative to the sketch file. Find it by selecting Sketch > Show Sketch Folder.
5. Optionally do beat-matching similar to this: https://github.com/DOTAalto/p5.js-demo-template/blob/e229b4c1bb9fa330e4b8bd0a025309595e139d71/demo.js#L4
6. When you’re done, export your demo from File > Export Application

FAQ #1

I don’t want to use any of the above, can I use Unity / Unreal / something else ?