Skip to content

Instantly share code, notes, and snippets.

@p01

p01/index.html

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.
Download ZIP

Revisions

  1. p01 renamed this gist Jan 27, 2016. 1 changed file with 0 additions and 0 deletions.
    0 live-framsia.htm → index.html
    View file
    File renamed without changes.
  2. p01 revised this gist Jan 27, 2016. 1 changed file with 10 additions and 13 deletions.
    23 changes: 10 additions & 13 deletions live-framsia.htm
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #444, #200);
    background: radial-gradient(circle, #345, #201);
    }

    </style><audio id="a"></audio><canvas id="b"></canvas><script>
    @@ -47,38 +47,33 @@
    z: (Math.random()-.5)*256 * 2,
    u: i / 48 % 1,
    v: i / 48 / 48,
    col: 'rgb('+
    [(Math.random()*256|0),
    (Math.random()*256|0),
    (Math.random()*256|0)] +')'
    col: i & 1 ? '#eee' : '#ddd'
    })
    };

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

    H=b.height=512;
    W=b.width=0|innerWidth/innerHeight*H;
    c.translate(W/2,H/2);
    c.fillStyle='#fff'
    c.fillText([W,H,time],0,0);

    angle = time / 1000;
    angle = time;

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

    ps.forEach(p => {
    if (p.v < 1) {
    an = p.u*Math.PI*2;

    frac = time/1000*2%1;
    frac = time*2%1;
    frac = Math.pow(1-frac, 2);

    d = 64 + frac * 32 * Math.cos(an*4)*Math.cos(p.v*6);
    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 = 128*(p.v-.5)*3;
    p.y = 384*(p.v-.5);
    p.col = 'rgb('+
    [255-d*4|0,
    255-d*4|0,
    @@ -99,8 +94,10 @@
    ps.sort((a, b) => a.rz - b.rz)

    ps.forEach(p => {
    c.fillStyle = p.col;

    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);
    })

  3. p01 created this gist Jan 27, 2016.
    110 changes: 110 additions & 0 deletions live-framsia.htm
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    <style>

    #b {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #444, #200);
    }

    </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: 'rgb('+
    [(Math.random()*256|0),
    (Math.random()*256|0),
    (Math.random()*256|0)] +')'
    })
    };

    render = function() {
    requestAnimationFrame(render);
    time = performance.now();

    H=b.height=512;
    W=b.width=0|innerWidth/innerHeight*H;
    c.translate(W/2,H/2);
    c.fillStyle='#fff'
    c.fillText([W,H,time],0,0);

    angle = time / 1000;

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

    ps.forEach(p => {
    if (p.v < 1) {
    an = p.u*Math.PI*2;

    frac = time/1000*2%1;
    frac = Math.pow(1-frac, 2);

    d = 64 + frac * 32 * Math.cos(an*4)*Math.cos(p.v*6);
    p.x = d*Math.cos(an);
    p.z = d*Math.sin(an);
    p.y = 128*(p.v-.5)*3;
    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.fillStyle = p.col;
    s = p.p*8;
    c.fillRect(p.sx,p.sy,s,s);
    })

    }
    render();

    </script>