TINY AUDIO-VISUAL DEMOS AT JSCONF ASIA

667 words ~ 3-6 mins

I had the honor to open the second day of JSConf Asia 2015 in Singapore with a talk and LIVE programming session about Tiny Audio-Visual Demos

Tiny Audio-Visual Demos

The first 12 minutes of the talk cover Tiny Audio-Visual Demos and how to create them, then goes a 35 minutes LIVE coding session doing just that.

LIVE coding & slides

Here are the slides of my talk about Tiny Audio-Visual Demos, and the LIVE CODING I did on stage.

Of course I prepared a BACKUP plan in case something went wrong. Luckily things went rather well. Phew!

Tiny what ?

By Tiny Audio-Visual Demos, I mean small animations rendered in realtime by a very short piece of code, with music. I come from the Demoscene, the sub culture born in Berlin around 1984, where the main goal is to push a platform to produce the coolest audio visual animation with code.

General tips

To produce Tiny Audio-Visual Demos, the key is to focus on what you are trying to achieve and to do just that. This is not the place to require 20 modules and their dependencies.

Using a single drawing primitive is a good idea as it puts one more constraint, force you to get creative with it and make for tighter code.

As much as possible you should try to drive the visuals and audio using the same formula to reduce the code foot print and get perfect synchronization between audio and visuals.

Wild Tricks

Know and use the standards to your advantage. Using numbers that are only combinations of powers of two and their fractions have some nice advantages that can precious bytes.

Approximate is the new perfect. Things don't have to be 100% perfect. This is a small animation that will live on for one minute or two.

You should also measure your code to see where it hits a bottle and find an alternative. For instance browsers are incredibly slow to parse HSL colors, so you might prefer to precalculate them or decompose them as RGB colors using a sinus wave dephased by one third of a circle for each component.

To generate and play music, nothing beats the ByteBeat approach seen in my 140 bytes Music Soft Syntheziser.

As for the compression, the state of the art remain PNG bootstraping, which consist in making a polyglot file that is both a PNG image and an HTML page. The PNG image is basically your JS code rendered as shades of gray. The HTML page, appended at the end of the PNG file, loads the image, reads the pixels back, create a JS string and evaluate it.

Being a PNG image, you can deep dive into the DEFLATE stream using tools like gzThermal to optimize your code further.

Using these tricks, I saved over 150 bytes on BLCK4777, the winning 1kb intro at Assembly 2015, in the week before the deadline.

JSConf Asia & Singapore

The little family and I were greeted by an amazing welcome sunset.

Singapore from the Flyer

Then came JSConf Asia on Thursday 19th and Friday 20th of November, with its impressive line up and talks. I highly recommend you visit JSConf Asia & Singapore.

Singapore Creative Coding Meetup

On the Sunday, I joined Simon Swain at the Singapore Creative Coding Meetup. Simon talked about his Cold War Simulation and gave a really cool peek behind the scene and how different filters and effect works. Then I did a repeat of my talk from JSConf Asia, followed by an impromptu LIVE coding session recreating parts of MATRAKA.

Acknowledgements

A huge thank you to:

Other recent projects

There are many experiments and projects like TINY AUDIO-VISUAL DEMOS AT JSCONF ASIA to discover other here.

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.