This project is a fusion of randomness and intent—an attempt to create an organic yet controlled motion that feels like butterflies fluttering. I applied Object-Oriented Programming (OOP) to manage multiple independent shapes, each moving uniquely while trying to maintain a cohesive, natural effect. The idea was to make the shapes feel alive, responding to the mouse but still capable of drifting freely when “frozen.”
One of the most challenging aspects of this project was balancing chaos with grace. Randomness is great, but too much of it just looks messy. The trick was tuning the movement—using sinusoidal oscillations for a floating effect, lerp() for smooth transitions, and controlled distortions in the shape formation to make them feel organic rather than purely geometric. The rotation was another challenge; at first, it spun too fast, making everything feel frantic instead of serene. Slowing it down helped create a more elegant, butterfly-like glide.
this.x = lerp(this.x, mouseX - width / 2, 0.1);
this.y = lerp(this.y, mouseY - height / 2, 0.1);
Visually, the metallic look was inspired by an image I saw on Canva. That liquid-metal aesthetic felt perfect for making these abstract shapes shimmer as they rotate. Using specularMaterial() and proper lighting gave them depth.
In the future, I would like to replicate better those 3D metallic shapes and make them appear smoothly while the user presses the mouse.
Very cool! I like how you can collect the “butterflies” by moving the mouse around. I see you’re using the noise() function but with a random offset. You could try smoothly changing the offset instead and you would likely get a smoother change in the shapes. Right now the shape change is very frenetic, which is ok if it’s what you’re going for, but I suspect a smoother motion would be more satisfying. If you mirrored the shape along the vertical axis they would look more like butterflies – right now it looks more like each shape is one of the wings rather than a pair. Nice!