O Mandala! - Online Drawing Game

Seele01-Flash
By
O Mandala! is a relaxing online drawing game that lets you create beautiful symmetrical mandala designs using a special mirrored drawing board with up to 100-axis reflection.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "O Mandala!". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** A clean, "Zen-like" aesthetic using high-saturation colors against a calming background. The scene should feature a high-quality 3D Plane representing a sheet of textured paper or a digital canvas, floating in a soft, gradient void (suggest a soothing transition from cyan to deep blue, similar to the game icon). * **Camera:** Use an Orthographic Camera positioned directly top-down (or with a very slight tilt) to ensure precision drawing without perspective distortion. * **Material & Shaders:** The drawing surface must be a `THREE.PlaneGeometry` using a dynamic `THREE.CanvasTexture`. The texture needs to update in real-time as the user draws. The background should contain slowly floating, low-poly geometric shapes (stars or diamonds) in the distance to add depth without distracting from the canvas. * **Performance:** Optimize for mobile GPUs. Limit the number of background particles. Use `texture.needsUpdate = true` efficiently (only when input is detected) to save battery. ### 2. Audio Requirements * **Background Music (BGM):** A relaxing, looping Lo-fi Hip Hop or Ambient Spa track. It should be unobtrusive and encourage a flow state. * **Sound Effects (SFX):** * **Drawing:** A dynamic "pencil scratching on paper" ASMR sound that plays only when the finger is moving on the canvas. Pitch could vary slightly based on drawing speed. * **UI:** Soft "pop" or "bubble" sounds when selecting colors or changing brush sizes. * **Clear/Undo:** A satisfying "page flip" or "woosh" sound. ### 3. Gameplay Loop * **Core Mechanic (Radial Symmetry):** The user draws a line in one sector of the circle. The code must calculate the polar coordinates of the input and replicate the stroke across multiple axes (Mirroring). * **Symmetry Algorithm:** If the user sets the symmetry count to $N$, every point drawn at angle $\theta$ must also be drawn at $\theta + (360/N) * i$ for $i=1$ to $N$. * **Tools & State:** The player can switch between distinct colors (via a palette) and adjust the "Mirror Count" (from 2 to 100 axles) via a slider. * **Goal:** There is no win/loss condition. The goal is pure creative expression and relaxation. * **Features:** Include a "Save Image" function (exporting the canvas data to a PNG) and a "Clear Board" button. ### 4. Mobile Controls & Interaction * **Touch Input:** * Map `touchstart`, `touchmove`, and `touchend` events to a Raycaster that intersects with the drawing plane. * **Crucial:** Prevent default browser behavior (scrolling/zooming) when touching the canvas area (`event.preventDefault()`). * **UI Layout (Mobile Optimized):** * **Bottom Bar:** Place primary tools (Color Picker, Symmetry Slider, Brush Size) in a fixed container at the bottom of the screen. Buttons must be at least 44x44px for touch targets. * **Top Bar:** Place secondary actions (Undo, Clear, Save) at the top. * **Orientation:** Force Portrait mode logic, but ensure the canvas scales correctly if the user rotates the device (responsive canvas resizing). * **Feedback:** * **Visual:** Show a small cursor or "brush tip" circle following the finger/raycast point. * **Haptic:** Trigger a very light vibration (using `navigator.vibrate`) when a UI button is clicked to provide tactile confirmation. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

O Mandala! is a unique and relaxing drawing game that transforms your simple strokes into stunning symmetrical masterpieces. Using an innovative mirrored drawing board with up to 100 different axes, every line you draw is automatically reflected to create mesmerizing mandala patterns. This free online game combines creativity with meditation, offering a perfect way to unwind while creating beautiful digital art.

Core Features

Revolutionary Mirroring System

The game's standout feature is its advanced mirroring technology that reflects your drawings across multiple axes simultaneously. With up to 100 different axle configurations, you can create incredibly complex and beautiful symmetrical patterns with minimal effort. Each stroke becomes part of a larger, harmonious design.

Comprehensive Drawing Tools

  • Multiple Brush Sizes : From fine detail work to bold strokes
  • Rich Color Palette : Endless color combinations to bring your vision to life
  • Various Pencil Types : Different drawing tools for unique textures and effects
  • Real-time Symmetry : Watch your mandala evolve as you draw

Relaxing Creative Experience

O Mandala! is designed to be a meditative experience. The gentle, flowing creation of symmetrical patterns provides a calming effect, making it perfect for stress relief and mindful creativity. Whether you're an experienced artist or just looking to relax, the game adapts to your skill level.

Cross-Platform Accessibility

Enjoy seamless drawing across all devices. The game works perfectly on desktop computers with mouse control and mobile devices with touch input, ensuring you can create beautiful mandalas anywhere.

Game Mechanics

The core gameplay revolves around the simple yet powerful concept of symmetrical drawing. As you move your cursor or finger across the drawing board, the mirroring system creates identical strokes across all selected axes. This means a single curved line can instantly become a complex, multi-layered pattern.

Drawing Process

  1. Select your preferred number of mirror axes (up to 100)
  2. Choose your brush size and color
  3. Start drawing on the canvas
  4. Watch as your strokes are mirrored to create symmetrical patterns
  5. Layer different colors and shapes to build complex designs
  6. Save or share your completed mandala artwork

Operation Guide

Mouse Control (Desktop): - Use your mouse to draw directly on the canvas - Left-click and drag to create continuous lines - Access the toolbar for brush and color selection

Touch Control (Mobile): - Tap and drag your finger across the screen to draw - Use pinch gestures to zoom in/out for detailed work - Tap menu icons to change tools and settings

Drawing Tips : - Start with fewer axes to understand the mirroring effect - Experiment with different brush sizes for varied textures - Layer multiple colors for depth and complexity - Take breaks to appreciate your evolving artwork

Why Play This Game

Perfect for All Skill Levels

Whether you're a professional artist or someone who "can't draw a straight line," O Mandala! makes everyone an artist. The mirroring system ensures that even simple strokes create beautiful, complex patterns.

Stress Relief and Meditation

The repetitive, symmetrical nature of mandala creation has been used for centuries as a form of meditation. This digital version brings that same calming effect to your screen, providing a perfect break from daily stress.

Instant Gratification

Unlike traditional art that requires extensive skill development, O Mandala! provides immediate beautiful results. Every stroke contributes to a stunning final piece, keeping you engaged and motivated.

Educational Value

Learn about symmetry, pattern recognition, and color theory while having fun. The game naturally teaches mathematical concepts through creative expression.

Social Sharing

Create artwork you're proud to share. The professional-looking results are perfect for social media, digital portfolios, or simply personal enjoyment.

Completely Free

Enjoy all features without any cost. No hidden fees, no premium upgrades – just pure creative fun accessible to everyone.

Frequently Asked Questions (FAQ)