Graffathon 2023
The Graffathon demo party was organized this weekend in Otaniemi, Finland. I had the chance to attend, and I even managed to submit a demo for the competition. Since I had attended the event when it was last held in 2019, I decided to submit my demo to the advanced compo. Regarding graphics, my demo was quite modest, even compared to many beginner compo submissions. However, I’m pleased with the audio part of my demo, even though there’s always room for improvement. I have a lot of experience in the fields of audio and music. However, this was my first time creating music with code.
During the Teekkarispeksi musical production this Spring, we discussed old video games and how one can create drums solely from noise. That idea left an impression that lingered until this weekend. It was easy to prove that sentence to be true!
See the demo
If you didn’t see the demo presented at the event, you can still view a recording or run it in your browser.
Watch a capture
Link to the official recording!
Old information about the poor capture
While waiting for the official video captured on the compo machine, here's a link to the poor video captured on my laptop: Noice Drumz (YouTube). The execution lags even worse than usual due to the capture setup, but you might get the idea. I'll update the link once a better capture becomes available.
Update: please see the link above!Run it yourself
You can execute the demo on your web browser here. Please note that it does not work as intended on every platform, browser, and screen but is “optimized” for the demo party’s compo machine. A computer with Firefox is my recommendation for running this demo.
The source code is available on
GitHub.
The README.md has instructions for setting up the demo locally.
Implementation
The tech stack
The demo is executed on a web browser.
Other helpful tools
- Hydrogen for getting the audio timings right
- A small musical keyboard for quickly crafting the simple bassline melody
- Neovim, my obvious choice for writing code
Assets
In addition to the mentioned two libraries, the demo uses the Press Start 2P font. Other than that, it’s all generated on the fly. There are no images, audio samples, or tracks included.
Competition
I submitted the demo to the advanced compo and expected it to rank poorly because it only had basic visuals. After all, the event is called Graffathon, implying the importance of graphics. However, the demo had some neat features, and it was so cool to have a self-created soundtrack for the demo, although simple. I may have nailed the aesthetics and atmosphere of the demo, partly by accident. It was a complete surprise that I won the third place! I’m glad that the participants found the demo interesting. I wasn’t expecting that 😊
Closing thoughts
Demo programming is fun. One can hack together the whole demo as long as it
works on the compo machine. I even found a proper use case for eval(): saving
a piece of code to a variable, evaling it, and then using the string value
later for rendering the code.
The code is not pretty, and at least my demo code tends to follow often the WETWET principle, and that’s fine! I’ve worked on front-end projects and courses with React, Flutter, Vue, and Svelte. With such tools, state management sometimes feels complex. Coming from that back to writing a demo felt unreal and refreshing: I can just change a global variable anywhere, and the changes are reflected as soon as a new frame is drawn (practically instantly). This render method also leads to a view being redrawn dozens of times a second, even when everything has stayed the same, which isn’t ideal for many use cases, e.g., front-end development.
At Graffathon 2019, our team got third place in the beginner compo. Thus, I can proudly claim the title of a double bronze medalist! I want to thank the organizers for their hard work in making this fantastic event happen. Both compos had great entries, and I enjoyed watching them all. Thank you to everyone who participated. It was an absolute pleasure!
Did you like this post?
Join my blog's Telegram channel to get updates on new posts. I only publish one message to notify you about each new post. That's it. Nice and clean, distraction-free communication.
See my blog's front page to read my other posts.