Hello JSConf

Mathieu Henri

Tiny Audio-Visual Demos

  1. What & where
  2. General tips
  3. Wild tricks
  4. Coding time

Tiny Audio-Visual Demos

1. What & where

P01

Code golfing & Creative coding

DEMOSCENE

Tiny Audio-Visual Demos

2. General tips

FOCUS

NO LIBRARY NO FRAMEWORK

ONE PRIMITIVE

ONE FORMULA

FOCUS

Tiny Audio-Visual Demos

3. Wild tricks

Dirty trigonometry

IEEE 754

.2 + .1
// 0.30000000000000004
for (i = 0; i < 10; i += .1) {
}
// i = 10.09999999999998
for (i = 0; i < 10; i += 1/8) {    
}
// i = 10

MUSIC

Web Audio Api or Audio element

Regular 1k and 4k demos pre-generate the music.

h=d='data:audio/wav;base64,'+
    'UklGRiQAAABXQVZFZm10IBAAAAABAAEAwF0AAMBdAAABAAgAZGF0YQAA';
for(t=0;t++<8e5;)
  d+=String.fromCharCode(/* ByteBeat */);
Z=new Audio(h+btoa(d));
Z.play();
var inst = Math.random() - .5;
inst *= Math.pow(1 - (T % 1), 8);
d += String.fromCharCode(inst * volume + 127);

COLORS

ctx.fillStyle = 'hsl(31,33%, 73%)'

ctx.fillStyle = 'rgb('+ [
    127 + 127 * Math.cos(hue),
    127 + 127 * Math.cos(hue + 2),
    127 + 127 * Math.cos(hue + 4)
] +')';

SHADOWBLUR

PNG Bootstraping

Save your code as a PNG image, rename foo.png to foo.html, bootstrap it by adding a snippet of HTML+JS at the end of the file that reads the pixels of the PNG image and turn them back into code

<!-- PNG IMAGE --><canvas id=c>
<img src=# onload=for(a=c.getContext('2d'),i=e='',
  S=String.fromCharCode;
  a.drawImage(this,i--,0),t=a.getImageData(0,0,1,1).data[0];)
  e+=S(t);
  (1,eval)(e)>

Tiny Audio-Visual Demos

4. Coding time

That's all folks

Thank you JSConf

@p01 @ferristweetsnow