// Compresses down to ~1020 bytes with Uglify + RegPack
 
(u=function(){
  requestAnimationFrame(u);
  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,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) {
      // Adjust the color based on the Y coordinate
      q+=Y&31;
      c.fillStyle='hsl('+q+',55%,200%)';
      if (H%511) {
        // 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))) {
          // 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);
            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 "particle"
        c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][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){
        // wagons
        X-=10;
        c.fillRect(X,Y,20,-10);
        // locomotive
        if(x<511){
          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;
          z=9;
          for(;z--;){
            c.fillRect(X+Math.sin(q++)*3,Y-6*z+Math.sin(q++)*3,z,z);
          }
        } else {
          w-=15;
        }
      }
    }
  }
 
  // Cut out JS1k typography
  c.globalCompositeOperation='destination-in';
  H=Math.sin(H/511/2+10)*31+31;
  H=H<3?9:H*H;
  c.translate(511,h/2);
  c.rotate(H/511+.1);
  c.scale(H,H);
  X=Y=-3;
  c.beginPath();
  // 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);
  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();
})()