
When Math Becomes Alive: Creating a Beautiful Canvas Animation with p5.js
There’s something magical about watching mathematics come to life. Not in a classroom. Not in a textbook. But glowing, swirling, evolving — right on a canvas. Recently, I built a generative animation using p5.js that turns pure math into an organic, living form. And honestly? It’s way more fun than grinding through DSA problems. 🎨 The Idea: Math as an Organism Instead of drawing predefined shapes, this animation generates thousands of points per frame — each one positioned using trigonometry, wave functions, and distance calculations. The core idea is simple: Use cosine and sine waves to create oscillations Use polar-style transformations to rotate structures Use time (t) to animate everything Use HSB color mode to make it glow and evolve Each frame draws 10,000 points. Each point is placed using math. Together, they form something that feels… alive. 🧠 The Mathematical Heart Here’s the core function that generates the organism: function organism(x, y) { let k = 5 * cos(x / 14) * cos(y
Continue reading on Dev.to Webdev
Opens in a new tab


