Manual: Mandala Generation

1   Composing Mandalas

Our software is tuned to Firefox, Version 135.0.1 (64-bit). It provides the following two options for composing digital mandalas.

1.1 Basic for beginners

You can create mandalas entirely from motifs available in the built-in atlas. The atlas offers a diverse set of motifs that serve as starting points. Select the motifs from the option Add motifs. With skillful manipulation, users can craft a wide range of designs.

1.2 Advanced for professionals

Users can select their own motifs by Add custom motifs from the local machine to create a composition. They can also include motifs by Add motifs.

Notably, the software supports adding motifs in inverted colors, enabling users to subtract one motif from another.

2   The Software in Detail

The software is delivered as a web application built using HTML, CSS, and plain JavaScript, ensuring accessibility without requiring additional configurations. Users only need a modern web browser and an Internet connection.

Mandala creation involves selecting a symmetry order from predefined options, adding motifs to the canvas (either built-in or user-defined), and adjusting parameters as needed. Changes are reflected in real-time, allowing users to fine-tune their designs interactively. The final creation can be saved as a raster image (PNG) or in a vectorized format (JSON).

2.1 Features

The software offers extensive customization options for mandala creation, including:

1. Choice of symmetry order: Users can define the order of symmetry for their mandalas. A polar grid can be displayed to assist with motif alignment.
2. Built-in motif atlas/library: The software includes over 100 default motifs, providing a foundational set for users to build upon.
3. Custom motif support: Users can upload their own images to be used as motifs in their mandalas.
4. Motif browsing: Users can browse a list of motifs they have used. They can set any motif as the active selection for further modifications or remove motifs if necessary.
5. Motif manipulation: Various controls allow users to fine-tune motif properties, including position, orientation, size, multiplicity, and color. These are listed under Parameters:
   • Polar Radius
   • Polar Angle
   • Self-rotation
   • Size
   • Multiplicity: 0 means the selected motif will appear exactly once—chosen when it's a central motif; 1 or a higher value means it will appear in times of the order of symmetry, termed Grid Order with default value = 8.
     For example, if Grid Order = 2 and multiplicity = 1, the selected motif will appear on its layer 8 times, whereas with multiplicity = 2 it will appear 16 times.
   • Flip: flips the motif laterally.
   • Invert Color
   • Color: RGB spectrum
6. Export as an image: The final mandala can be saved as a PNG file with transparent background.
7. Serialization: Users can save their mandala as a JSON file, enabling easy reconstruction of the design and working with it further using our software.

2.2 Interface and Functionality

1. Set Grid Order This button allows users to change the mandala's symmetry order. The selection is made via a dropdown menu. When clicked, the canvas is cleared, and users are notified with an option to cancel the action.
2. Show Grid This checkbox toggles the grid's visibility. The grid assists during construction but can be hidden when viewing the final mandala.
3. Invert Colors This checkbox inverts the entire canvas, displaying motifs in white against a black background. This feature enables quick visualization without manually adjusting each motif.
4. Save Mandala as PNG This button saves the mandala as a .png image. PNG is chosen for its lossless compression and widespread compatibility.
5. Save Mandala as JSON This button stores the mandala’s key parameters as a JSON file for serialization. However, if custom motifs are used, the JSON file does not include image data, so users must ensure the motifs exist in the atlas before loading such a file.
6. Load Mandala from JSON This button loads a previously saved mandala from a JSON file. Loading a file clears any existing work, so users are warned before proceeding. The software validates the JSON file and alerts users if it contains invalid data.

3 Implementation Details

The software has been implemented in plain JavaScript, ensuring compatibility across all major web browsers to maximize accessibility.

This section provides an overview of key implementation details and design decisions made during development.

3.1 Primitive Extraction

When the software loads, it retrieves image data for the motifs in the built-in atlas. Each image undergoes a primitive extraction process, where black pixels from the source grayscale image are included in the primitive, while white pixels are omitted. This results in a transparent background, allowing motifs to be placed seamlessly next to each other. Protruding motif elements can also fit into concavities of other motifs without issue.

Once extracted, primitive data is stored in a global object pool as an array of base64-encoded data URLs. This eliminates the need to reload primitives from scratch whenever they are used—each primitive can simply be referenced and copied from the object pool for rendering.

3.2 State Management

The software maintains a structured data model to track the current state of the mandala. This structure stores information about the motif layers currently in use, ensuring that users can interact with and modify their designs efficiently.

3.3 Event Handling

The software employs an event-driven architecture, responding dynamically to user interactions. The following events are handled to provide a smooth and responsive experience:

1. Adding Motifs: When a user selects a motif from the atlas, the software places it on the canvas and updates the state accordingly.
2. Manipulating Motifs: Changes to motif parameters (such as position, orientation, size, or multiplicity) trigger an update, allowing real-time feedback on adjustments.
3. Saving and Loading: When a mandala is saved as a JSON file, the software serializes its current state. When loading a JSON file, the software reconstructs the mandala based on the saved data.

3.4 Rendering System

The rendering process is optimized to handle multiple layers of motifs efficiently. The software uses a single HTML5 <canvas> element for drawing, reducing computational overhead.

The rendering system follows these steps:

1. Clear the canvas before each frame update.
2. Iterate through the list of active motifs.
3. Apply transformations (scaling, rotation, and positioning).
4. Draw each motif onto the canvas.

This approach ensures that real-time adjustments are reflected instantly without lag.

3.5 Performance Optimizations

Several optimizations have been implemented to enhance performance, particularly when handling complex mandalas with numerous motifs:

1. Object Pooling: Frequently used primitives are stored in an object pool to avoid redundant image processing.
2. Lazy Loading: Motif images are only loaded when needed, reducing initial load times.
3. Canvas Redrawing Optimization: Instead of redrawing the entire canvas upon every update, only the affected areas are refreshed.

4   Acknowledgment

This work is partially supported by a research grant from the project GKF under Academy of Classical and Folk Arts, IIT Kharagpur, India.

Published on February 26, 2025