JS1K logo

I recently endeavoured to take part in the JavaScript challenge website JS1K. Basically submit something that is 1024 bytes or less. Some of the entries are quite astounding. For me it’s rare to have the chance to build a game or animation, something out of my comfort zone. I set about with my own idea.

After having completed it in what I thought was enough characters I was met with dismay when I realised it was 1,900 bytes. Around 900 bytes over the limit.

Needless to say, I was devastated, but before I decided to throw in the towel and mark the competition impossible I thought I’d have a try at optimising my code. Could not hurt to try. Who knows right?

On the first iteration I improved it by 100 bytes. I was relatively pleased. How had I missed this first time I wondered.

On the second iteration another 100 bytes. Again I felt pleased and somewhat confused.

After the third I managed to improve 200 bytes at once. I had now removed a total of 400 of the 900 bytes and was beginning to realise the skill in this competition.

It’s not just the program you write, but also your desire to ITERATE over your own code a dozen times (or more if it takes it) until you have optimised and thought through every single character. So that’s what I did. Unscrupulously going over every line again and again until it was enough, I got to 994 bytes. Removing almost 1000 bytes.

The end result is below:

for(MR=Math.random,MI=(()=>2*Math.PI),cht=innerHeight,cwh=innerWidth,S=(c=>c.stroke()||c),bp=((c,e)=>(c.beginPath(),e&&(c.fillStyle=e),c)),d=3,np=cht*cwh/(100*d),cA=[],crA=["#00f","#6f77ec"],B=((e,r,t,i,l)=>{var y=crA[~~(2*MR())];return()=>{e+=t,r+=i,c=bp(c,y),c.arc(e,r,l,0,MI(),!1),c.fill()}}),C=(()=>{for(requestAnimationFrame(C),c.fillStyle="black",c.fillRect(0,0,cwh,cht),r=150,eR=20,mA=90,c=bp(c,"yellow"),c.arc(cX,cY,r,0,MI(),!1),c.fill(),c.lineWidth=5,c.strokeStyle="black",c=S(c),c=bp(c,"black"),c.arc(eyX,eyY,eR,0,MI(),!1),eT=cX+eX,c.arc(eT,eyY,eR,0,MI(),!1),c.fill(),c=bp(c),c.arc(cX,cY,mA,0,Math.PI,!1),c=S(c),xL=xS+100,yL=yS+100,bX!=xL&&bX++,bY!=yL&&bY++,c=bp(c),c.lineWidth=10,c.strokeStyle="#A00",c.moveTo(xS,yS),c.arc(bX,bY,3,0,MI()),c=S(c),i=1;i<cA.length;i++)cA[i]()}),eX=55,cY=cht/2,cX=cwh/2,eyX=cX-eX,eyY=cY-eX,xS=eyX-50,yS=eyY-50,bX=xS,bY=yS,cA=[],X=(()=>.5*(MR()-.5)),Y=(c=>MR()*(c-2*r)),i=1;i<np;i++)r=3*MR()+1,x=Y(cwh),y=Y(cht),dx=X(),dy=X(),cA.push(B(x,y,dx,dy,r));C();

Hard to read eh, the link to my animation is https://js1k.com/2018-coins/demo/3038.

Lets go over the lessons that I took from this experience.