Last active
August 29, 2015 14:13
-
-
Save p01/c66d209fdb74514a2f00 to your computer and use it in GitHub Desktop.
JS1k 2015 Invitation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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