​

function setup() {

  createCanvas(550, 550);  

  angleMode(DEGREES);  // so that angles can be inputted in degrees rather than radians

}

​

function draw() {

  background(0); // black background

  translate(width/2, height/2);  // moving origin to the center of the canvas (instead of top left corner)

​

  // Rotating the entire canvas to animate the mandala

  rotate(frameCount * 0.6);  // rotating by frameCount * 0.6 to make the animation and control speed (since frameCount increases with every iteration of the draw() function)

​

​

  // Mapping the mouseX position to the number of symmetrical segments (between 6 and 30)

  numShapes = int(map(mouseX, 0, width, 6, 30));

  // print(numShapes);

​

  let maxRadius = 250;  // max radius (distance from center of canvas till edge) for shapes

​

  // Loop to create symmetrical patterns

  for (let i = 0; i < numShapes; i++) {

    push(); // saving current drawing style settings and transformations

    rotate((360 / numShapes) * i);  // rotating each shape by equal angles

​

    // Loop to draw shapes along a line radiating out from the center

    for (let r = 20; r < maxRadius; r += 20) {

      let size = map(r, 20, maxRadius, 5, 20);  // mapping size of shapes based on distance

​

      let hue_ = map(r, 20, maxRadius, 0, 255);  // mapping colour of shapes based on distance

      // Filling colours using HSB (hue, saturation, brightness) instead of RGB to get a nice gradient

      colorMode(HSB, 300, 255, 255);  // hue ranging from 0 - 300 to get the required gradient

      fill(hue_, 150, 255);  // setting the colour with varying hue

      noStroke();

​

      // Drawing the shape 

      ellipse(r, 0, size, size); 

    }

    pop(); // restoring the most recent settings and transformations that were done before push() 

  }

}

​