A JS1K competition demo for 2012
Summary
JS1K challenges developers to create compelling JavaScript applications under 1024 bytes, a competition that has grown significantly since its inception. A recent submission showcases an analog clock demo, meticulously compressed to just 1018 bytes. This project effectively renders a functional clock face, including hour, minute, and second hands, numerical markers, and the current date, all while adhering to the stringent byte limit. The provided JavaScript code demonstrates practical techniques for achieving such compact yet feature-rich web applications, serving as an inspiring example for code efficiency.
Recently, I revised a previous project of mine and compressed it to 1018 bytes and submitted it. It is an analog clock. The code is shown below:
w=c.width;h=c.height;x=w/2;y=h/2;r=60;o=window;function D(){M=Math;p=M.PI;W="#FFF";n=new Date();h=n.getHours()%12;m=n.getMinutes();s=n.getSeconds();d=n.getDate();a.arc(x,y,r,0,2*p,false);a.stroke();z=a.createLinearGradient(x-r,y-r,x+r,y+r);z.addColorStop(0,W);z.addColorStop(1,"#DDF");a.fillStyle=z;a.fill();a.fillStyle="#000";a.fillText(12,x-7,y-42);a.fillText(3,x+42,y+4);a.fillText(6,x-3,y+48);a.fillText(9,x-48,y+4);for(i=0;i<60;i++){g=i*p/30;B=M.sin(g);C=M.cos(g);a.beginPath();a.moveTo(x+53*B,y-53*C);a.lineTo(x+59*B,y-59*C);a.strokeStyle="GREY";a.stroke();}a.rect(x+20,y-5,16,10);a.stroke();a.fillText(d,x+22,y+4);N=m*60+s;S=p*(h*3600+N)/21600;j=M.sin(S);k=M.cos(S);a.beginPath();a.moveTo(x-12*j,y+12*k);a.lineTo(x+28*j,y-28*k);a.stroke();U=p*N/1800;l=M.sin(U);n=M.cos(U);a.moveTo(x-20*l,y+20*n);a.lineTo(x+40*l,y-40*n);a.stroke();V=p*s/30;u=M.sin(V);v=M.cos(V);a.beginPath();a.moveTo(x-14*u,y+14*v);a.lineTo(x+46*u,y-46*v);a.lineWidth=2;a.strokeStyle="red";a.stroke();a.closePath();setTimeout("D()",1000);}D();
The demo can be found on http://js1k.com/2012-love/demo/1251 . If you are interested in joining this competition, please visit its official website JS1K.
No comment for this article.