index.html

## readme.md

      
        

          Raw
        
        
          
            
          
          
            
              readme.md
            
          
        
      
    
  
    Test page

  

  

## index.html
<!doctype html>
<html>
	<head>
		<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; }
      #c { display: block; } /* kill scrollbars from hell */
    </style>
	</head>
	<body>
		<canvas id="c"></canvas>
		<script>
			var a = document.getElementsByTagName('canvas')[0];
			var b = document.body;
      var d = function(e){ return function(){ e.parentNode.removeChild(e); }; }(a);
      // unprefix some popular vendor prefixed things (but stick to their original name)
      var AudioContext =
        window.AudioContext ||
        window.webkitAudioContext;
      var requestAnimationFrame =
        window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(f){ setTimeout(f, 1000/30); };

      // fix bug in safari: http://qfox.nl/weblog/218
      document.body.clientWidth;
      // auto resize (original) canvas. call `onresize(w,h) to limit the size of the canvas
      (window.onorientationchange = window.onresize = function(a){
        var mw = Infinity;
        var mh = Infinity;
        var min = Math.min;

        return function(w,h){
          if (arguments.length === 2) {
            mw = w;
            mh = h;
          }
          a.style.width = (a.width = min(mw, innerWidth)) + 'px';
          a.style.height = (a.height = min(mh, innerHeight)) + 'px';
        };
      }(a))();

      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>

## test.js
// 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();
})()