Skip to content

Instantly share code, notes, and snippets.

@p01

p01/index.html

Last active August 29, 2015 14:13
Show Gist options
  • Save p01/c66d209fdb74514a2f00 to your computer and use it in GitHub Desktop.
Save p01/c66d209fdb74514a2f00 to your computer and use it in GitHub Desktop.
Download ZIP
JS1k 2015 Invitation
Raw
index.html
<!doctype html>
<html>
<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 */
</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>
Raw
test.js
// 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);
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;
// 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];
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=170;
q+=H+Y&31;
if (H%511) {
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
z=c[H&1023][1]%15+6;
c.globalAlpha=.3;
Y-=z*6;
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.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.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+',60%,200%)';
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment