Mandala is now ONLINE!

An interactive generative art project that combines traditional mandala patterns with modern AI technology.

---

🎮 How to Use

Voice Control

• Say "hey mandala" to trigger a greeting animation
• Say color names like "blue", "red" to change colors
• Say "shuffle" or "transform" for random transitions
• Say "stop" to halt the current animation
• Say "background [color]" to change the background

Keyboard Shortcuts

Key	Action
A	Trigger random pattern transition
S	Save current image
T	Toggle AI assistant input
Enter	Send AI request (when input is focused)
Esc	Close AI input / dismiss notification

AI Pattern Generator

1. Press T or click the ✨ AI Pattern button
2. Describe the pattern you want (e.g., "starry night", "ocean waves", "geometric flowers")
3. Press Enter or click Generate
4. Watch as the mandala transforms based on AI recommendations!

---

🎨 Examples

Try these descriptions with the AI:

• "starry night" → spiral arrangement + moon fractal
• "ocean waves" → sized arrangement + spiral fractal
• "geometric flowers" → hexagon arrangement + flower fractal
• "rainbow heart" → sized arrangement + heart fractal
• "mystical windmill" → spiral arrangement + windmill fractal

---

🏗️ Architecture

Core Concept: Pattern = Arrangement + Fractal

Arrangement controls the layout (16×16 grid):

• Position [x, y]
• Rotation angle
• Size/diameter

Fractal defines the geometric shape:

• Line segments
• Curves and arcs
• Composite shapes

State Transition System

[Origin] ──(0%)──> [Current] ──(100%)──> [Target]

Smooth interpolation between patterns over ~166 frames (1000/60fps).

---

🚀 Deployment

Vercel (Recommended)

1. Fork this repository
2. Import to Vercel
3. Add environment variable: OPENAI_API_KEY=your_key_here
4. Deploy!

GitHub Pages

For static hosting without AI features:

1. Enable GitHub Pages in repository settings
2. Select main branch as source

---

🛠️ Development

File Structure

Mandala/
├── api/recommend.js       # Vercel serverless function (AI API)
├── index.html            # Main UI
├── sketch.js             # Main controller & animation loop
├── arrangement.js        # Arrangement class (layout)
├── fractal.js            # Fractal class (shapes)
├── presetArrangements.js # Layout presets
├── presetFractals.js     # Shape presets
├── basicFunctions.js     # Utility functions
└── ARCHITECTURE.md       # Detailed documentation

Adding New Patterns

New Arrangement:

1. Create function in presetArrangements.js
2. Add to pasAll array
3. Update keyword map in sketch.js

New Fractal:

1. Create function in presetFractals.js
2. Add to pfsAll array
3. Update keyword map in sketch.js

---

📝 Credits

Original Project: 2024 ITP Spring Show
Course: The Nature of Code by Daniel Shiffman
Creators:

• Tammana Jain
• Jiaqi Yi

AI Enhancement: 2026 Update with GPT-4o-mini integration

---

📄 License

MIT License - feel free to use and modify!

---

🤝 Contributing

Have an idea for a new pattern? Share it in Discussions!