HOW TO INTERACT
Step 1: Click directly inside the sketch canvas above to activate keyboard controls.
Step 2: Press the Right Arrow (➔) to accelerate the animation.
Step 3: Press the Left Arrow (
) to slow it down.
How it works: I used Gemini to transform this old Processing sketch into P5.js. This creative coding sketch generates a dynamic, mathematical grid of rotating, intertwined shapes on a dark blue background. The movement of the elements is driven by calculating a shifting angle for each cell using trigonometric sine and cosine functions tied to the sketch’s continuous frame count. By using the keyboard arrow keys, the user can manually alter the frame rate, directly accelerating or slowing down the overall speed and rhythm of the animation.
Tech Stack: p5.js Processing
How the Code Works
This sketch creates a moving pattern by arranging 400 shapes into an even grid. Here are the two main parts of the code that make it happen:
1. Making Things Move in Circles
Uses basic math (sine and cosine waves) to turn the passage of time into circular motion.
let tempX = x + (size / 3) * sin(PI / frame_rate_value * finalAngle);
let tempY = y + (size / 3) * cos(PI / frame_rate_value * finalAngle);2. Calculating the Grid Size
Automatically calculates the size of each grid square so everything fits nicely on the screen.
let cellsize = (width - (2 * margin) - gutter * (num - 1)) / (num - 1);