createCanvas(window.innerWidth, window.innerHeight);

  background("black");

  angleMode(DEGREES);

  colorMode(HSB);

​

  fill("white");

  textAlign(CENTER);

  text("Press 's' to Save.", 60, 20);

  text("Press 'r' to Reset.", width - 60, 20);

  text("Draw on the Canvas to see the Magic!!", width / 2, height - 20);

}

​

function draw() {

  translate(width / 2, height / 2);

​

  let n = 12; // Variable denoting the number of symmetric sketches

  if (mouseIsPressed) {

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

      stroke(i * (360 / n), 100, 100);

​

      // The Dots

      strokeWeight(5);

      point(mouseX - width / 2, mouseY - height / 2, 6);

​

      // The Lines

      strokeWeight(0.15);

      line(mouseX - width / 2, mouseY - height / 2, 0, 0);

​

      // Generating Symmetry

      rotate(360 / n);

    }

  }

}

​

function keyPressed() {

  // Press "r" on keyboard to Reset

  if (keyCode === 82) {

    console.log("Resetting the Canvas...");

    setup();

  }

  // Press "s" on keyboard to save

  if (keyCode === 83) {

    console.log("Saving Image...");

    save("Mandala_Art.jpg");

  }

}