Cosmic Mandala — Radial Symmetry Through Code
Concept
Cosmic Mandala explores radial symmetry and circular motion through generative code, drawing inspiration from 1970s psychedelic computer graphics and ancient mandala symbolism. Unlike traditional static mandalas, this piece breathes and rotates, with each layer moving independently in mesmerizing counter-rotations.
The artwork uses nested loops within loops. The outer loop cycles through 8 concentric layers, while inner loops populate each layer with 36-72 elements (lines, petals, or dots). This creates hundreds of animated elements from just a few lines of code, demonstrating the multiplicative power of loops in generative art.
The piece questions: The slowly shifting hue values and counter-rotating layers create an almost hypnotic effect, inviting viewers into a meditative space.
Code Highlight
I am particularly proud of the central spiral animation, where a single loop creates two intertwining spirals using polar coordinates and Perlin noise:
function drawCentralSpiral() {
let numPoints = 150;
let maxInnerRadius = maxRadius * 0.2;
// First spiral
beginShape();
for (let i = 0; i < numPoints; i++) {
let angle = i * 8 + t * 2; // angle increases with each point + time
let r = map(i, 0, numPoints, 0, maxInnerRadius); // radius grows outward
// Add organic wobble with Perlin noise
let wobble = noise(i * 0.1, t * 0.02) * 10;
r += wobble;
// Convert polar to cartesian
let x = cos(angle) * r;
let y = sin(angle) * r;
curveVertex(x, y);
}
endShape();
// Counter-spiral (rotated 180°)
rotate(180);
// ... mirrors the pattern
}
This creates a dynamic yin-yang effect. The key insight: angle = i * 8 + t * 2 means each point is offset by 8 degrees, AND the entire spiral rotates via t * 2. The noise wobble prevents it from looking mechanical. One loop, 150 iterations, endless motion.
Live Sketch
Interaction: Click to pause/resume | Press 'S' to save | Press 'R' to reset animation
Reflection & Future Directions
Week 3 taught me the power of polar coordinates in generative art. While Week 2 used Cartesian grids (x, y), this piece thinks in circles (angle, radius). This shift unlocked organic, flowing patterns that feel more natural despite being equally mathematical.
The most challenging part was balancing chaos and order. Too many rotating layers made viewers dizzy; too few felt static. I settled on 8 layers with alternating rotation directions, creating visual rhythm without overwhelming motion. The counter-rotating spirals provide a focal anchor point.
Technical Insights:
- Nested loops are multiplicative: 8 layers × 36 elements = 288 animated objects from 2 simple loops
- Modulo creates patterns:
layer % 3cycles through 3 different pattern types seamlessly - HSB color mode enables smooth shifts: incrementing hue creates rainbow cycles naturally
Ideas for Future Work:
- Interactive Meditation Tool: Mouse distance from center controls rotation speed. Moving closer would slow down the animation, creating a breath-paced meditation aid
- Generative Variations: Add keyboard triggers (1-9) to switch between preset moods: calm (blues/slow), energetic (warm colors/fast), or chaotic (random colors/opposite rotations)
- Sacred Geometry: Implement golden ratio (φ) and Fibonacci sequences in radius calculations for mathematically "perfect" proportions
- Particle Systems: Replace some static elements with particles that orbit along the layers, adding another dimension of motion
- 3D Depth: Use WebGL to extrude the mandala into 3D space, creating a rotating torus or tunnel effect
- Sound Generation: Map each layer to a different musical note/frequency, turning the visual mandala into an ambient soundscape using Tone.js
- Export for Projection: Optimize for full-screen projection mapping in gallery installations or meditation spaces
Created with p5.js | February 2026