Skip to content

Instantly share code, notes, and snippets.

@p01

p01/index.html

Last active August 29, 2015 14:13
Download ZIP

Revisions

  1. p01 revised this gist Jan 29, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,9 @@
    <!doctype html>
    <html>
    <head>
    <title>...</title>
    <title>JS1k 2015 Invitation by Mathieu 'p01' Henri</title>
    <meta charset="utf-8" />
    <meta name="author" content="Mathieu 'p01' Henri, @p01"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <style>
    html, body { margin: 0; padding: 0; border: 0; }
    @@ -47,5 +48,6 @@
    var c = a.getContext('2d');
    </script>
    <script src="test.js"></script>
    <script>onclick=function(){location.href='http://www.p01.org/releases/JS1K_2015_invit/';}</script>
    </body>
    </html>
  2. p01 revised this gist Jan 28, 2015. 2 changed files with 12 additions and 12 deletions.
    1 change: 0 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    <!doctype html>
    <html>
    <head>
    23 changes: 12 additions & 11 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // Compresses down to ~1010 bytes with Uglify + RegPack
    // Compresses down to ~1020 bytes with Uglify + RegPack

    (u=function(){
    requestAnimationFrame(u);
    @@ -16,7 +16,7 @@
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + distance of the "particle"
    c[H&1023]=x&&c[H&1023]||8+Math.random()*h/2;

    // Y coordinate & parallax
    Y=Math.sin(H/511-Math.sin(H/511*3)*3)*48+s*c[H&1023]+h/2;
    X=1023-x+(511-x)*Y/h;
    @@ -36,7 +36,7 @@
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);

    // little bits of grass
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    @@ -64,20 +64,22 @@
    c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    }
    } else {
    // TRACKS
    // tracks
    c.fillStyle='hsl('+q+',55%,2%)';
    c.fillRect(X,Y,1,5);
    c.fillRect(X,Y,5,1);Y+=2;
    c.fillRect(X,Y,5,1);

    // TRAIN
    if(x==w){
    // wagons
    X-=10;
    c.fillRect(X,Y,20,-10);
    // LOCOMOTIVE
    if(x==510){
    // locomotive
    if(x<511){
    c.fillRect(X,Y,10,-15);X+=15;
    c.fillRect(X,Y,2,-15);
    // STEAM
    // steam
    c.fillStyle='hsl('+q+',55%,200%)';
    c.globalAlpha=.3;
    q=H;
    @@ -94,12 +96,10 @@

    // Cut out JS1k typography
    c.globalCompositeOperation='destination-in';
    H=H/511*48-128;
    H=Math.sin(H/511/2+10)*31+31;
    H=H<3?9:H*H;
    // if(H<3){H=3;}
    // H*=H;
    c.translate(511,h/2);
    c.rotate(H/511);
    c.rotate(H/511+.1);
    c.scale(H,H);
    X=Y=-3;
    c.beginPath();
    @@ -125,3 +125,4 @@
    c.arc(X-1,Y-2,1,Math.PI/2*3/2,Math.PI/2*3,0);
    c.stroke();
    })()

  3. p01 revised this gist Jan 26, 2015. 1 changed file with 31 additions and 20 deletions.
    51 changes: 31 additions & 20 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // Compresses down to ~1020 bytes with Uglify + RegPack
    // Compresses down to ~1010 bytes with Uglify + RegPack

    (u=function(){
    requestAnimationFrame(u);
    @@ -7,42 +7,50 @@
    H=performance.now()/15|1;
    c.textAlign='center';
    c.font='2em cursive';

    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,x,h);
    c.fillRect(0,0,1023,h);
    w=555;
    for(;x--;){
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + distance of the "particle"
    c[H&1023]=x&&c[H&1023]||8+Math.random()*h/2;


    // Y coordinate & parallax
    Y=Math.sin(H/511-Math.sin(H/511*3)*3)*48+s*c[H&1023]+h/2;
    X=1023-x+(511-x)*Y/h;
    c.globalAlpha=1;
    q=170;
    // "particles"
    if (s) {
    // "particles"
    // Adjust the color based on the Y coordinate
    q+=Y&31;
    c.fillStyle='hsl('+q+',55%,200%)';
    if (H%511) {
    // grass
    // GRASS "particle"
    // Adjust the color based on the Y coordinate, again
    if (Y&1)
    c.fillStyle='hsl('+q+',55%,20%)';
    // vertical strands of grass
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);


    // little bits of grass
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);

    // TREE "particle"
    // wih varying intensity of the forest
    if (!(H%(9+Math.sin(H/511/3)*3|1))) {
    // tree
    // Get the height of the tree
    z=Y&15;
    z+=6;
    Y-=z*6;
    c.globalAlpha=.3;
    // Draw multiple triangles to make up a pine tree
    for (;z--;) {
    c.beginPath();
    c.lineTo(X,Y);
    @@ -52,23 +60,24 @@
    }
    }
    } else {
    // text
    // TEXT "particle"
    c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    //c.fillText('Cross browser31kb demos3February 20153JS1k 2015'.split(3)[H/511&3],X,Y);
    }
    } else {
    // tracks
    // TRACKS
    c.fillStyle='hsl('+q+',55%,2%)';
    c.fillRect(X,Y,1,5);
    c.fillRect(X,Y,5,1);Y+=2;
    c.fillRect(X,Y,5,1);

    // train
    // TRAIN
    if(x==w){
    c.fillRect(X,Y,20,-10);
    // LOCOMOTIVE
    if(x==510){
    c.fillRect(X,Y,10,-15);X+=15;
    c.fillRect(X,Y,2,-15);
    // STEAM
    c.fillStyle='hsl('+q+',55%,200%)';
    c.globalAlpha=.3;
    q=H;
    @@ -82,20 +91,22 @@
    }
    }
    }


    // Cut out JS1k typography
    c.globalCompositeOperation='destination-in';
    H=H/511*48-128;
    if(H<3){H=3;}
    H*=H;
    H=H<3?9:H*H;
    // if(H<3){H=3;}
    // H*=H;
    c.translate(511,h/2);
    c.rotate(H/511);
    c.scale(H,H);
    X=Y=-3;
    c.beginPath();
    // j
    // J
    c.moveTo(X,Y);
    c.arc(X-2,Y+3,2,0,Math.PI/2,0);
    // s
    // S
    X+=2;
    Y+=4;
    c.moveTo(X,Y);
    @@ -107,10 +118,10 @@
    c.arc(X-2,Y-5,2,0,Math.PI/2,0);
    // k
    X+=2;
    c.moveTo(X,Y-6);
    c.lineTo(X,Y);
    c.moveTo(X,Y);
    c.lineTo(X,Y-6);
    X+=3;
    c.moveTo(X,Y);
    c.arc(X-1,Y-2,1,Math.PI/2*3/2,Math.PI/2*3,0);
    c.stroke();
    })()
    })()
  4. p01 revised this gist Jan 25, 2015. 1 changed file with 4 additions and 10 deletions.
    14 changes: 4 additions & 10 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -88,11 +88,10 @@
    if(H<3){H=3;}
    H*=H;
    c.translate(511,h/2);
    c.rotate(H/511);
    c.scale(H,H);
    X=Y=-3;
    //q=Math.PI/2;
    c.beginPath();
    c.rotate(H/511);
    // j
    c.moveTo(X,Y);
    c.arc(X-2,Y+3,2,0,Math.PI/2,0);
    @@ -110,13 +109,8 @@
    X+=2;
    c.moveTo(X,Y-6);
    c.lineTo(X,Y);
    c.moveTo(X+3,Y);
    c.arc(X+2,Y-2,1,Math.PI/2*3/2,Math.PI/2*3,0);
    X+=3;
    c.moveTo(X,Y);
    c.arc(X-1,Y-2,1,Math.PI/2*3/2,Math.PI/2*3,0);
    c.stroke();

    // Hum yeah, regular text won't cut it. It's too browser+platform dependent
    // c.textBaseline='middle';
    // c.font=z*z+'em cursive';
    // c.fillText(' JS1k',511,h/2);

    })()
  5. p01 revised this gist Jan 25, 2015. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    // Compresses down to ~1010 bytes with Uglify + RegPack
    // Compresses down to ~1020 bytes with Uglify + RegPack

    setInterval(function(){
    (u=function(){
    requestAnimationFrame(u);
    a.width=x=1023;
    a.height=h=x*innerHeight/innerWidth|1;
    H=performance.now()/15|1;
    @@ -118,4 +119,4 @@ setInterval(function(){
    // c.font=z*z+'em cursive';
    // c.fillText(' JS1k',511,h/2);

    },15)
    })()
  6. p01 revised this gist Jan 25, 2015. 1 changed file with 1 addition and 117 deletions.
    118 changes: 1 addition & 117 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -118,120 +118,4 @@ setInterval(function(){
    // c.font=z*z+'em cursive';
    // c.fillText(' JS1k',511,h/2);

    },15)

    H=performance.now()/15|1;
    c.font='2em cursive';

    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h);
    w=511+15*3-1;
    n=4;
    for(;x--;){
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + distance of the "particle"
    c[H&1023]=x&&c[H&1023]||8+Math.random()*h/2;

    Y=Math.sin(H/511-Math.sin(H/511*3)*3)*48+s*c[H&1023]+h/2;
    X=1023-x+(511-x)*Y/h;
    c.globalAlpha=1;
    q=170;
    if (s) {
    // "particles"
    q+=Y&31;
    c.fillStyle='hsl('+q+',55%,200%)';
    if (H%511) {
    // grass
    if (Y&1)
    c.fillStyle='hsl('+q+',55%,20%)';
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);

    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);

    if (!(H%(9+Math.sin(H/511/3)*3|1))) {
    // tree
    z=Y&15;
    z+=6;
    Y-=z*6;
    c.globalAlpha=.3;
    for (;z--;) {
    c.beginPath();
    c.lineTo(X,Y);
    c.lineTo(X-z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    c.lineTo(X+z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    c.fill();
    }
    }
    } else {
    // text
    c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    // c.fillText('Cross browser31kb demos3February 20153JS1k 2015'.split(3)[H/511&3],X,Y);
    }
    } else {
    // tracks
    c.fillStyle='hsl('+q+',55%,2%)';
    c.fillRect(X,Y,1,5);
    c.fillRect(X,Y,5,1);Y+=2;
    c.fillRect(X,Y,5,1);

    // train
    if(x==w&&n--){//511+15*3-1 || x==511+15*2-1 || x==511+15-1 || x==511-1) {
    w-=15;
    z=10;
    c.fillRect(X,Y,20,-10);
    if(!n){//(x==511-1) {
    c.fillRect(X,Y,10,-15);
    X+=15;
    c.fillRect(X,Y,2,-15);
    c.fillStyle='hsl('+q+',55%,200%)';
    c.globalAlpha=.3;
    q=H;
    for(;z--;){
    c.fillRect(X+Math.sin(q++)*3,Y-z*6+Math.sin(q++)*3,z,z);
    }
    }
    }
    }
    }

    c.globalCompositeOperation='destination-in';
    z=H/511*48-128
    if(z<3)z=3;
    z*=z;
    c.translate(511,h/2);
    c.scale(z,z);
    X=Y=-3;
    q=Math.PI/2;
    c.beginPath();
    c.rotate(z/511);
    // j
    c.moveTo(X,Y);
    c.arc(X-2,Y+3,2,0,q,0);
    // s
    X+=2;
    c.moveTo(X,Y+4);
    c.arc(X,Y+3,1,q,q*3,1);
    c.arc(X,Y+1,1,q,q*3,0);
    // 1
    X+=3;
    c.moveTo(X,Y+4);
    c.arc(X-2,Y-1,2,0,q,0);
    // k
    X+=2;
    c.moveTo(X,Y-2);
    c.lineTo(X,Y+4);
    c.moveTo(X+3,Y+4);
    c.arc(X+2,Y+2,1,q*3/2,q*3,0);
    c.stroke();

    // Hum yeah, regular text won't cut it. It's too browser+platform dependent
    // c.textBaseline='middle';
    // c.font=z*z+'em cursive';
    // c.fillText(' JS1k',511,h/2);

    },15);
    },15)
  7. p01 revised this gist Jan 25, 2015. 1 changed file with 116 additions and 1 deletion.
    117 changes: 116 additions & 1 deletion test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,124 @@
    // Compresses down to ~1030 bytes with Uglify + RegPack
    // Compresses down to ~1010 bytes with Uglify + RegPack

    setInterval(function(){
    a.width=x=1023;
    a.height=h=x*innerHeight/innerWidth|1;
    H=performance.now()/15|1;
    c.textAlign='center';
    c.font='2em cursive';

    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,x,h);
    w=555;
    for(;x--;){
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + distance of the "particle"
    c[H&1023]=x&&c[H&1023]||8+Math.random()*h/2;

    Y=Math.sin(H/511-Math.sin(H/511*3)*3)*48+s*c[H&1023]+h/2;
    X=1023-x+(511-x)*Y/h;
    c.globalAlpha=1;
    q=170;
    if (s) {
    // "particles"
    q+=Y&31;
    c.fillStyle='hsl('+q+',55%,200%)';
    if (H%511) {
    // grass
    if (Y&1)
    c.fillStyle='hsl('+q+',55%,20%)';
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);

    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);

    if (!(H%(9+Math.sin(H/511/3)*3|1))) {
    // tree
    z=Y&15;
    z+=6;
    Y-=z*6;
    c.globalAlpha=.3;
    for (;z--;) {
    c.beginPath();
    c.lineTo(X,Y);
    c.lineTo(X-2*z+Math.sin(q++)*3,Y+6*z+Math.sin(q++)*3);
    c.lineTo(X+2*z+Math.sin(q++)*3,Y+6*z+Math.sin(q++)*3);
    c.fill();
    }
    }
    } else {
    // text
    c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    //c.fillText('Cross browser31kb demos3February 20153JS1k 2015'.split(3)[H/511&3],X,Y);
    }
    } else {
    // tracks
    c.fillStyle='hsl('+q+',55%,2%)';
    c.fillRect(X,Y,1,5);
    c.fillRect(X,Y,5,1);Y+=2;
    c.fillRect(X,Y,5,1);

    // train
    if(x==w){
    c.fillRect(X,Y,20,-10);
    if(x==510){
    c.fillRect(X,Y,10,-15);X+=15;
    c.fillRect(X,Y,2,-15);
    c.fillStyle='hsl('+q+',55%,200%)';
    c.globalAlpha=.3;
    q=H;
    z=9;
    for(;z--;){
    c.fillRect(X+Math.sin(q++)*3,Y-6*z+Math.sin(q++)*3,z,z);
    }
    } else {
    w-=15;
    }
    }
    }
    }

    c.globalCompositeOperation='destination-in';
    H=H/511*48-128;
    if(H<3){H=3;}
    H*=H;
    c.translate(511,h/2);
    c.scale(H,H);
    X=Y=-3;
    //q=Math.PI/2;
    c.beginPath();
    c.rotate(H/511);
    // j
    c.moveTo(X,Y);
    c.arc(X-2,Y+3,2,0,Math.PI/2,0);
    // s
    X+=2;
    Y+=4;
    c.moveTo(X,Y);
    c.arc(X,Y-1,1,Math.PI/2,Math.PI/2*3,1);
    c.arc(X,Y-3,1,Math.PI/2,Math.PI/2*3,0);
    // 1
    X+=3;
    c.moveTo(X,Y);
    c.arc(X-2,Y-5,2,0,Math.PI/2,0);
    // k
    X+=2;
    c.moveTo(X,Y-6);
    c.lineTo(X,Y);
    c.moveTo(X+3,Y);
    c.arc(X+2,Y-2,1,Math.PI/2*3/2,Math.PI/2*3,0);
    c.stroke();

    // Hum yeah, regular text won't cut it. It's too browser+platform dependent
    // c.textBaseline='middle';
    // c.font=z*z+'em cursive';
    // c.fillText(' JS1k',511,h/2);

    },15)

    H=performance.now()/15|1;
    c.font='2em cursive';
  8. p01 revised this gist Jan 25, 2015. 1 changed file with 0 additions and 99 deletions.
    99 changes: 0 additions & 99 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -119,103 +119,4 @@ n=4;
    // c.font=z*z+'em cursive';
    // c.fillText(' JS1k',511,h/2);

    },15);
    a.height=h=x*innerHeight/innerWidth|1;
    c.textAlign='center';

    H=performance.now()/15|0;
    c.font=2+'em cursive';
    // z=H/511*48-31;
    // if(z<1)z=1;
    // c.font=z+'em cursive';
    // c.fillText('JS1k',511,h/2);
    // c.font=3+'em cursive';
    // z-=15;
    // if(z>0){
    // c.globalAlpha=z/6;
    // c.fillRect(0,0,1023,h);
    // }
    // c.globalCompositeOperation='source-atop';
    // c.globalAlpha=1;
    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h);

    for(;x--;){
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + distance of the "particle"
    c[H&1023]=x&&c[H&1023]||8+Math.random()*h/2;

    Y=Math.sin(H/511-Math.sin(H/511*3)*3)*48+s*c[H&1023]+h/2;
    X=1023-x+(511-x)*Y/h;
    c.globalAlpha=1;
    q=170;
    if (s) {
    // "particles"
    q+=Y&31;
    c.fillStyle='hsl('+q+',55%,200%)';
    if (H%511) {
    // grass
    if (Y&1)
    c.fillStyle='hsl('+q+',55%,20%)';
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);

    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);

    if (!(H%(9+Math.sin(H/511/3)*3|1))) {
    // tree
    z=Y&15;
    z+=6;
    Y-=z*6;
    c.globalAlpha=.3;
    for (;z--;) {
    c.beginPath();
    c.lineTo(X,Y);
    c.lineTo(X-z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    c.lineTo(X+z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    c.fill();
    }
    }
    } else {
    // text
    // c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    c.fillText('Cross browser31kb demos3February 20153JS1k 2015'.split(3)[H/511&3],X,Y);
    }
    } else {
    // tracks
    c.fillStyle='hsl('+q+',55%,2%)';
    c.fillRect(X,Y,1,5);
    c.fillRect(X,Y,5,1);Y+=2;
    c.fillRect(X,Y,5,1);

    // train
    if(x==511+15*2-1 || x==511+15-1 || x==511-1) {
    z=10;
    c.fillRect(X,Y,20,-10);
    if(x==511-1) {
    c.fillRect(X,Y,10,-15);
    X+=15;
    c.fillRect(X,Y,2,-15);
    c.fillStyle='hsl('+q+',55%,200%)';
    c.globalAlpha=.3;
    q=H;
    for(;z--;){
    c.fillRect(X+Math.sin(q++)*3,Y-z*6+Math.sin(q++)*3,z,z);
    }
    }
    }
    }
    }
    c.globalCompositeOperation='destination-in';
    z=H/511*48-31-2*48;
    if(z<1)z=1;
    c.textBaseline='middle';
    c.font=z*z+'em cursive';
    c.fillText(' JS1k',511,h/2);


    },15);
  9. p01 revised this gist Jan 25, 2015. 1 changed file with 119 additions and 1 deletion.
    120 changes: 119 additions & 1 deletion test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,128 @@
    // Compresses down to ~890 bytes with Uglify + RegPack
    // Compresses down to ~1030 bytes with Uglify + RegPack

    setInterval(function(){
    a.width=x=1023;
    a.height=h=x*innerHeight/innerWidth|1;
    c.textAlign='center';

    H=performance.now()/15|1;
    c.font='2em cursive';

    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h);
    w=511+15*3-1;
    n=4;
    for(;x--;){
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + distance of the "particle"
    c[H&1023]=x&&c[H&1023]||8+Math.random()*h/2;

    Y=Math.sin(H/511-Math.sin(H/511*3)*3)*48+s*c[H&1023]+h/2;
    X=1023-x+(511-x)*Y/h;
    c.globalAlpha=1;
    q=170;
    if (s) {
    // "particles"
    q+=Y&31;
    c.fillStyle='hsl('+q+',55%,200%)';
    if (H%511) {
    // grass
    if (Y&1)
    c.fillStyle='hsl('+q+',55%,20%)';
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);

    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);

    if (!(H%(9+Math.sin(H/511/3)*3|1))) {
    // tree
    z=Y&15;
    z+=6;
    Y-=z*6;
    c.globalAlpha=.3;
    for (;z--;) {
    c.beginPath();
    c.lineTo(X,Y);
    c.lineTo(X-z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    c.lineTo(X+z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    c.fill();
    }
    }
    } else {
    // text
    c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    // c.fillText('Cross browser31kb demos3February 20153JS1k 2015'.split(3)[H/511&3],X,Y);
    }
    } else {
    // tracks
    c.fillStyle='hsl('+q+',55%,2%)';
    c.fillRect(X,Y,1,5);
    c.fillRect(X,Y,5,1);Y+=2;
    c.fillRect(X,Y,5,1);

    // train
    if(x==w&&n--){//511+15*3-1 || x==511+15*2-1 || x==511+15-1 || x==511-1) {
    w-=15;
    z=10;
    c.fillRect(X,Y,20,-10);
    if(!n){//(x==511-1) {
    c.fillRect(X,Y,10,-15);
    X+=15;
    c.fillRect(X,Y,2,-15);
    c.fillStyle='hsl('+q+',55%,200%)';
    c.globalAlpha=.3;
    q=H;
    for(;z--;){
    c.fillRect(X+Math.sin(q++)*3,Y-z*6+Math.sin(q++)*3,z,z);
    }
    }
    }
    }
    }

    c.globalCompositeOperation='destination-in';
    z=H/511*48-128
    if(z<3)z=3;
    z*=z;
    c.translate(511,h/2);
    c.scale(z,z);
    X=Y=-3;
    q=Math.PI/2;
    c.beginPath();
    c.rotate(z/511);
    // j
    c.moveTo(X,Y);
    c.arc(X-2,Y+3,2,0,q,0);
    // s
    X+=2;
    c.moveTo(X,Y+4);
    c.arc(X,Y+3,1,q,q*3,1);
    c.arc(X,Y+1,1,q,q*3,0);
    // 1
    X+=3;
    c.moveTo(X,Y+4);
    c.arc(X-2,Y-1,2,0,q,0);
    // k
    X+=2;
    c.moveTo(X,Y-2);
    c.lineTo(X,Y+4);
    c.moveTo(X+3,Y+4);
    c.arc(X+2,Y+2,1,q*3/2,q*3,0);
    c.stroke();

    // Hum yeah, regular text won't cut it. It's too browser+platform dependent
    // c.textBaseline='middle';
    // c.font=z*z+'em cursive';
    // c.fillText(' JS1k',511,h/2);

    },15);
    a.height=h=x*innerHeight/innerWidth|1;
    c.textAlign='center';

    H=performance.now()/15|0;
    c.font=2+'em cursive';
    // z=H/511*48-31;
  10. p01 revised this gist Jan 24, 2015. 1 changed file with 26 additions and 17 deletions.
    43 changes: 26 additions & 17 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +1,24 @@
    // Compresses down to ~880 bytes with Uglify + RegPack
    // Compresses down to ~890 bytes with Uglify + RegPack

    t=setInterval(function(){
    setInterval(function(){
    a.width=x=1023;
    a.height=h=x*innerHeight/innerWidth|1;
    c.textAlign='center';
    //c.textBaseline='middle';

    H=t++;
    z=H/511*48/2-15;
    if(z<1)z=1;
    c.font=z+'em cursive';
    c.fillText('JS1k',511,h/2);
    c.font=3+'em cursive';
    z-=15;
    if(z>0){
    c.globalAlpha=z/6;
    c.fillRect(0,0,1023,h);
    }
    c.globalCompositeOperation='source-atop';
    c.globalAlpha=1;
    H=performance.now()/15|0;
    c.font=2+'em cursive';
    // z=H/511*48-31;
    // if(z<1)z=1;
    // c.font=z+'em cursive';
    // c.fillText('JS1k',511,h/2);
    // c.font=3+'em cursive';
    // z-=15;
    // if(z>0){
    // c.globalAlpha=z/6;
    // c.fillRect(0,0,1023,h);
    // }
    // c.globalCompositeOperation='source-atop';
    // c.globalAlpha=1;
    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h);
    @@ -64,7 +64,8 @@ t=setInterval(function(){
    }
    } else {
    // text
    c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    // c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    c.fillText('Cross browser31kb demos3February 20153JS1k 2015'.split(3)[H/511&3],X,Y);
    }
    } else {
    // tracks
    @@ -91,4 +92,12 @@ t=setInterval(function(){
    }
    }
    }
    c.globalCompositeOperation='destination-in';
    z=H/511*48-31-2*48;
    if(z<1)z=1;
    c.textBaseline='middle';
    c.font=z*z+'em cursive';
    c.fillText(' JS1k',511,h/2);


    },15);
  11. p01 revised this gist Jan 22, 2015. 1 changed file with 28 additions and 13 deletions.
    41 changes: 28 additions & 13 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,42 @@
    // Compresses down to ~760 bytes with Uglify + RegPack
    // Compresses down to ~880 bytes with Uglify + RegPack

    t=setInterval(function(){
    q=170;
    a.width=x=1023;
    a.height=h=x*innerHeight/innerWidth|1;
    a.style.background='hsl('+q+',20%,55%)';
    c.font='2em cursive';
    c.textAlign='center';
    //c.textBaseline='middle';

    H=t++;
    z=H/511*48/2-15;
    if(z<1)z=1;
    c.font=z+'em cursive';
    c.fillText('JS1k',511,h/2);
    c.font=3+'em cursive';
    z-=15;
    if(z>0){
    c.globalAlpha=z/6;
    c.fillRect(0,0,1023,h);
    }
    c.globalCompositeOperation='source-atop';
    c.globalAlpha=1;
    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h);

    for(;x--;){
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + distance of the "particle"
    c[H&1023]=x&&c[H&1023]||[Math.sin(H/510-Math.sin(H/510*3)*3)*48,8+Math.random()*h/2];

    Y=s*c[H&1023][c.globalAlpha=1]+c[H&1023][0]+h/2;
    X=510+(510-x)*(1+Y/h);
    c[H&1023]=x&&c[H&1023]||8+Math.random()*h/2;

    Y=Math.sin(H/511-Math.sin(H/511*3)*3)*48+s*c[H&1023]+h/2;
    X=1023-x+(511-x)*Y/h;
    c.globalAlpha=1;
    q=170;
    if (s) {
    // "particles"
    q+=Y&31;
    c.fillStyle='hsl('+q+',55%,200%)';
    if (H%510) {
    if (H%511) {
    // grass
    if (Y&1)
    c.fillStyle='hsl('+q+',55%,20%)';
    @@ -33,7 +48,7 @@ t=setInterval(function(){
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);

    if (!(H%(9+Math.sin(H/510/3)*3|1))) {
    if (!(H%(9+Math.sin(H/511/3)*3|1))) {
    // tree
    z=Y&15;
    z+=6;
    @@ -49,7 +64,7 @@ t=setInterval(function(){
    }
    } else {
    // text
    c.fillText(['February 2015','JS1k 2015','Cross browser','1kb'][H/510&3],X,Y);
    c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y);
    }
    } else {
    // tracks
    @@ -59,10 +74,10 @@ t=setInterval(function(){
    c.fillRect(X,Y,5,1);

    // train
    if(x==510+15*2 || x==510+15 || x==510) {
    if(x==511+15*2-1 || x==511+15-1 || x==511-1) {
    z=10;
    c.fillRect(X,Y,20,-10);
    if(x==510) {
    if(x==511-1) {
    c.fillRect(X,Y,10,-15);
    X+=15;
    c.fillRect(X,Y,2,-15);
  12. p01 revised this gist Jan 21, 2015. 1 changed file with 38 additions and 42 deletions.
    80 changes: 38 additions & 42 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,46 +1,45 @@
    // Compresses down to ~800 bytes with Uglify + RegPack
    // Compresses down to ~760 bytes with Uglify + RegPack

    c.font='2em cursive';
    c.textAlign='center';
    t=setInterval(function(){
    c.save();
    c.scale(h=innerWidth/1023,h);
    H=t++;
    for(x=0;x<=1023;x++){
    q=170;
    if(!x) {
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h=innerHeight/h);
    }
    q=170;
    a.width=x=1023;
    a.height=h=x*innerHeight/innerWidth|1;
    a.style.background='hsl('+q+',20%,55%)';
    c.font='2em cursive';

    H=t++;
    for(;x--;){
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + position of the "particle"
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/510-Math.sin(H/510*3)*3)*3*12,8+Math.random()*h/2|1];
    // exisiting || new portion of tracks + distance of the "particle"
    c[H&1023]=x&&c[H&1023]||[Math.sin(H/510-Math.sin(H/510*3)*3)*48,8+Math.random()*h/2];

    Y=h/2-s*c[H&1023][1]-c[H&1023][0];
    X=510+(x-510)*(1+Y/h);
    Y=s*c[H&1023][c.globalAlpha=1]+c[H&1023][0]+h/2;
    X=510+(510-x)*(1+Y/h);

    if (x%3) {
    q+=H+Y&31;
    q=170;
    if (s) {
    // "particles"
    q+=Y&31;
    c.fillStyle='hsl('+q+',55%,200%)';
    if (H%510) {
    // grass
    if (Y&1)
    c.fillStyle='hsl('+q+',55%,20%)';
    // grass
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);

    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);

    if (!(H%(9+Math.sin(H/510/3)*3|1))) {
    // tree
    z=c[H&1023][1]%15+6;
    c.globalAlpha=.3;
    z=Y&15;
    z+=6;
    Y-=z*6;
    for (;--z;) {
    c.globalAlpha=.3;
    for (;z--;) {
    c.beginPath();
    c.lineTo(X,Y);
    c.lineTo(X-z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    @@ -50,34 +49,31 @@ t=setInterval(function(){
    }
    } else {
    // text
    //c.fillStyle='hsl('+q+',55%,200%)';
    c.fillText(['JS1k 2015','Trains','1kb','February 2015'][H>>9&3],X,Y);
    c.fillText(['February 2015','JS1k 2015','Cross browser','1kb'][H/510&3],X,Y);
    }
    } else {
    // tracks
    c.fillStyle='hsl('+q+',55%,2%)';
    c.fillRect(X,Y,1,4);
    c.fillRect(X,Y,1,5);
    c.fillRect(X,Y,5,1);Y+=2;
    c.fillRect(X,Y,5,1);
    c.fillRect(X,Y+2,5,1);

    // train
    //if(!(x%15) && x>440 && x<510){
    if(x==510-15*2 || x==510-15 || x==510) {
    c.fillRect(X-10,Y+2,20,-10);
    if(x==510+15*2 || x==510+15 || x==510) {
    z=10;
    c.fillRect(X,Y,20,-10);
    if(x==510) {
    c.fillRect(X,Y+2,-10,-15);
    c.globalAlpha=.3;
    c.fillRect(X,Y,10,-15);
    X+=15;
    c.fillRect(X,Y,2,-15);
    c.fillStyle='hsl('+q+',55%,200%)';
    q+=H+Y&31;
    z=10;
    for(;--z;){
    c.fillRect(X-z*2+Math.sin(q++)*3,Y-z*6+Math.sin(q++)*3,z,z);
    c.globalAlpha=.3;
    q=H;
    for(;z--;){
    c.fillRect(X+Math.sin(q++)*3,Y-z*6+Math.sin(q++)*3,z,z);
    }
    }
    }
    }
    c.globalAlpha=1;
    }
    c.restore();
    },16);

    },15);
  13. p01 revised this gist Jan 21, 2015. 1 changed file with 27 additions and 29 deletions.
    56 changes: 27 additions & 29 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,44 +1,41 @@
    // Compresses down to ~810 bytes with Uglify + RegPack
    // Compresses down to ~800 bytes with Uglify + RegPack

    c.font='2em cursive';
    c.textAlign='center';
    t=setInterval(function(){
    c.save();
    h=innerWidth/1023;
    c.scale(h,h);
    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h=innerHeight/h);

    c.scale(h=innerWidth/1023,h);
    H=t++;
    for(x=0;x<=1023;x++){
    q=170;
    if(!x) {
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h=innerHeight/h);
    }

    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + position of the "particle"
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/511-Math.sin(H/511*3)*3)*3*12,8+Math.random()*h/2|0];
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/510-Math.sin(H/510*3)*3)*3*12,8+Math.random()*h/2|1];

    Y=h/2-s*c[H&1023][1]-c[H&1023][0];
    //l=Math.sin(Math.sin(x/511*3/2)*3/2);
    X=511+(x-511)*(1+Y/h);
    // c.save();
    //c.translate(511+(x-511)*(1+y/h),y);
    // c.scale(l,l);
    X=510+(x-510)*(1+Y/h);

    if (x%3) {
    q=170;
    q+=H+Y&31;
    if (H%511) {
    c.fillStyle='hsl('+(q)+',55%,20%)';
    if (Y&1) c.fillStyle='hsl('+q+',55%,200%)';
    c.fillStyle='hsl('+q+',55%,200%)';
    if (H%510) {
    if (Y&1)
    c.fillStyle='hsl('+q+',55%,20%)';
    // grass
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);

    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);

    if (!(H%7)) {
    if (!(H%(9+Math.sin(H/510/3)*3|1))) {
    // tree
    z=c[H&1023][1]%15+6;
    c.globalAlpha=.3;
    @@ -53,33 +50,34 @@ t=setInterval(function(){
    }
    } else {
    // text
    c.fillStyle='hsl('+q+',55%,200%)';
    //c.fillStyle='hsl('+q+',55%,200%)';
    c.fillText(['JS1k 2015','Trains','1kb','February 2015'][H>>9&3],X,Y);
    }
    } else {
    // tracks
    c.fillStyle='hsl('+q+',55%,10%)';
    c.fillStyle='hsl('+q+',55%,2%)';
    c.fillRect(X,Y,1,4);
    c.fillRect(X,Y,5,1);
    c.fillRect(X,Y+2,5,1);

    // train
    if(!(x%15) && x>440 && x<511){
    //if(!(x%15) && x>440 && x<510){
    if(x==510-15*2 || x==510-15 || x==510) {
    c.fillRect(X-10,Y+2,20,-10);
    if(x>500) {
    if(x==510) {
    c.fillRect(X,Y+2,-10,-15);
    c.globalAlpha=.3;
    c.fillStyle='hsl('+q+',60%,200%)';
    c.fillStyle='hsl('+q+',55%,200%)';
    q+=H+Y&31;
    z=10;
    for(;--z;){
    c.fillRect(X-z*2+Math.sin(q++)*3,Y-z*6+Math.sin(q++)*3,z,z);
    }
    }
    }
    }
    // c.restore();
    c.globalAlpha=1;

    }
    c.restore();
    },16);
    c.restore();
    },16);

  14. p01 revised this gist Jan 20, 2015. 1 changed file with 34 additions and 40 deletions.
    74 changes: 34 additions & 40 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,91 +1,85 @@
    // Compresses down to ~800 bytes with Uglify + RegPack

    // Compresses down to ~810 bytes with Uglify + RegPack
    c.font='2em cursive';
    c.textAlign='center';
    t=setInterval(function(){
    c.save();
    h=innerWidth/1023;
    c.scale(h,h);
    h=innerHeight/h;
    q=80;
    c.fillStyle='hsl('+q+',20%,50%)';
    c.fillRect(0,0,1023,1023);
    q=170;
    c.fillStyle='hsl('+q+',20%,55%)';
    c.fillRect(0,0,1023,h=innerHeight/h);

    H=t++;
    for(x=0;x<=1023;x++){
    s=x%3?++H&1||-1:0;
    s=x%3?H++&1||-1:0;
    // exisiting || new portion of tracks + position of the "particle"
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/511-Math.sin(H/511*3))*48,8+Math.random()*h/2|0];
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/511-Math.sin(H/511*3)*3)*3*12,8+Math.random()*h/2|0];

    Y=h/2-s*c[H&1023][1]-c[H&1023][0];
    //l=Math.sin(Math.sin(x/511*3/2)*3/2);
    X=511+(x-511)*(1+Y/h);
    // c.save();
    //c.translate(511+(x-511)*(1+y/h),y);
    // c.scale(l,l);

    if (x%3) {
    q=30;
    q+=H+Y&63;
    q=170;
    q+=H+Y&31;
    if (H%511) {
    c.fillStyle='hsl('+q+',50%,20%)';
    if (H%7) {
    // grass
    if (Y&1)
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,4);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,4);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,4);

    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    } else {
    c.fillStyle='hsl('+(q)+',55%,20%)';
    if (Y&1) c.fillStyle='hsl('+q+',55%,200%)';
    // grass
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,5);

    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*3*12,Y+Math.sin(q++)*3,1,1);

    if (!(H%7)) {
    // tree
    q=H/24;
    // c.rotate(Math.sin(q++)/24);
    z=c[H&1023][1]%15+6;
    //c.translate(0,-6*z);
    c.globalAlpha=.3;
    Y-=z*6;
    for (;--z;) {
    c.beginPath();
    c.lineTo(X,Y);
    c.lineTo(X-2*z,Y+6*z+Math.sin(q++)*3);
    c.lineTo(X+2*z,Y+6*z+Math.sin(q++)*3);
    c.lineTo(X-z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    c.lineTo(X+z*2+Math.sin(q++)*3,Y+z*6+Math.sin(q++)*3);
    c.fill();
    }
    }
    } else {
    // text
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillText(['JS1k 2015','Trains','1kb','Feb 1-28 2015'][H>>9&3],X,Y);
    c.fillStyle='hsl('+q+',55%,200%)';
    c.fillText(['JS1k 2015','Trains','1kb','February 2015'][H>>9&3],X,Y);
    }
    } else {
    // tracks
    q=0;
    c.fillStyle='hsl('+q+',50%,10%)';
    c.fillRect(X,Y,1,5);
    c.fillStyle='hsl('+q+',55%,10%)';
    c.fillRect(X,Y,1,4);
    c.fillRect(X,Y,5,1);
    c.fillRect(X,Y+2,5,1);

    // train
    if(!(x%15) && x>440 && x<511){
    c.fillRect(X-10,Y+2,20,-10);
    if(x>500) {
    c.fillRect(X,Y+2,-10,-15);
    c.globalAlpha=.3;
    c.fillStyle='hsl('+q+',0%,200%)';
    z=9;
    q+=H+Y&63;
    c.fillStyle='hsl('+q+',60%,200%)';
    z=10;
    for(;--z;){
    c.fillRect(X-2*z+Math.sin(q++)*3,Y-6*z+Math.sin(q++)*3,z,z);
    c.fillRect(X-z*2+Math.sin(q++)*3,Y-z*6+Math.sin(q++)*3,z,z);
    }
    }
    }
    }
    // c.restore();
    c.globalAlpha=1;

    }
    c.restore();
    },16);
  15. p01 revised this gist Jan 20, 2015. 1 changed file with 33 additions and 31 deletions.
    64 changes: 33 additions & 31 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    // Compresses down to ~830 bytes with Uglify + RegPack
    // Compresses down to ~800 bytes with Uglify + RegPack

    c.font='2em cursive';
    c.textAlign='center';
    t=setInterval(function(){
    c.save();
    h=innerWidth/1023;
    @@ -8,82 +10,82 @@ t=setInterval(function(){
    q=80;
    c.fillStyle='hsl('+q+',20%,50%)';
    c.fillRect(0,0,1023,1023);
    c.font='2em cursive';
    c.textAlign='center';

    H=t++;
    for(x=0;x<=1023;x++){
    s=x%3?++H&1||-1:0;
    // exisiting || new portion of tracks + position of the "particle"
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/511-Math.sin(H/511*3))*48,8+Math.random()*h/2|0];
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/511-Math.sin(H/511*3))*48,8+Math.random()*h/2|0];

    y=h/2-s*c[H&1023][1]-c[H&1023][0];
    Y=h/2-s*c[H&1023][1]-c[H&1023][0];
    //l=Math.sin(Math.sin(x/511*3/2)*3/2);

    c.save();
    c.translate(511+(x-511)*(1+y/h),y);
    X=511+(x-511)*(1+Y/h);
    // c.save();
    //c.translate(511+(x-511)*(1+y/h),y);
    // c.scale(l,l);

    if (x%3) {
    q=30;
    q+=H+y&63;
    q+=H+Y&63;
    if (H%511) {
    c.fillStyle='hsl('+q+',50%,20%)';
    if (H%7) {
    // grass
    if (y&1)
    if (Y&1)
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,4);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,4);
    c.fillRect(X+Math.sin(q++)*3,Y+Math.sin(q++),1,4);

    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    c.fillRect(X+Math.sin(q++)*48,Y+Math.sin(q++)*3,1,1);
    } else {
    // tree
    q=H/24;
    c.rotate(Math.sin(q++)/24);
    // c.rotate(Math.sin(q++)/24);
    z=c[H&1023][1]%15+6;
    c.translate(0,-6*z);
    //c.translate(0,-6*z);
    c.globalAlpha=.3;
    for (;--z;) {
    c.beginPath();
    c.lineTo(0,0);
    c.lineTo(-2*z,6*z+Math.sin(q++)*3);
    c.lineTo( 2*z,6*z+Math.sin(q++)*3);
    c.lineTo(X,Y);
    c.lineTo(X-2*z,Y+6*z+Math.sin(q++)*3);
    c.lineTo(X+2*z,Y+6*z+Math.sin(q++)*3);
    c.fill();
    }
    }
    } else {
    // text
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillText(['JS1k 2015','Trains','1kb','Feb 1-28 2015'][H>>9&3],0,0);
    c.fillText(['JS1k 2015','Trains','1kb','Feb 1-28 2015'][H>>9&3],X,Y);
    }
    } else {
    // tracks
    q=0;
    c.fillStyle='hsl('+q+',50%,10%)';
    c.fillRect(0,0,1,5);
    c.fillRect(0,0,5,1);
    c.fillRect(0,2,5,1);
    c.fillRect(X,Y,1,5);
    c.fillRect(X,Y,5,1);
    c.fillRect(X,Y+2,5,1);

    // train
    if(!(x%15) && x>440 && x<511){
    c.fillRect(-10,2,20,-10);
    c.fillRect(X-10,Y+2,20,-10);
    if(x>500) {
    c.fillRect(0,2,-10,-15);
    c.fillRect(X,Y+2,-10,-15);
    c.globalAlpha=.3;
    c.fillStyle='hsl('+q+',0%,200%)';
    z=9;
    q+=H+y&63;
    q+=H+Y&63;
    for(;--z;){
    c.fillRect(-2*z+Math.sin(q++)*3,-6*z+Math.sin(q++)*3,z,z);
    c.fillRect(X-2*z+Math.sin(q++)*3,Y-6*z+Math.sin(q++)*3,z,z);
    }
    }
    }
    }
    c.restore();

    // c.restore();
    c.globalAlpha=1;

    }
    c.restore();
    },16);
  16. p01 revised this gist Jan 20, 2015. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -11,8 +11,6 @@ t=setInterval(function(){
    c.font='2em cursive';
    c.textAlign='center';
    H=t++;
    t++;
    t++;
    for(x=0;x<=1023;x++){
    s=x%3?++H&1||-1:0;
    // exisiting || new portion of tracks + position of the "particle"
  17. p01 revised this gist Jan 20, 2015. 1 changed file with 10 additions and 8 deletions.
    18 changes: 10 additions & 8 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,28 +1,30 @@
    // Compresses down to ~840 bytes with Uglify + RegPack
    // Compresses down to ~830 bytes with Uglify + RegPack

    t=setInterval(function(){
    c.save();
    l=innerWidth/1023;
    h=innerHeight/l;
    c.scale(l,l);
    h=innerWidth/1023;
    c.scale(h,h);
    h=innerHeight/h;
    q=80;
    c.fillStyle='hsl('+q+',20%,50%)';
    c.fillRect(0,0,1023,1023);
    c.font='2em cursive';
    c.textAlign='center';
    H=t++;
    t++;
    t++;
    for(x=0;x<=1023;x++){
    s=x%3?++H&1||-1:0;
    // exisiting || new portion of tracks + position of the "particle"
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/511-Math.sin(H/511*3))*48,8+Math.random()*h/2|0];

    y=h/2-s*c[H&1023][1]-c[H&1023][0];
    l=Math.sin(Math.sin(x/511*3/2)*3/2);
    //l=Math.sin(Math.sin(x/511*3/2)*3/2);

    c.save();
    c.translate(511+(x-511)*(1+y/h),y);
    c.scale(l,l);
    // c.scale(l,l);

    if (x%3) {
    q=30;
    q+=H+y&63;
    @@ -86,4 +88,4 @@ t=setInterval(function(){

    }
    c.restore();
    },16);
    },16);
  18. p01 revised this gist Jan 20, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ t=setInterval(function(){
    l=Math.sin(Math.sin(x/511*3/2)*3/2);

    c.save();
    c.translate(511+((x-511)*(1+y/h)),y);
    c.translate(511+(x-511)*(1+y/h),y);
    c.scale(l,l);

    if (x%3) {
  19. p01 revised this gist Jan 20, 2015. 1 changed file with 22 additions and 28 deletions.
    50 changes: 22 additions & 28 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    // Compresses down to ~860 bytes with Uglify + RegPack
    // Compresses down to ~840 bytes with Uglify + RegPack

    t=setInterval(function(){
    c.save();
    l=innerWidth/1023;
    @@ -9,45 +10,42 @@ t=setInterval(function(){
    c.fillRect(0,0,1023,1023);
    c.font='2em cursive';
    c.textAlign='center';

    H=t++;
    for(x=0;x<=1023;x++){
    // s=t++&1||-1;
    s=++t%3?(t&1||-1):0;
    s=x%3?++H&1||-1:0;
    // exisiting || new portion of tracks + position of the "particle"
    c[t&1023]=x-1023&&c[t&1023]||[Math.sin(t/511-Math.sin(t/511*3))*48,8+Math.random()*h/2|0];
    c[H&1023]=x-1023&&c[H&1023]||[Math.sin(H/511-Math.sin(H/511*3))*48,8+Math.random()*h/2|0];

    y=h/2-s*c[t&1023][1]-c[t&1023][0];
    y=h/2-s*c[H&1023][1]-c[H&1023][0];
    l=Math.sin(Math.sin(x/511*3/2)*3/2);

    xx=511+((x-511)*(1+y/h));
    c.save();
    c.translate(xx,y);
    c.translate(511+((x-511)*(1+y/h)),y);
    c.scale(l,l);

    if (t%3) {
    if (x%3) {
    q=30;
    q+=t+y&63;
    if (t%511) {
    q+=H+y&63;
    if (H%511) {
    c.fillStyle='hsl('+q+',50%,20%)';
    if (t%7) {
    if (H%7) {
    // grass
    if (y&1)
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);

    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    } else {
    // tree
    q=t+x/24;
    q=H/24;
    c.rotate(Math.sin(q++)/24);
    z=c[t&1023][1]%16+6;
    z=c[H&1023][1]%15+6;
    c.translate(0,-6*z);
    c.globalAlpha=.3;
    y=0;
    for (;--z;) {
    c.beginPath();
    c.lineTo(0,0);
    @@ -59,29 +57,26 @@ t=setInterval(function(){
    } else {
    // text
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillText(['JS1k 2015','Trains','1kb','Feb 1-28 2015'][t>>9&3],0,0);
    c.fillText(['JS1k 2015','Trains','1kb','Feb 1-28 2015'][H>>9&3],0,0);
    }
    } else {
    // tracks
    q=0;
    c.fillStyle='hsl('+q+',50%,10%)';

    y=x/3|0;
    c.fillRect(0,0,1,5);
    c.fillRect(0,0,5,1);
    c.fillRect(0,2,5,1);

    // train
    if(!(y%5) && y>160 && y<160+30){//x>513 && x<511+80){
    c.fillRect(0,2,8,-10);
    c.fillRect(0,2,-8,y>160+20?-15:-10);
    if(y>160+30-10) {
    if(!(x%15) && x>440 && x<511){
    c.fillRect(-10,2,20,-10);
    if(x>500) {
    c.fillRect(0,2,-10,-15);
    c.globalAlpha=.3;
    c.fillStyle='hsl('+q+',0%,200%)';
    z=9;
    // q=y+x/12;
    q+=t+y&63;
    for(;z--;){
    q+=H+y&63;
    for(;--z;){
    c.fillRect(-2*z+Math.sin(q++)*3,-6*z+Math.sin(q++)*3,z,z);
    }
    }
    @@ -90,6 +85,5 @@ t=setInterval(function(){
    c.restore();

    }
    t-=1023;
    c.restore();
    },16);
  20. p01 revised this gist Jan 19, 2015. 1 changed file with 55 additions and 54 deletions.
    109 changes: 55 additions & 54 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,8 @@
    // Compresses down to ~860 bytes with Uglify + RegPack

    t=setInterval(function(){
    c.save();
    l=innerWidth/1023;
    h=innerHeight/l|0;
    h=innerHeight/l;
    c.scale(l,l);
    q=80;
    c.fillStyle='hsl('+q+',20%,50%)';
    @@ -12,82 +11,84 @@ t=setInterval(function(){
    c.textAlign='center';

    for(x=0;x<=1023;x++){
    s=t++&1||-1;
    // s=t++&1||-1;
    s=++t%3?(t&1||-1):0;
    // exisiting || new portion of tracks + position of the "particle"
    c[t&1023]=x-1023&&c[t&1023]||[Math.sin(t/511-Math.sin(t/511*3))*48,8+Math.random()*h/2|0];

    y=h/2-s*c[t&1023][1]-c[t&1023][s=0];
    y=h/2-s*c[t&1023][1]-c[t&1023][0];
    l=Math.sin(Math.sin(x/511*3/2)*3/2);
    q=30;
    q+=t+y&63;

    xx=511+((x-511)*(1+y/h));
    c.save();
    c.translate(x,y);
    c.translate(xx,y);
    c.scale(l,l);

    if(t%511){
    c.fillStyle='hsl('+q+',50%,20%)';
    if(t%7) {
    // grass
    if(y&1)
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    if (t%3) {
    q=30;
    q+=t+y&63;
    if (t%511) {
    c.fillStyle='hsl('+q+',50%,20%)';
    if (t%7) {
    // grass
    if (y&1)
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);

    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    } else {
    // tree
    c.rotate(Math.sin(q++)/24);
    z=c[t&1023][1]%16+6;
    c.translate(0,-6*z);
    c.globalAlpha=.3;
    for(;--z;){
    c.beginPath();
    c.lineTo(0,0);
    c.lineTo(-2*z,6*z+Math.sin(q++)*3);
    c.lineTo( 2*z,6*z+Math.sin(q++)*3);
    c.fill();
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    } else {
    // tree
    q=t+x/24;
    c.rotate(Math.sin(q++)/24);
    z=c[t&1023][1]%16+6;
    c.translate(0,-6*z);
    c.globalAlpha=.3;
    y=0;
    for (;--z;) {
    c.beginPath();
    c.lineTo(0,0);
    c.lineTo(-2*z,6*z+Math.sin(q++)*3);
    c.lineTo( 2*z,6*z+Math.sin(q++)*3);
    c.fill();
    }
    }
    } else {
    // text
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillText(['JS1k 2015','Trains','1kb','Feb 1-28 2015'][t>>9&3],0,0);
    }
    } else {
    // text
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillText(['JS1k 2015','Trains','No external data','Ends April 2015'][t>>9&3],0,0);
    }
    c.restore();

    // tracks
    if(t&1) {
    q=30;
    c.fillStyle='hsl('+q+',50%,20%)';
    y=h/2-s*c[t&1023][1]-c[t&1023][s=0];
    // tracks
    q=0;
    c.fillStyle='hsl('+q+',50%,10%)';

    c.save();
    c.translate(x,y);

    y=x>>1;
    c.fillRect(0,0,t+y&1,4);
    c.fillRect(0,0,2,1);
    c.fillRect(0,2,2,1);
    y=x/3|0;
    c.fillRect(0,0,1,5);
    c.fillRect(0,0,5,1);
    c.fillRect(0,2,5,1);

    // train
    if(!(y%9) && x>511 && x<511+99){
    if(!(y%5) && y>160 && y<160+30){//x>513 && x<511+80){
    c.fillRect(0,2,8,-10);
    c.fillRect(0,2,-8,x>580?-15:-10);
    if(x>580) {
    c.fillRect(0,2,-8,y>160+20?-15:-10);
    if(y>160+30-10) {
    c.globalAlpha=.3;
    c.fillStyle='hsl('+q+',0%,200%)';
    z=9;
    // q=y+x/12;
    q+=t+y&63;
    q+=t+y&63;
    for(;z--;){
    c.fillRect(-2*z+Math.sin(q++)*3,-6*z+Math.sin(q++)*3,z,z);
    }
    }
    }
    c.restore();
    }
    c.restore();

    }
    t-=1023;
    c.restore();
  21. p01 revised this gist Jan 19, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,7 @@
    <head>
    <title>...</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <style>
    html, body { margin: 0; padding: 0; border: 0; }
    #c { display: block; } /* kill scrollbars from hell */
  22. p01 revised this gist Jan 18, 2015. 1 changed file with 21 additions and 16 deletions.
    37 changes: 21 additions & 16 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // Compresses down to ~835 bytes with Uglify + RegPack
    // Compresses down to ~860 bytes with Uglify + RegPack

    t=setInterval(function(){
    c.save();
    @@ -14,10 +14,10 @@ t=setInterval(function(){
    for(x=0;x<=1023;x++){
    s=t++&1||-1;
    // exisiting || new portion of tracks + position of the "particle"
    c[t&1023]=x-1023&&c[t&1023]||[48*Math.sin(t/511-Math.sin(t/511*3)),8+Math.random()*h/2|0];
    c[t&1023]=x-1023&&c[t&1023]||[Math.sin(t/511-Math.sin(t/511*3))*48,8+Math.random()*h/2|0];

    y=h/2-s*c[t&1023][1]-c[t&1023][s=0];
    l=Math.sin(1.5*Math.sin(1.5*x/511));
    l=Math.sin(Math.sin(x/511*3/2)*3/2);
    q=30;
    q+=t+y&63;
    c.save();
    @@ -26,24 +26,28 @@ t=setInterval(function(){

    if(t%511){
    c.fillStyle='hsl('+q+',50%,20%)';
    if(t%9) {
    if(t%7) {
    // grass
    if(y&1)
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);
    c.fillRect(Math.sin(q++)*3,Math.sin(q++),1,4);

    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    c.fillRect(Math.sin(q++)*48,Math.sin(q++)*3,1,1);
    } else {
    // tree
    c.rotate(Math.sin(y+x/24)/24);
    c.rotate(Math.sin(q++)/24);
    z=c[t&1023][1]%16+6;
    c.translate(0,-6*(z+Math.sin(q++)));
    c.translate(0,-6*z);
    c.globalAlpha=.3;
    for(;z--;){
    for(;--z;){
    c.beginPath();
    c.lineTo(0,0);
    c.lineTo(-2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
    c.lineTo(2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
    c.lineTo(-2*z,6*z+Math.sin(q++)*3);
    c.lineTo( 2*z,6*z+Math.sin(q++)*3);
    c.fill();
    }
    }
    @@ -70,14 +74,15 @@ t=setInterval(function(){

    // train
    if(!(y%9) && x>511 && x<511+99){
    c.fillRect(0,2,8,-8);
    c.fillRect(0,2,-8,x>580?-12:-8);
    c.fillRect(0,2,8,-10);
    c.fillRect(0,2,-8,x>580?-15:-10);
    if(x>580) {
    c.globalAlpha=.3;
    z=9;
    q=t/24;
    // q=y+x/12;
    q+=t+y&63;
    for(;z--;){
    c.fillRect(-2*(z+Math.sin(q++)),-6*(z+Math.sin(q++)),z,z);
    c.fillRect(-2*z+Math.sin(q++)*3,-6*z+Math.sin(q++)*3,z,z);
    }
    }
    }
  23. p01 revised this gist Jan 17, 2015. 1 changed file with 46 additions and 44 deletions.
    90 changes: 46 additions & 44 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,87 +1,89 @@
    // Compresses down to ~830 bytes with Uglify + RegPack
    // Hand minification + RegPack should bring save ~20+ bytes
    // Compresses down to ~835 bytes with Uglify + RegPack

    t=setInterval(function(){
    a.width=1023;
    a.height=h=1023*innerHeight/innerWidth|0;
    c.save();
    l=innerWidth/1023;
    h=innerHeight/l|0;
    c.scale(l,l);
    q=80;
    a.style.backgroundColor='hsla('+q+',20%,50%,1)';
    c.fillStyle='hsl('+q+',20%,50%)';
    c.fillRect(0,0,1023,1023);
    c.font='2em cursive';
    c.textAlign='center';




    for(x=0;x<=1023;x++){
    s=t++&1||-1;
    // exisiting || new portion of tracks + position of the "particle"
    k = x-1023&&c[t&1023]||[48*Math.sin(t/511-Math.sin(t/511+x/511)),24+Math.random()*h/2|0];
    c[t&1023]=k;
    t++;
    // k=u[t++%1024]||[0,1024];
    c[t&1023]=x-1023&&c[t&1023]||[48*Math.sin(t/511-Math.sin(t/511*3)),8+Math.random()*h/2|0];

    //type=k[1]<220?grass:k[1]<255?tree:text;
    l=Math.sin(1.5*Math.sin(x*3.1/1023));
    s=t&1||-1;
    y=h/2-s*k[1]-k[s=0];

    q=48+(t+y&63);
    y=h/2-s*c[t&1023][1]-c[t&1023][s=0];
    l=Math.sin(1.5*Math.sin(1.5*x/511));
    q=30;
    q+=t+y&63;
    c.save();
    c.translate(x,y);
    c.scale(l,l);
    // (t%511?t%7?grass:tree:text)(x,y,z,l);

    if(t%511){
    if(t%7) {
    c.fillStyle='hsl('+q+',50%,20%)';
    if(t%9) {
    // grass
    c.fillStyle='hsla('+q+',50%,'+(y&1?20:99)+'%,1)';
    if(y&1)
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    } else {
    // tree
    c.fillStyle='hsla('+q+',50%,20%,.2)';
    c.rotate(Math.sin(y+x/32)/16);
    z=k[1]%16+6;
    c.rotate(Math.sin(y+x/24)/24);
    z=c[t&1023][1]%16+6;
    c.translate(0,-6*(z+Math.sin(q++)));
    c.globalAlpha=.3;
    for(;z--;){
    c.beginPath();
    c.lineTo(0,0);
    c.lineTo(-2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
    c.lineTo(2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
    c.fill();
    c.beginPath();
    c.lineTo(0,0);
    c.lineTo(-2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
    c.lineTo(2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
    c.fill();
    }
    }
    } else {
    // text
    c.fillStyle='hsla('+q+',50%,99%,1)';
    c.fillText(['JS1k 2015','Trains','No External Data','1kb'][t>>9&3],0,0);
    c.fillStyle='hsl('+q+',50%,200%)';
    c.fillText(['JS1k 2015','Trains','No external data','Ends April 2015'][t>>9&3],0,0);
    }
    c.restore();

    // tracks
    if(t&1) {
    q=30;
    c.fillStyle='hsla('+q+',50%,10%,1)';
    xx=x>>1;
    y=h/2-s*k[1]-k[s=0];
    c.fillStyle='hsl('+q+',50%,20%)';
    y=h/2-s*c[t&1023][1]-c[t&1023][s=0];

    c.save();
    c.translate(x,y);

    c.fillRect(0,0,t+xx&1,4);
    y=x>>1;
    c.fillRect(0,0,t+y&1,4);
    c.fillRect(0,0,2,1);
    c.fillRect(0,2,2,1);

    // train
    if(!(xx&7) && xx>260 && xx<300){
    c.fillRect(0,0,14,-7);
    if(xx>290) {
    c.fillRect(0,-5,7,-7);
    // c.fillRect(10,0,2,-9);
    // TODO: puffs of steam
    if(!(y%9) && x>511 && x<511+99){
    c.fillRect(0,2,8,-8);
    c.fillRect(0,2,-8,x>580?-12:-8);
    if(x>580) {
    c.globalAlpha=.3;
    z=9;
    q=t/24;
    for(;z--;){
    c.fillRect(-2*(z+Math.sin(q++)),-6*(z+Math.sin(q++)),z,z);
    }
    }
    }
    c.restore();
    }
    }
    t-=1023;
    },16)

    //u();
    c.restore();
    },16);
  24. p01 revised this gist Jan 16, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@ t=setInterval(function(){
    s=t&1||-1;
    y=h/2-s*k[1]-k[s=0];

    q=63+(t+y&63);
    q=48+(t+y&63);
    c.save();
    c.translate(x,y);
    c.scale(l,l);
  25. p01 revised this gist Jan 16, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -22,7 +22,7 @@ t=setInterval(function(){
    s=t&1||-1;
    y=h/2-s*k[1]-k[s=0];

    q=90+(t+y)%60;
    q=63+(t+y&63);
    c.save();
    c.translate(x,y);
    c.scale(l,l);
  26. p01 revised this gist Jan 16, 2015. 2 changed files with 65 additions and 81 deletions.
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    [Test page](http://bl.ocks.org/p01/c66d209fdb74514a2f00)
    [Test page](http://bl.ocks.org/p01/c66d209fdb74514a2f00)
    144 changes: 64 additions & 80 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,103 +1,87 @@


    tree=function(x,y,z,l){
    q=90+(t+y*0+k[1])%60;
    c.save();
    c.translate(x,y);
    c.scale(l,l);

    c.rotate(Math.sin(y+x/32)/16);
    c.fillStyle='hsla('+q+',50%,20%,.2)';
    c.translate(0,-z*6);
    for(;z--;){
    c.beginPath();
    c.lineTo(0,0);
    c.lineTo(-2*(z+Math.cos(q++)),6*(z+Math.cos(q++)));
    c.lineTo(2*(z+Math.cos(q++)),6*(z+Math.cos(q++)));
    c.fill();
    }

    c.restore();
    };
    grass=function(x,y,z,l){
    q=90+(t+y*0+k[1])%60;
    c.save();
    c.translate(x,y);
    c.scale(l,l);

    c.fillStyle='hsla('+q+',50%,'+(y&1?20:99)+'%,1)';
    // c.rotate(Math.cos(y+x/32)/16);
    c.fillRect(2*Math.cos(q++),Math.sin(q++),1,4);
    c.fillRect(2*Math.cos(q++),Math.sin(q++),1,4);
    c.fillRect(2*Math.cos(q++),Math.sin(q++),1,4);

    c.restore();
    };
    text=function(x,y,z,l){
    q=90+(t+y)%60;
    c.save();
    c.translate(x,y);
    c.scale(l,l);

    c.fillStyle='hsla('+q+',50%,99%,1)';
    c.fillText(texts[(t>>9)%texts.length], 0, 0);

    c.restore();
    };



    //framesLeft=1000*5;
    texts=['1kb','Cross Browser','JS1k 2015','Trains','No External Data'];
    t=0;
    u=function(x,y,z,l){
    //document.title=framesLeft;if(framesLeft--)
    requestAnimationFrame(u);

    a.width=1024;
    a.height=h=1024*innerHeight/innerWidth|0;
    // Compresses down to ~830 bytes with Uglify + RegPack
    // Hand minification + RegPack should bring save ~20+ bytes
    t=setInterval(function(){
    a.width=1023;
    a.height=h=1023*innerHeight/innerWidth|0;
    q=80;
    a.style.backgroundColor='hsla('+q+',20%,50%,1)';
    c.font='2em cursive';
    c.textAlign='center';

    // new portion of tracks and position of the next "particle"
    u[t++%1024]=[48*Math.sin(t/511-Math.sin(t/511)),16+Math.random()*h/2|0];


    for(x=0;x<1024;x++){
    k=u[t++%1024]||[0,1024];
    for(x=0;x<=1023;x++){
    // exisiting || new portion of tracks + position of the "particle"
    k = x-1023&&c[t&1023]||[48*Math.sin(t/511-Math.sin(t/511+x/511)),24+Math.random()*h/2|0];
    c[t&1023]=k;
    t++;
    // k=u[t++%1024]||[0,1024];

    //type=k[1]<220?grass:k[1]<255?tree:text;
    l=Math.min(1,4*Math.sin(x*3.1/1024));
    l=Math.sin(1.5*Math.sin(x*3.1/1023));
    s=t&1||-1;
    y=h/2-k[0]-s*k[1];
    z=k[1]%16+4;
    (t%511?t%7?grass:tree:text)(x,y,z,l);

    y=h/2-s*k[1]-k[s=0];

    q=90+(t+y)%60;
    c.save();
    c.translate(x,y);
    c.scale(l,l);
    // (t%511?t%7?grass:tree:text)(x,y,z,l);
    if(t%511){
    if(t%7) {
    // grass
    c.fillStyle='hsla('+q+',50%,'+(y&1?20:99)+'%,1)';
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
    } else {
    // tree
    c.fillStyle='hsla('+q+',50%,20%,.2)';
    c.rotate(Math.sin(y+x/32)/16);
    z=k[1]%16+6;
    c.translate(0,-6*(z+Math.sin(q++)));
    for(;z--;){
    c.beginPath();
    c.lineTo(0,0);
    c.lineTo(-2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
    c.lineTo(2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
    c.fill();
    }
    }
    } else {
    // text
    c.fillStyle='hsla('+q+',50%,99%,1)';
    c.fillText(['JS1k 2015','Trains','No External Data','1kb'][t>>9&3],0,0);
    }
    c.restore();

    // tracks
    if(x&1) {
    if(t&1) {
    q=30;
    c.fillStyle='hsla('+q+',50%,20%,1)';
    s=0;
    y=h/2-k[0]-s*k[1];
    c.fillStyle='hsla('+q+',50%,10%,1)';
    xx=x>>1;
    //if(t+xx&1)
    c.fillRect(x,y-1,t+xx&1,5);
    c.fillRect(x,y,2,1);y+=2;
    c.fillRect(x,y,2,1);y+=2*Math.sin(t/24);
    y=h/2-s*k[1]-k[s=0];

    c.save();
    c.translate(x,y);

    c.fillRect(0,0,t+xx&1,4);
    c.fillRect(0,0,2,1);
    c.fillRect(0,2,2,1);

    // train
    if(!(xx&7) && xx>260 && xx<300){
    c.fillRect(x,y,-14,-8);
    c.fillRect(0,0,14,-7);
    if(xx>290) {
    c.fillRect(x-8,y,-6,-12);
    c.fillRect(0,-5,7,-7);
    // c.fillRect(10,0,2,-9);
    // TODO: puffs of steam
    }
    }
    c.restore();
    }
    }
    t-=1024;
    };
    t-=1023;
    },16)

    u();
    //u();
  27. p01 revised this gist Jan 16, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@


    tree=function(x,y,z,l){
    q=90+(t+y*0+k[1])%60;
    c.save();
    @@ -47,7 +48,7 @@ text=function(x,y,z,l){


    //framesLeft=1000*5;
    texts=['JS1k 2015','1kb','No External Data','Trains','Cross Browser',''];
    texts=['1kb','Cross Browser','JS1k 2015','Trains','No External Data'];
    t=0;
    u=function(x,y,z,l){
    //document.title=framesLeft;if(framesLeft--)
  28. p01 revised this gist Jan 16, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -72,7 +72,7 @@ u=function(x,y,z,l){
    s=t&1||-1;
    y=h/2-k[0]-s*k[1];
    z=k[1]%16+4;
    (t%511?t%8?grass:tree:text)(x,y,z,l);
    (t%511?t%7?grass:tree:text)(x,y,z,l);

    // tracks
    if(x&1) {
  29. p01 revised this gist Jan 16, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@ text=function(x,y,z,l){
    c.scale(l,l);

    c.fillStyle='hsla('+q+',50%,99%,1)';
    c.fillText(texts[(t>>8)%texts.length], 0, 0);
    c.fillText(texts[(t>>9)%texts.length], 0, 0);

    c.restore();
    };
  30. p01 revised this gist Jan 16, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -61,7 +61,7 @@ u=function(x,y,z,l){
    c.textAlign='center';

    // new portion of tracks and position of the next "particle"
    u[t++%1024]=[48*Math.sin(t/512-Math.sin(t/512)),16+Math.random()*h/2|0];
    u[t++%1024]=[48*Math.sin(t/511-Math.sin(t/511)),16+Math.random()*h/2|0];


    for(x=0;x<1024;x++){
    @@ -72,7 +72,7 @@ u=function(x,y,z,l){
    s=t&1||-1;
    y=h/2-k[0]-s*k[1];
    z=k[1]%16+4;
    (t%512?t%8?grass:tree:text)(x,y,z,l);
    (t%511?t%8?grass:tree:text)(x,y,z,l);

    // tracks
    if(x&1) {
    @@ -99,4 +99,4 @@ u=function(x,y,z,l){
    t-=1024;
    };

    u();
    u();