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" />
<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 ~830 bytes with Uglify + RegPack
// Hand minification + RegPack should bring save ~20+ bytes
t=setInterval(function(){
a.width=1023;
a.height=h=1023*innerHeight/innerWidth|0;
q=80;
a.style.backgroundColor='hsla('+q+',20%,50%,1)';
c.font='2em cursive';
c.textAlign='center';
for(x=0;x<=1023;x++){
// exisiting || new portion of tracks + position of the "particle"
k = x-1023&&c[t&1023]||[48*Math.sin(t/511-Math.sin(t/511+x/511)),24+Math.random()*h/2|0];
c[t&1023]=k;
t++;
// k=u[t++%1024]||[0,1024];
//type=k[1]<220?grass:k[1]<255?tree:text;
l=Math.sin(1.5*Math.sin(x*3.1/1023));
s=t&1||-1;
y=h/2-s*k[1]-k[s=0];
q=63+(t+y&63);
c.save();
c.translate(x,y);
c.scale(l,l);
// (t%511?t%7?grass:tree:text)(x,y,z,l);
if(t%511){
if(t%7) {
// grass
c.fillStyle='hsla('+q+',50%,'+(y&1?20:99)+'%,1)';
c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
c.fillRect(2*Math.sin(q++),Math.sin(q++),1,4);
} else {
// tree
c.fillStyle='hsla('+q+',50%,20%,.2)';
c.rotate(Math.sin(y+x/32)/16);
z=k[1]%16+6;
c.translate(0,-6*(z+Math.sin(q++)));
for(;z--;){
c.beginPath();
c.lineTo(0,0);
c.lineTo(-2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
c.lineTo(2*(z+Math.sin(q++)),6*(z+Math.sin(q++)));
c.fill();
}
}
} else {
// text
c.fillStyle='hsla('+q+',50%,99%,1)';
c.fillText(['JS1k 2015','Trains','No External Data','1kb'][t>>9&3],0,0);
}
c.restore();
// tracks
if(t&1) {
q=30;
c.fillStyle='hsla('+q+',50%,10%,1)';
xx=x>>1;
y=h/2-s*k[1]-k[s=0];
c.save();
c.translate(x,y);
c.fillRect(0,0,t+xx&1,4);
c.fillRect(0,0,2,1);
c.fillRect(0,2,2,1);
// train
if(!(xx&7) && xx>260 && xx<300){
c.fillRect(0,0,14,-7);
if(xx>290) {
c.fillRect(0,-5,7,-7);
// c.fillRect(10,0,2,-9);
// TODO: puffs of steam
}
}
c.restore();
}
}
t-=1023;
},16)
//u();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment