createCanvas(600, 600);

  background(255);

  let linePositions = drawVerticalLines(); // Draw vertical lines once

  drawRectangles(linePositions);

  drawNonPrimeFactorRectangles(linePositions); // Pass line positions to the new function

}

​

function drawVerticalLines() {

  let numLines = 100; // Number of vertical lines

  let baseSpacing = 3; // Base spacing between lines

  strokeWeight(0.5);

  stroke(0); // Set stroke color for vertical lines

  let centerX = width / 2;

  let linePositions = [];

​

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

    let x = centerX + (i - numLines / 2) * (baseSpacing + random(-1, 1));

    linePositions.push(x);

    let lineLength = random(350, 320);

    line(x, height / 2 - lineLength / 2, x, height / 2 + lineLength / 2);

  }

​

  return linePositions; // Return the positions of vertical lines

}

​

function drawRectangles(linePositions) {

  let primeDivisors = [2, 3, 5]; // Prime numbers from the divisors of 60

  let rectHeight = 20;

  for (let i = 0; i < primeDivisors.length; i++) {

    let rectWidth = random(30, 50);

    let x, y;

​

    // Choose two random line positions for the rectangle's boundaries

    let lineIndex1 = floor(random(0, linePositions.length));

    let lineIndex2 = floor(random(0, linePositions.length));

    if (lineIndex1 > lineIndex2) {

      [lineIndex1, lineIndex2] = [lineIndex2, lineIndex1];

    }

​

    // Set x based on the selected line positions and add random offset

    let centerX = linePositions[lineIndex1] + (linePositions[lineIndex2] - linePositions[lineIndex1]) / 2;

    x = centerX - rectWidth / 2 + random(-10, 100); // Random offset around center

​

    // Set y position with random variation around the center of the canvas

    y = height / 2 - rectHeight / 2 + random(-10, 100); // Random vertical offset

​

    // Draw the rectangle without filling

    noStroke();

    noFill();

    rect(x, y, rectWidth, rectHeight);

    drawGridLines(x, y, rectWidth, rectHeight);

  }

}

​

function drawNonPrimeFactorRectangles(linePositions) {

  let nonPrimeFactors = [1, 4, 6, 10, 12, 15, 20, 30, 60]; // Non-prime factors of 60

​

  for (let i = 0; i < nonPrimeFactors.length; i++) {

    let rectWidth = random(5, 20);

    let rectHeight = random(20, 70);

    let x, y;

​

    // Choose two random line positions for the rectangle's boundaries

    let lineIndex1 = floor(random(0, linePositions.length));

    let lineIndex2 = floor(random(0, linePositions.length));

    if (lineIndex1 > lineIndex2) {

      [lineIndex1, lineIndex2] = [lineIndex2, lineIndex1];

    }

​

    // Set x based on the selected line positions and add random offset

    let centerX = linePositions[lineIndex1] + (linePositions[lineIndex2] - linePositions[lineIndex1]) / 2;

    x = centerX - rectWidth / 4 + random(-100, 150); // Random offset around center

​

    // Set y position with random variation around the center of the canvas

    y = height / 2 - rectHeight / 2.5 + random(-100, 150); // Random vertical offset

​

    // Draw the rectangle without filling

    fill(random(255),random(255),random(255),200);

    noStroke();

    rect(x, y, rectWidth, rectHeight);

  }

}

​

function drawGridLines(x, y, w, h) {

  stroke(0); // Color for grid lines

  let gridSpacing = 1.5; // Spacing for grid lines

​

  // Draw only horizontal grid lines

  for (let j = y; j <= y + h; j += gridSpacing) {

    line(x*0.5, j, x - w, j); // Horizontal lines only

  }

}

function keyPressed() {

  if (key === 's') {

    saveGif('mySketch', 10);

  }

}