LIVE code at FRAMSIA - 20160127

index.html

<style>
  
#b {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #345, #201);
}

</style><audio id="a"></audio><canvas id="b"></canvas><script>

str='';
notesFreq = [155,195,261,155,233,155,195,207,195,207,195,207,195,207,195,261,155,233,155,233,261,155,233,155,233,155,233,261,155,195,261,195,207,195,261,155,233,155,233,155,195,207,233,155,233,155,195,207,195,207,233,261,155,233,261,233,261,155,195,207,195,207,195,207,195,261,233,155,195,207,233,261,233,155,233,261,155,195,207,195,261,155,233,261,155,233,261,195,261,233,261,155,233,155,195,207,233,261,233,155,195,261,233,155,195,261,195,261,155,233,261,195,207,233,261,195,207,195,261,233,155,195,261,155,195,207,195,261];
notesIndex = 0;

for(time=0;time<60;time+=1/16384) {
  frac= (time&4?time*6:time*4)%1;
  notesIndex += frac==0;
  sample = (time * notesFreq[notesIndex%notesFreq.length] % 1) * (1 - frac) * 16;

  frac = time*2%1;
  sample += (Math.random()) * Math.pow(1-frac, 8) * 16;


  str += String.fromCharCode(sample + 127);
}



a.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAA'
        + 'EAAAABA' // 16khz
        + 'AAABAAgAZGF0YQAAAAAA' + btoa(str);
a.play();




c=b.getContext('2d');
ps = [];
COUNT = 2560;
for(i=0;i<COUNT; i++) {
  ps.push({
    x: (Math.random()-.5)*256 * 2,
    y: (Math.random()-.5)*256 * 2,
    z: (Math.random()-.5)*256 * 2,
    u: i / 48 % 1,
    v: i / 48 / 48,
    col: i & 1 ? '#eee' : '#ddd'
    })
};

render = function() {
  requestAnimationFrame(render);
  time = a.currentTime;

  H=b.height=512;
  W=b.width=0|innerWidth/innerHeight*H;
  c.translate(W/2,H/2);

  angle = time;

  c.rotate((angle&13)/32);

  ps.forEach(p => {
    if (p.v < 1) {
      an = p.u*Math.PI*2;
  
  frac = time*2%1;
  frac = Math.pow(1-frac, 2);

      d = 64 + frac * 32 * Math.cos(an*4)*Math.cos(p.v*6+time*4);
      p.x = d*Math.cos(an);
      p.z = d*Math.sin(an);
      p.y = 384*(p.v-.5);
    p.col =  'rgb('+
        [255-d*4|0,
         255-d*4|0,
         255-d*4|0] +')'
    }

    p.rx = Math.cos(angle) * p.x - Math.sin(angle) * p.z;
    p.rz = Math.sin(angle) * p.x + Math.cos(angle) * p.z;
    p.ry = p.y;


    p.p = (384+p.rz)/256;
    p.sx = p.p*p.rx;
    p.sy = p.p*p.ry;

  });

  ps.sort((a, b) => a.rz - b.rz)
  
  ps.forEach(p => {
    
    c.shadowColor = c.fillStyle = p.col;
    s = p.p*8;
    c.shadowBlur = p.v < 1 ? 0 : s;
    c.fillRect(p.sx,p.sy,s,s);
  })

}
render();

</script>