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 ~760 bytes with Uglify + RegPack
t=setInterval(function(){
q=170;
a.width=x=1023;
a.height=h=x*innerHeight/innerWidth|1;
a.style.background='hsl('+q+',20%,55%)';
c.font='2em cursive';
H=t++;
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]||[Math.sin(H/510-Math.sin(H/510*3)*3)*48,8+Math.random()*h/2];
Y=s*c[H&1023][c.globalAlpha=1]+c[H&1023][0]+h/2;
X=510+(510-x)*(1+Y/h);
q=170;
if (s) {
// "particles"
q+=Y&31;
c.fillStyle='hsl('+q+',55%,200%)';
if (H%510) {
// grass
if (Y&1)
c.fillStyle='hsl('+q+',55%,20%)';
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++)*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);
if (!(H%(9+Math.sin(H/510/3)*3|1))) {
// tree
z=Y&15;
z+=6;
Y-=z*6;
c.globalAlpha=.3;
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.fillText(['February 2015','JS1k 2015','Cross browser','1kb'][H/510&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==510+15*2 || x==510+15 || x==510) {
z=10;
c.fillRect(X,Y,20,-10);
if(x==510) {
c.fillRect(X,Y,10,-15);
X+=15;
c.fillRect(X,Y,2,-15);
c.fillStyle='hsl('+q+',55%,200%)';
c.globalAlpha=.3;
q=H;
for(;z--;){
c.fillRect(X+Math.sin(q++)*3,Y-z*6+Math.sin(q++)*3,z,z);
}
}
}
}
}
},15);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment