​

function setup() {

  createCanvas(800, 800);

  noLoop();

}

​

function draw() {

  background(255);

  const quadrantSize = width / 2;

​

  drawOriginalQuadrant(0, 0, quadrantSize);

  drawSpiralQuadrant(0, quadrantSize, quadrantSize);

  drawLinearPatternQuadrant(quadrantSize, 0, quadrantSize);

  drawNestedSquaresQuadrant(quadrantSize, quadrantSize, quadrantSize);

}

​

function drawOriginalQuadrant(x, y, size) {

  const gridSize = 4;

  const squareSize = size / gridSize;

​

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

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

      drawConcentricSquares(x + i * squareSize, y + j * squareSize, squareSize);

    }

  }

}

​

function drawConcentricSquares(x, y, size) {

  const numSquares = int(random(4, 10));

  const step = size / (2 * numSquares);

  const bgColor = random(colors);

  fill(bgColor);

  noStroke();

  rect(x, y, size, size);

  noFill();

​

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

    stroke(shuffle(colors)[i % colors.length]);

    strokeWeight(2);

    rect(x + i * step, y + i * step, size - i * step * 2, size - i * step * 2);

  }

}

​

function drawSpiralQuadrant(x, y, size) {

  const spirals = 3;

  const maxRadius = size / 2;

​

  push();

  translate(x + size / 2, y + size / 2);

  noFill();

​

  for (let s = 0; s < spirals; s++) {

    const steps = 20 + s * 10;

    const shuffledColors = shuffle(colors);

​

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

      const angle = map(i, 0, steps, 0, TWO_PI * 2);

      const radius = map(i, 0, steps, 0, maxRadius * (1 - s * 0.2));

      const x1 = cos(angle) * radius;

      const y1 = sin(angle) * radius;

​

      const nextAngle = map(i + 1, 0, steps, 0, TWO_PI * 2);

      const nextRadius = map(i + 1, 0, steps, 0, maxRadius * (1 - s * 0.2));

      const x2 = cos(nextAngle) * nextRadius;

      const y2 = sin(nextAngle) * nextRadius;

​

      stroke(shuffledColors[i % colors.length]);

      line(x1, y1, x2, y2);

    }

  }

  pop();

}

​

function drawLinearPatternQuadrant(x, y, size) {

  const gridSize = 3;

  const cellSize = size / gridSize;

​

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

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

      const x1 = x + i * cellSize;

      const y1 = y + j * cellSize;

​

      (i + j) % 2 === 0 ? drawLines(x1, y1, cellSize, true) : drawLines(x1, y1, cellSize, false);

​

      if (i === 1 && j === 1) drawGrid(x1, y1, cellSize);

    }

  }

}

​

function drawLines(x, y, size, horizontal) {

  const lineCount = 20;

  const spacing = size / lineCount;

​

  stroke(random(colors));

  strokeWeight(2);

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

    horizontal 

      ? line(x, y + i * spacing, x + size, y + i * spacing) 

      : line(x + i * spacing, y, x + i * spacing, y + size);

  }

}

​

function drawGrid(x, y, size) {

  const gridSize = 10;

  const cellSize = size / gridSize;

​

  stroke(random(colors));

  strokeWeight(2);

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

    line(x, y + i * cellSize, x + size, y + i * cellSize);

    line(x + i * cellSize, y, x + i * cellSize, y + size);

  }

}

​

function drawNestedSquaresQuadrant(x, y, size) {

  const gridSize = 3;

  const cellSize = size / gridSize;

​

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

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

      drawNestedSquares(x + i * cellSize, y + j * cellSize, cellSize);

    }

  }

}

​

function drawNestedSquares(x, y, size) {

  const squareCount = floor(random(2, 5));

  const step = size / (squareCount * 2);

​

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

    const fillColor = random(colors);

    const strokeColor = random(colors.filter(c => c !== fillColor));

​

    push();

    translate(x + size / 2, y + size / 2);

    rotate(random(-PI / 8, PI / 8));

​

    const squareSize = size - i * step * 2;

    if (random() < 0.5) {

      fill(fillColor);

      stroke(strokeColor);

    } else {

      noFill();

      stroke(strokeColor);

    }

​

    strokeWeight(2);

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

    pop();

  }

}

​

function mousePressed() {

  redraw();

}

​