A lighting talk about labyrinth generation and theremin instrument using the Web Audio API in 219 bytes presented at Web Rebels 2016.
Web Rebels
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
The labyrinth
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>HiHowever it is possible to reach 56 bytes and catch the mousemove event on the whole page:
<html onmousemove=innerHTML+="╱╲"[event.pageX%3]>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 AudioContext, a 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.
Closing words
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 experiments
There are many experiments and projects like 10 PRINT THEREMIN AT WEB REBELS to discover other here.
FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
BREATHING EARTH Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks. on June 26th, 2017
ASTRA ASTRA is a JavaScript odyssey in 1002 bytes for Assembly 2016 on August 6th, 2016
DEMO REEL AND TINY JAVASCRIPT AT FRONT TRENDS I had the pleasure to speak about creating bite sized audio-visual demos, and LIVE code one at Front Trends 2016 in Warsaw, Poland. on May 19th, 2016
MINI DISTRICT How to build a 3D City in 256 bytes with Canvas 2D on August 17th, 2013
MICRO NOVA Quite possibly the smallest WebGL demo effect. Micro Nova clocks under 512bytes and shows supernova-like blasting colors. on May 30th, 2012
OOMA The winning bootsector of Outline 2005, featuring two images zooming with experimental music in a valid 480bytes Atari bootsector. on March 30th, 2005
Let's talk
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.