Overview
Mindful Circles began as a simple creative-coding experiment that grew into something unexpectedly soothing. I wanted to explore how motion, physics, and visual rhythm could create a sense of calm, not just for the user, but also during the act of building it.
The idea was straightforward: circles that move, react, and subtly follow a central point. But as the sketch evolved, I noticed how the motion almost mirrored the process of finding focus - chaos gradually easing into flow. It became part relaxation tool, part art piece, part proof of how even small coding projects can carry emotion and presence.
Technical Details
This project was built using p5.js, the JavaScript library that makes creative coding accessible and intuitive. The canvas automatically adjusts to any screen size and responds to both mouse and touch input.
Core Files:
index.html – Sets up the page structure and imports p5.js.
style.css – Fixes the canvas to the full viewport for a seamless experience.
sketch.js – Handles all logic: circle creation, attraction and repulsion, and easing motion for the central “special” circle.
Core Features:
Dynamic animation loop using the draw() function for smooth rendering.
Physics-inspired motion, where circles attract toward the centre when untouched but repel when the user interacts.
Colour and light layering using subtle transparency and shadows for depth.
Responsive layout that adapts to window size.
Through building this, I deepened my understanding of vector forces, easing, and interactive animation. More importantly, it reminded me how code can become an emotional medium — not just a technical one.
Results
Creating Mindful Circles helped me reconnect with the “why” behind my coding practice: curiosity, play, and the quiet joy of seeing something move because of a few lines of code.
The end result feels more like an ambient experience than a traditional game. The motion draws attention gently, encouraging the user to pause, move slowly, and breathe. It’s also a reminder that learning can be meditative - even when it happens one small experiment at a time.
If I continue developing it, I’d like to explore:
- Adding a soundscape or ambient tones that react to motion.
- Introducing gentle visual transitions or theme variations.
- Building a collection of similar sketches as “micro-moments” of calm for the web.
