← gallery

Shoal of parametric squid — 40,000 transparent points per frame

Same recipe as the original tweet: one big placement curve × a small local motif × time-modulated nonlinear scaling. No sprites, no randomness, no images.
Turn layers off one at a time — that's literally the order the sketch was built in: mantle → fins → head → eyes → arms → tentacles.
▸ the readable source (how each squid is assembled) 





 ▸ the tweet-sized version (~430 chars, p5.js)
 








About the math



Jet propulsion. Squids move by squeezing: the mantle
deforms on a cycle (stretch, then contract) and the body stretches forward on each
jet. Watch the rhythm — that's the equation breathing.


Point-cloud bodies. Each squid is thousands of points in
bucketed regions — mantle, fins, head, eyes, arms, tentacles — each bucket with its
own deformation rules driven by sine functions of time and position.


Schooling. A shared sinusoidal path field plus individual phase
offsets produces shoaling: together, but never identical. Hit startle! to break the
school apart and watch it re-form.






"
Preview
Code

Here's the shoal. Same three-layer recipe, retargeted to squid anatomy.

What carried over from the original
Original trick	Squid version
i % 16 groups points	i % S picks which squid
* 13 phase offset	g * TAU / S spaces them along the curve
99*sin(c), 99*sin(4c)	Lissajous 1:2 placement curve
sin(t/2+m) pulsation	q = sin(1.7t + 2.1g) — the jet pulse
p = d**sin(...) scaling	per-part nonlinear deformation driven by q
transparent overlapping points	additive pixel buffer with persistence
The key additions squid needed

1. Orientation. Flowers are radially symmetric, so the original never needed a heading. A squid must point where it's going, so I take the analytic tangent of the placement curve:

javascript
Copy code
A = atan2(2*AY*cos(2*c + PHI), AX*cos(c)) + PI
Open in CodePen 

The + PI flips it so arms trail behind, which is how squid actually swim — mantle first.

2. Deterministic sampling instead of i-driven trig. The flower motif got its shape from cos(5i)*sin(i); for a filled body I needed even coverage of a 2D region, so I used golden-ratio low-discrepancy sequences:

javascript
Copy code
u = fract(ii * 0.6180339887);   // along the body
v = fract(ii * 0.7548776662);   // across it
Open in CodePen 

These look random but are perfectly stable frame to frame, so the body doesn't shimmer.

3. Bucketing into body parts. ii % 1000 splits the point budget: ~52% mantle, 12% fins, 6% head, 6% eyes, 18% arms, 6% tentacles. Toggle the chips to peel the layers off in build order.

4. The jet pulse as one shared variable. q simultaneously squeezes the mantle width, stretches its length, folds the arms into a streamlined cone, and adds a forward surge to c — so contraction and acceleration are physically coupled, from a single sine.

5. Two nice cheats worth stealing:

The pupil is drawn as an annulus (rad = 0.048 + 0.042*w) — the dark centre is just where no points land.
The mantle rim is brighter because |2v-1|^0.62 pushes samples toward the edges, mimicking how ink pools at a watercolour boundary.

Your reference image had those dotted chromatophore fields, so the mantle and arms carry speckle tests — fract(137.5u + 61.8v) < 0.15 for skin dots, fract(16u) < 0.22 for arm suckers.

The second 
 panel has a ~430-character tweet version. At that size only mantle, fins, and the eight arms survive — eyes and feeding tentacles are the first casualties of golfing.

The movement is still very rigid. Can you make it look like a real squid swinging?

Rigid is the right diagnosis — everything was on rails. Position came from a parametric curve, so the squid could never accelerate, coast, or turn late. Real squid jet in sharp impulses and then glide, and their arms lag behind the body.

That means giving up the pure-math placement curve for actual integration. Let me verify the physics is stable before rendering:

Code Sandbox
mkdir -p /tmp/sq && cat > /tmp/sq/sim.js <<'EOF' const PI=Math.PI,sin=Math.sin,cos=Math.cos,atan2=Ma...

Boundary escapes — a squid at 345 px/s can't out-turn its own momentum. Tightening the margin and adding flow-based recovery:

Code Sandbox
cd /tmp/sq && sed -i 's/const M=110,K=2.6;/const M=190,K=5.5;/' sim.js && sed -i 's/s.av+=da\*7.5\*D...
Code Sandbox
cd /tmp/sq && sed -i 's|s.vx\*=dr; s.vy\*=dr; s.x+=s.vx\*DT; s.y+=s.vy\*DT; s.sp=sp;|s.vx*=dr; s.vy*...

Zero escapes, speeds ranging 17→276 px/s (coasting vs. darting). Now the full rebuild:

Web App Builder
"




Jet-Propelled Squid Shoal




Shoal of jet-propelled squid — impulse physics + lagged arms


No placement curve any more. Each squid integrates thrust, drag and momentum; the arms sample the body's past heading, so they trail and whip instead of rotating rigidly.




 

 
 

 


 

 

 

 

 

 

 

 

 


 


 

 
 
 
 

 

 
 
 

 
Watch one squid: mantle balloons while it coasts, then snaps shut and it launches. Arms flare open on the refill, spear shut on the jet.

 





▸ what changed, in code