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>...</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> |
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 ~1030 bytes with Uglify + RegPack | |
| setInterval(function(){ | |
| a.width=x=1023; | |
| a.height=h=x*innerHeight/innerWidth|1; | |
| c.textAlign='center'; | |
| H=performance.now()/15|1; | |
| c.font='2em cursive'; | |
| q=170; | |
| c.fillStyle='hsl('+q+',20%,55%)'; | |
| c.fillRect(0,0,1023,h); | |
| w=511+15*3-1; | |
| n=4; | |
| 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=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; | |
| if (s) { | |
| // "particles" | |
| q+=Y&31; | |
| c.fillStyle='hsl('+q+',55%,200%)'; | |
| if (H%511) { | |
| // 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/511/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(['Cross browser','1kb demos','February 2015','JS1k 2015'][H/511&3],X,Y); | |
| // c.fillText('Cross browser31kb demos3February 20153JS1k 2015'.split(3)[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&&n--){//511+15*3-1 || x==511+15*2-1 || x==511+15-1 || x==511-1) { | |
| w-=15; | |
| z=10; | |
| c.fillRect(X,Y,20,-10); | |
| if(!n){//(x==511-1) { | |
| 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); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| c.globalCompositeOperation='destination-in'; | |
| z=H/511*48-128 | |
| if(z<3)z=3; | |
| z*=z; | |
| c.translate(511,h/2); | |
| c.scale(z,z); | |
| X=Y=-3; | |
| q=Math.PI/2; | |
| c.beginPath(); | |
| c.rotate(z/511); | |
| // j | |
| c.moveTo(X,Y); | |
| c.arc(X-2,Y+3,2,0,q,0); | |
| // s | |
| X+=2; | |
| c.moveTo(X,Y+4); | |
| c.arc(X,Y+3,1,q,q*3,1); | |
| c.arc(X,Y+1,1,q,q*3,0); | |
| // 1 | |
| X+=3; | |
| c.moveTo(X,Y+4); | |
| c.arc(X-2,Y-1,2,0,q,0); | |
| // k | |
| X+=2; | |
| c.moveTo(X,Y-2); | |
| c.lineTo(X,Y+4); | |
| c.moveTo(X+3,Y+4); | |
| c.arc(X+2,Y+2,1,q*3/2,q*3,0); | |
| c.stroke(); | |
| // Hum yeah, regular text won't cut it. It's too browser+platform dependent | |
| // c.textBaseline='middle'; | |
| // c.font=z*z+'em cursive'; | |
| // c.fillText(' JS1k',511,h/2); | |
| },15); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment