Skip to content

Instantly share code, notes, and snippets.

@p01

p01/index.html

Last active August 29, 2015 14:13
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • 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>JS1k 2015 Invitation by Mathieu 'p01' Henri</title>
<meta charset="utf-8" />
<meta name="author" content="Mathieu 'p01' Henri, @p01"/>
<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>
<script>onclick=function(){location.href='http://www.p01.org/releases/JS1K_2015_invit/';}</script>
</body>
</html>
Raw
test.js
// Compresses down to ~1020 bytes with Uglify + RegPack
(u=function(){
requestAnimationFrame(u);
a.width=x=1023;
a.height=h=x*innerHeight/innerWidth|1;
H=performance.now()/15|1;
c.textAlign='center';
c.font='2em cursive';
q=170;
c.fillStyle='hsl('+q+',20%,55%)';
c.fillRect(0,0,1023,h);
w=555;
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]||8+Math.random()*h/2;
// Y coordinate & parallax
Y=Math.sin(H/511-Math.sin(H/511*3)*3)*48+s*c[H&1023]+h/2;
X=1023-x+(511-x)*Y/h;
c.globalAlpha=1;
q=170;
// "particles"
if (s) {
// Adjust the color based on the Y coordinate
q+=Y&31;
c.fillStyle='hsl('+q+',55%,200%)';
if (H%511) {
// GRASS "particle"
// Adjust the color based on the Y coordinate, again
if (Y&1)
c.fillStyle='hsl('+q+',55%,20%)';
// vertical strands of 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);
// little bits of grass
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);
// TREE "particle"
// wih varying intensity of the forest
if (!(H%(9+Math.sin(H/511/3)*3|1))) {
// Get the height of the tree
z=Y&15;
z+=6;
Y-=z*6;
c.globalAlpha=.3;
// Draw multiple triangles to make up a pine tree
for (;z--;) {
c.beginPath();
c.lineTo(X,Y);
c.lineTo(X-2*z+Math.sin(q++)*3,Y+6*z+Math.sin(q++)*3);
c.lineTo(X+2*z+Math.sin(q++)*3,Y+6*z+Math.sin(q++)*3);
c.fill();
}
}
} else {
// TEXT "particle"
c.fillText(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&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==w){
// wagons
X-=10;
c.fillRect(X,Y,20,-10);
// locomotive
if(x<511){
c.fillRect(X,Y,10,-15);X+=15;
c.fillRect(X,Y,2,-15);
// steam
c.fillStyle='hsl('+q+',55%,200%)';
c.globalAlpha=.3;
q=H;
z=9;
for(;z--;){
c.fillRect(X+Math.sin(q++)*3,Y-6*z+Math.sin(q++)*3,z,z);
}
} else {
w-=15;
}
}
}
}
// Cut out JS1k typography
c.globalCompositeOperation='destination-in';
H=Math.sin(H/511/2+10)*31+31;
H=H<3?9:H*H;
c.translate(511,h/2);
c.rotate(H/511+.1);
c.scale(H,H);
X=Y=-3;
c.beginPath();
// J
c.moveTo(X,Y);
c.arc(X-2,Y+3,2,0,Math.PI/2,0);
// S
X+=2;
Y+=4;
c.moveTo(X,Y);
c.arc(X,Y-1,1,Math.PI/2,Math.PI/2*3,1);
c.arc(X,Y-3,1,Math.PI/2,Math.PI/2*3,0);
// 1
X+=3;
c.moveTo(X,Y);
c.arc(X-2,Y-5,2,0,Math.PI/2,0);
// k
X+=2;
c.moveTo(X,Y);
c.lineTo(X,Y-6);
X+=3;
c.moveTo(X,Y);
c.arc(X-1,Y-2,1,Math.PI/2*3/2,Math.PI/2*3,0);
c.stroke();
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment