After years of no coding any chunk of code, last year I decided make something for js1k contest. Javascript is not a programming language I love so much for size coding competition like this. I prefer compiled coding, where you can optimize for sizing using op-codes and data types more than semantic-based tricks like the case. Beside that, it’s funny and addictive! Nice language tricks can be implemented, i’ve spent more than one day renaming, un-looping and re-sorting code to win some bytes.

This time contest had the “Love” theme, not a mandatory requirement in the rules, but good if the production has any kind of relationship with the theme. Texel, yesteryear friend and same city neighbor, already released his Rose when my coding started. My prod needed to be classy and original to have any chance.

I took the decision of doing something with particles. Particles are always impressive when there are complicate interactions between them. Easy to code with minimal interaction, increasing difficulty when introducing physics like collisions, springs, temperature, densities or viscosity effects.

The code is a very basic parameters init plus a single loop function.

with(m=Math)C=cos,S=sin,R=random;A=c.width=c.height=700;
k=t=0;p=[];a.globalCompositeOperation="lighter";b.bgColor=h='#000';

123 chars to compress several Math object calls to single letters, adjust the canvas size and change the composite render type to “lighter”. This last operation will make possible the blending between particles.

All particles data is stored in a single float array (p), with 9 positions for every particle. First three ones for X,Y,Z coordinates in space, next three for velocities and the last three for the next calculated movement (delta). By looping through all the array on every frame we can achieve the main particle animation in four steps:

1. Checking if the particle is within the render limits, made with 6 basic comparisons. If the particle achieves any bound limit, the position is fixed to this limit (kind of crash with the walls).
2. Calculate if the particle touchs the “heart” 3D equation:

   u=1.5; x*=x*u; y*=u; z*=z*u;
   if (m.pow(x+9*z/4+y*y-1,3)+x*y*y*y+9*z*y*y*y/80)>0)

3. Interact with all the other particles in the array. By looping again through the remaining positions in the array, and calculating the distance between current particle and the one checked, we can use a tweaked Hooke law to achieve particle interaction and simulate kind of liquid or flow process. The result is stored in the lasts 3 positions of the array reserved for the current particle, this is the delta movement that will be processed on the next frame.

   J=p[T++]-p[I++]; K=p[T++]-p[I++]; L=p[T++]-p[I++];
   D=J*J+K*K+L*L; 
   if (D<0.01&&D) {D=m.sqrt(D); M=(.3-D)*.01/D;}

4. Make the render. Update the array (positions and speeds), make the 3D rotation in space and project the 3D coordinates to the screen with the focal distance to the camera. Once we got the 2D coordinates the particle is drawn as a circle with a gaussian gradient. This gradient combined with the globalAlpha property set before, makes a blending between particles when they’re close together, simulating a fake liquid. 

   G=a.createRadialGradient(x,y,0,x,y,s);
   G.A=G.addColorStop;G.A(0,'#FF0080');
   G.A(.15,'#DF0070');
   G.A(.5,'#800040');
   G.A(.85,'#200010');
   G.A(1,h);

   

And that’s it. I’ve used JSCrush to compress the code, getting it down to 1024 bytes.

Hope you’ve enjoyed the explanation. This year the contest runs again with “spring” theme. I’ve already submitted a new demo, completely different from anything done before, check it!