JS1024 is an annual JavaScript code golfing competition where the goal is to make 1 kilobyte demos. The theme for this year was “Creepy” and I submitted 3 separate projects. I ended up winning 1st place and all 3 of my entries were in the top 10!
This was my 5th time entering the competition and I created 3 separate 1k programs. Each of these takes a few days to make and are a ton of fun. I highly recommend giving it a shot next year if you enjoy programming.
Ant1k Attack
For this game I tried to achieve realistic pseudo 3D graphics and AI behavior. I was also inspired by the classic SNES game Gnat Attack. While living in Austin Texas we’ve been overrun by fire ants and they are a serious menace to humans and animals alike. I had been experimenting with making ants on dwitter and thought I could use that code as the core component to build a game around. This game won 1st place overall and in the JS category! You can play live it right here…
Stormy Window
It was a dark and stormy night… This demo simulates an animated view through a stormy window. It uses a combination of several different techniques including procedural mountains, rain, droplets, and lightning. The view is different every time it is run and resized to match the containing window. Maybe it could be a nice screensaver or desktop background? It also won 5th place overall!
Flood Lines
This was an experiment to see what kind of generative art I could make in only 1 kilobyte of code. Unlike my other projects, this one uses the more restrictive rule of being a pure HTML file so the space is even more tight. Everything fits in a single 1k HTML file. Due to the nature of the competition I wasn’t expecting high ranks for this one but still managed to 10th place, so it was a real honor to have all 3 of my projects in the top 10.
After all that you might be wondering how big 1K of code actually is. So here is the entire HTML program for Flood Lines. It looks a bit weird because it is mostly a self uncompressing string of Unicode characters, but should load just fine in any modern web browser. This is it…
<body id=b style=margin:0><canvas id=a><script>for(_='.5YT(X+X)-YQ99PQ)?P:O<1?1:N)**2, eight =X X)< = Y?0: 1e)}/2*Math.sin(Dcos(D=inner=2*(a.=(},,c.fill*h/9|0)=[], =t. )=> {x:0,1,y:0for(&&.length),.push(T,y:t,j:e,w:n,g:l,i,h:JwidthWidthKh H L M f o=Date.now(I=0s=[-y:1y:-1}],TT=1,t=0 t+((ooo^=o<<13)^o>>>17)^o<<5)>>>0)**32*(T-tRT,t,e,n,l,i,r {if(0<(T+=e)&0<(t+=n)&T<J&t<K){h=6;h--!L[(T+e+(t+n*J];);h<0(L[(0|T)+(0|t)*J]=1,!f||T>=Ht>=HT<J-Ht<K-H?Mr}):fP-w})S=t=>{k=t;k;)l=0|Xk--[t[k],t[l]]=[t[l],t[k]]U {x-4y .05dX C .4 D.785,E1:X2F 5e-4I+ -330;U(c=a.getContext`2d`H P,400wP,G-6L=J*K,S(sR(J,K,v85wsetInterval(( {!Mf(M=f,I+ 9270U(f=0)e=1e4;e--M;){ GU( xS(M yS(s d(D+X2)-E)*Ct=M.pop(m x,n y,p= Ff?v:t.gQ,q=P<(q iOqNq,r=P<(r hOrNrStyle=`hsl(${p+X9)+I${q-X5%,${r-X9%)`Rect(m-Y,n-Y,1Y,1Y);u of s)R(m,n,u.x)-u.yu.x)+u.yp,q,r9)';G=/[- N-QXY]/.exec(_);)with(_.split(G))_=join(shift());eval(_)</script>For this experiment I started with trying to reduce one of my other longform generative artworks ROIL down to it’s core essentials. Basically it works by using something like the flood fill algorithm but with branching and mutation. This project also uses a randomized seed so it’s different every time and even has some traits that completely change the appearance. It produces results to match the resolution of the containing window which greatly effects the final look. Here are a few results that show off the variety of the algorithm…
Wrap Up
Thanks for reading all about my 1k projects! You can check out my special TinyCode GitHub page to see more of my size coding experiments. Also, I challenge you to make something of your own for the next js1024 competition. See you there!
Leave A Comment