Week 8

let circleColors;

​

function setup() {

  createCanvas(800, 800);

  circleColors = Array.from({ length: 4 }, () => color(random(255), random(255), random(255)));

  noLoop()

}

​

function draw() {

  background(220);

  let rows = 4;

  let cols = 4;

  let cellWidth = width / cols;

  let cellHeight = height / rows;

​

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

    for (let j = 0; j < rows; j++) {

      push();

      translate(i * cellWidth + cellWidth / 2, j * cellHeight + cellHeight / 2);

      rotate(random(TWO_PI));

      drawCell(cellWidth, cellHeight, circleColors);

      pop();

    }

  }

}

​

function drawCell(cellWidth, cellHeight, colors) {

  let circleSpacing = 100;

  let circleRadius = 70;

​

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

    let angle = radians(i * 90);

    let x = cos(angle) * circleSpacing;

    let y = sin(angle) * circleSpacing;

    fill(colors[i]);

    ellipse(x, y, circleRadius * 2, circleRadius * 2);

  }

​

  let squareSize = 90;

  fill(255);

  rect(-cellWidth / 2, -cellHeight / 2, squareSize, squareSize);

  rect(cellWidth / 2 - squareSize, -cellHeight / 2, squareSize, squareSize);

  rect(-cellWidth / 2, cellHeight / 2 - squareSize, squareSize, squareSize);

  rect(cellWidth / 2 - squareSize, cellHeight / 2 - squareSize, squareSize, squareSize);

}

​

function mousePressed() {

  circleColors = Array.from({ length: 4 }, () => color(random(255), random(255), random(255)));

  redraw();

}

​