A lighting talk about labyrinth generation and theremin instrument using the Web Audio API in 219 bytes presented at Web Rebels 2016.
Web Rebels is dear to my heart as it was the home of my first conference talk in 2012. They always have a great lineup and impressive organisation. I had the chance to attend again this year and present a lighting talks about labyrinth generation and the Theremin in a handful of bytes.
You can skip through the slides and demos
We already talked about the famous
10 PRINT CHR$(205.5+RND(1)); : GOTO 10 in thread.js where we reached 64 bytes with the following program and the full width diagonal UNICODE charaters and the ZERO WIDTH SPACE:
<p onmousemove=b.innerHTML+='╱╲'[event.screenX%3] id=b>Hi
However it is possible to reach 56 bytes and catch the mousemove event on the whole page:
You can try it LIVE.
Theremin and Web Audio API
The theremin is the Hello World of audio synthesis. This intstrument was invented around 1920 by Leon Theremin and uses two antenas to detect the distance of the hands of the player to adjust the picth and volume of a simple oscillator.
Using the Web Audio API, makes this trivial. We need an
GainNode and an
OscillatorNode, connect them all together and map the volume and frequency to the mousemove event. Combined with the labyrinth generation above, we get the following 219bytes
<html onmousemove='if(h)with(new AudioContext)o=createOscillator(),o.connect(g=createGain()),g.connect(destination),h=o.start();with(event)innerHTML+="╱╲"[g.gain.value=pageY/999,(o.frequency.value=pageX)%3]'id=h>
You can try if LIVE.
Starting this little project I was confident to reach 256 bytes but didn't expect to go as low as 219 bytes. By experience I am sure other code golfers could save a couple of bytes.
Other recent projects
There are many experiments and projects like 10 PRINT THEREMIN AT WEB REBELS to discover other here.
- WE DON'T MAKE MISTAKES AT DEVONE 2019 Giving the closing keynote DEV ONE 2019, held on April 11 in Linz, Austria was absolutely fantastic. The conference was very well organized with one track, 11 talks about "scale" and 600 wonderful delegates. I learnt so much that day, got confirmation for some good practices but also learnt about many opportunities to improve our work. Also it was a pleasure to see familiar faces among the organizers and attendees from Script 17, in Linz
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- WOLFENSTEINY An homage to Wolfenstein 3D in 251 bytes of HTML5
- MINI DISTRICT How to build a 3D City in 256 bytes with Canvas 2D
Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.