A couple of years ago I was playing around with making animations in p5.js — nothing fancy, mostly enjoying the novelty of getting pixels on screen without writing a testbench first ;). I was clearing out some old files and ran across them, so here they are: rotating squares and a Koch snowflake.
Rotating squares
Pretty simple – thirty squares, each inscribed in the one before. Each square’s corners slide a fraction of the way along the edges of its parent, which tilts it slightly, and makes the inner ones rotate faster. The tilt accumulates into a nice spiral. The slide is eased with a -(cos(PI*t)-1)/2, so the motion is slowed at the corners. The animation is paced such that over 300 frames, the outer square makes a 90° rotation, so it flows smoothly into the next loop. The colors are just an HSB hue ramp spread across the thirty squares.
Koch snowflake
The usual way to draw a Koch curve is recursion at render time. I wanted it to grow, so the sketch precomputes both ends of each step instead: for every generation it stores a point list – each segment split into thirds, with the new middle vertex still sitting on the line, and a ‘bumped’ list with that vertex pushed out to the apex of an equilateral triangle. Animating a generation is then just a lerp between two arrays of the same length, and the bumps grow out of the edges rather than popping into existence.
Finding the apex is one scale and one rotate: take the vector from the midpoint back to the 1/3 point, scale it by √3, rotate it 90° about the midpoint. A state machine then walks generations 0 -> 5, holds for half a second, and walks back down, so the flake breathes in and out. Six generations is the practical limit: generation 5 is already ~3000 points per flake, and there are nine of them nested on screen at different sizes, all slowly rotating.
Be First to Comment