Week 2 : Graphic Art

This time, we had to explore the idea of structured randomness—using loops to create patterns that feel both intentional and organic. I was drawn to the symmetry and repetition found in mandelas, so I used circles, triangles, and leaf-like shapes to build a layered composition. While loops helped generate repeating elements, I also added variations in color, rotation, and placement to make the design more dynamic and to add more uniformity I kept the color scheme consistent with shades of blue for the shapes constituting the mandela.

One part of my code that I’m especially happy with is the layered circles in the background. Getting the balance right took more trial and error than I expected. At first, the colors felt too flat, so I adjusted the shades to match the overall theme to give it a sense of depth. I also had to tweak the positioning to avoid overcrowding while still maintaining a structured look and while doing all this I realized how much small details can change the overall feel of a design.

  // depending on grid created calculates spacing across vertical and horizontal axis between circles 
  spacingX = width / (cols + 1); 
  spacingY = height / (rows + 1); 

  // iterates through each position of grid through rows and columns and assigns differing attributes to each circle to ensure randomness but with even distribution across grid to ensure there's no over-crowding or empty spacing left
  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = (i + 1) * spacingX + random(-20, 20); 
      let y = (j + 1) * spacingY + random(-20, 20);
      let circleSize = random(30, 80); 
      let growthRate = random(1, 2); 
      let maxSize = circleSize + random(20, 50);
      let c = color(random(150, 255), random(150, 200), random(200, 255), 150); 
      
      // adds each circle to array created to store attributes
      circles.push({
        x: x, y: y, circleSize: circleSize, growthRate: growthRate, growing: true,
        maxSize: maxSize, minSize: circleSize, col: c
      });
    }
  }
}

function draw() {
  background(255);
  noStroke()
  
  // iterates through array of circles and displays them on canvas
  for (let circle of circles) {
    fill(circle.col); 
    ellipse(circle.x, circle.y, circle.circleSize, circle.circleSize);

    // Growing and shrinking for added randomness
    if (circle.growing) {
      circle.circleSize += circle.growthRate;
      if (circle.circleSize >= circle.maxSize) circle.growing = false;
    } else {
      circle.circleSize -= circle.growthRate;
      if (circle.circleSize <= circle.minSize) circle.growing = true;
    }
  }