p01 · August 29, 2015 14:13
diff --git a/readme.md b/readme.md
diff --git a/index.html b/index.html

 <!doctype html>
 <html>
 	<head>
 		<title>...</title>
 		<meta charset="utf-8" />
    <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>
 	</body>
 </html>
diff --git a/test.js b/test.js

 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>>8)%texts.length], 0, 0);

  c.restore();
 };
 
 
 
 //framesLeft=1000*5;
 texts=['JS1k 2015','1kb','No External Data','Trains','Cross Browser',''];
 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;
  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];
 
    //type=k[1]<220?grass:k[1]<255?tree:text;
    l=Math.min(1,4*Math.sin(x*3.1/1024));
    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);
 
    // tracks
    if(x&1) {
      q=30;
      c.fillStyle='hsla('+q+',50%,20%,1)';
      s=0;
      y=h/2-k[0]-s*k[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);

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

	<!doctype html>
	<html>
	<head>
	<title>...</title>
	<meta charset="utf-8" />
	<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>
	</body>
	</html>

	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>>8)%texts.length], 0, 0);

	c.restore();
	};



	//framesLeft=1000*5;
	texts=['JS1k 2015','1kb','No External Data','Trains','Cross Browser',''];
	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;
	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]=[48Math.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];

	//type=k[1]<220?grass:k[1]<255?tree:text;
	l=Math.min(1,4Math.sin(x3.1/1024));
	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);

	// tracks
	if(x&1) {
	q=30;
	c.fillStyle='hsla('+q+',50%,20%,1)';
	s=0;
	y=h/2-k[0]-s*k[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);

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

	u();