Skip to content

Instantly share code, notes, and snippets.

@p01
Last active January 31, 2016 23:24
Show Gist options
  • Save p01/3d763e552d96bfaa5893 to your computer and use it in GitHub Desktop.
Save p01/3d763e552d96bfaa5893 to your computer and use it in GitHub Desktop.
LIVE code at FRAMSIA - 20160127
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment