Inspiration

This project was inspired by clockwork mandala kinetic art—like the creations of David C. Row, House of Moon, and Scrollsaw Akane. Search “Kinetic Art Mandalas” on YouTube to explore more examples.

What It Does

The app simulates a beautiful double-disk mandala within a 3D web environment. Users can:

  • Pan (right-mouse drag),
  • Zoom (middle-mouse drag), and
  • Orbit (left-mouse drag)
    to explore the intricate shapes from any angle. A hidden left-side panel lets users adjust arm curvature and bead positions.

How We Built It

  1. I initially prototyped a 2D version using ChatGPT, based on an uploaded image.
  2. I moved the project to Bolt.new, planning to create Blender/FBX assets and finish in Unity 3D.
  3. Bolt.auto decided to jump straight into a web app. I evaluated three.js and p5.js, eventually choosing three.js for its power and flexibility.

Challenges We Ran Into

There were countless challenges—but the music integration stands out most. I struggled to:

  • Count the number of music files in the folder, and
  • Prevent tracks from cutting off prematurely.

It turned out one music file was truncated—so only a “half song” remained. I replaced it with a soft substitute that I believe complements the app nicely.

Accomplishments We’re Proud Of

  • Solo creation: This was built by me—with AI help—solo.
  • Support: My wife recorded a live video demo to showcase it.
  • Final result: The app is beautiful, engaging, and fun. I’m proud of the end product!

What I Learned

Though I’ve been a hobbyist programmer for years, this project reinforced two vital skills:

  1. Persistence and grit—crucial traits for any programmer, and
  2. Smart debugging—learning when to break out of the “copy-paste-error” loop and ask for root‑cause analysis from AI.

What’s Next for Mandala Math

  • 🎨 Custom shape tool: Let users draw their own arm shapes.
  • 🎨 Color & texture options: Cherry‑wood arms, black‑marble beads, etc.
  • 💵 Monetization: Add a “Tip me” feature or pop‑up support.
  • 🔄 Multiple spinners: Support for several mandalas in the same 3D scene, each with custom parameters that users can save and reload.

Built With

Share this project:

Updates