Assignment 2 – Interactive Mandala

Inspiration

For this assignment, the task was to make a simple work of art using loops. My first thought was that  I wanted to make something that resulted in a visually appealing pattern of some sort (with an element of interactivity as well). As I was brainstorming ideas, I scrolled through my Pinterest boards and came across various dot mandala designs. The intricate patterns and vibrant colours of these mandalas instantly caught my eye, inspiring me to create a digital version that would capture the same sense of symmetry and beauty. I wanted to explore this concept – an effect where symmetrical shapes radiate out from a center point, creating an interesting pattern.

Concept

The core concept behind my project is to also incorporate a kaleidoscope-like pattern that keeps rotating, creating a mesmerizing visual effect. I aimed to use symmetrical shapes (circles) and a gradient of colors to mimic the aesthetic of traditional mandala designs. To add an interactive element, I decided to map the number of segments to the horizontal position of the mouse, allowing viewers to alter the complexity of the pattern by simply moving their cursor. This interaction not only makes the art more engaging but also gives viewers control over the visual complexity, making each interaction unique.

Implementation

Here’s the final product!

I started by setting up a square canvas with a black background to make the colours stand out. The origin was moved to the center of the canvas to simplify the rotation and placement of symmetrical shapes. I used two nested loop to create the series of symmetrical shapes (circles in this case) radiating from the center. Each shape is rotated by an equal angle to maintain symmetry. The number of these symmetrical segments is dynamically adjusted based on the mouseX variable, adding interactivity.

Something I explored on my own was how to use the rotate function and incorporated it for two purposes in the artwork:

• To rotate the entire canvas continuously over time, creating the overall animation effect of the whole mandala rotating.

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)

• To manage the placement of individual symmetrical segments of the mandala.

// 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