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 ~840 bytes with Uglify + RegPack
t=setInterval(function(){
c.save();
l=innerWidth/1023;
h=innerHeight/l;
c.scale(l,l);
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];
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);
c.scale(l,l);
if (x%3) {
q=30;
q+=H+y&63;
if (H%511) {
c.fillStyle='hsl('+q+',50%,20%)';
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=H/24;
c.rotate(Math.sin(q++)/24);
z=c[H&1023][1]%15+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();
}
}
} else {
// text
c.fillStyle='hsl('+q+',50%,200%)';
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%)';
c.fillRect(0,0,1,5);
c.fillRect(0,0,5,1);
c.fillRect(0,2,5,1);
// train
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+=H+y&63;
for(;--z;){
c.fillRect(-2*z+Math.sin(q++)*3,-6*z+Math.sin(q++)*3,z,z);
}
}
}
}
c.restore();
}
c.restore();
},16);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment