Circles

​

function setup() {

  createCanvas(800, 800);

  noLoop(); // Draw only once 

  drawPatterns(); // Draw the patterns

}

​

​

// Function to draw patterns on the canvas

​

function drawPatterns() {

  background(0); // Clear the canvas with a black background

  var gridSize = 8; // Number of grid cells

  var cellSize = width / gridSize; // Size of each cell

​

  // Loop through each cell in the grid

  for ( x = 0; x < gridSize; x++) {

    for ( y = 0; y < gridSize; y++) {

      // Determine how many circles to fill based on x + y

      var filledCircles; // Variable for filled circles

      var sum = x + y; // sum of x and y

​

      // Assign number of filled circles based on the sum of x and y

      if (sum < 4) {

        filledCircles = 1; // Fill 1 circle if x + y < 4

      } else if (sum >= 4 && sum < 8) {

        filledCircles = 2; // Fill 2 circles if x + y is between 4 and 8

      } else {

        filledCircles = 1 + floor(random(3)); // Randomly fill 1, 2, or 3 circles if x + y >= 8

      }

​

      drawPattern(x * cellSize, y * cellSize, cellSize, filledCircles); 

    }

  }

}

​

// Draw the circles in the cell

​

function drawPattern(x, y, size, filledCircles) {

  var numCircles = 3; // 3 circles in each cell

  var circleSpacing = size / (numCircles + 1); // Space between circles increased by adding 1

​

  // Draw circles in the cell

  for ( i = 0; i < numCircles; i++) {

    for ( j = 0; j < numCircles; j++) {

      var cx = x + (i + 1) * circleSpacing; // Circle center x 

      var cy = y + (j + 1) * circleSpacing; // Circle center y 

      var circleSize = circleSpacing * 0.6; // Size of the circles

​

      // Randomly decide whether to fill the circle

      if (random() < filledCircles / 3) { // Compare with filledcircles/3 (probability)

        fill(255); //  white fill

        noStroke();

      } else {

        noFill(); // empty circle

        stroke(255); // White outline

        strokeWeight(2);

      }

​

      ellipse(cx, cy, circleSize); // Draw the circle

    }

  }

}

​

// Function to handle key presses

function keyPressed() {

  if (key === 'L' || key === 'l') { // Check if the "L" key is pressed

    drawPatterns(); // Redraw patterns when "L" key is pressed

  }

}

​