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 ~860 bytes with Uglify + RegPack
t=setInterval(function(){
c.save();
l=innerWidth/1023;
h=innerHeight/l|0;
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';
for(x=0;x<=1023;x++){
s=t++&1||-1;
// exisiting || new portion of tracks + position of the "particle"
c[t&1023]=x-1023&&c[t&1023]||[Math.sin(t/511-Math.sin(t/511*3))*48,8+Math.random()*h/2|0];
y=h/2-s*c[t&1023][1]-c[t&1023][s=0];
l=Math.sin(Math.sin(x/511*3/2)*3/2);
q=30;
q+=t+y&63;
c.save();
c.translate(x,y);
c.scale(l,l);
if(t%511){
c.fillStyle='hsl('+q+',50%,20%)';
if(t%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
c.rotate(Math.sin(q++)/24);
z=c[t&1023][1]%16+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','No external data','Ends April 2015'][t>>9&3],0,0);
}
c.restore();
// tracks
if(t&1) {
q=30;
c.fillStyle='hsl('+q+',50%,20%)';
y=h/2-s*c[t&1023][1]-c[t&1023][s=0];
c.save();
c.translate(x,y);
y=x>>1;
c.fillRect(0,0,t+y&1,4);
c.fillRect(0,0,2,1);
c.fillRect(0,2,2,1);
// train
if(!(y%9) && x>511 && x<511+99){
c.fillRect(0,2,8,-10);
c.fillRect(0,2,-8,x>580?-15:-10);
if(x>580) {
c.globalAlpha=.3;
z=9;
// q=y+x/12;
q+=t+y&63;
for(;z--;){
c.fillRect(-2*z+Math.sin(q++)*3,-6*z+Math.sin(q++)*3,z,z);
}
}
}
c.restore();
}
}
t-=1023;
c.restore();
},16);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment