// Create a simple grid of circles with numbers inside them.
// The grid should be able to dynamically change size based on a variable.
// If the value of the variable is 3, then you should have a 3x3 grid.
// If the value is 5, then the grid should be 5x5, and so on.
// The pattern must fit on the canvas regardless of the size of the variable, or the size of the canvas.

// Setup canvas
size(600, 600);
background(100);

// Initial number of rows/columns
int n = 5;

// Spacing between circles/rows/columns
int spacing = int(width * 0.6 / 100);

// Circles radius
int radius = int((width - (spacing * (n + 1)))/ (2 * n));

// Draw the grid
int i = 0;
int x = spacing + radius;
while (i < n) {

  int j = 0;
  int y = spacing + radius;
  while (j < n) {
    // Fill the circle red if the number inside is odd
    if ((i % 2) == 1) {
      fill(199, 28, 0);
    } else {
      // Fill the circle blu if the number inside is even
      fill(2, 37, 201);
    }

    circle(x, y, 2 * radius);

    fill(0);
    textSize(18);
    text(( (i + 1) + (j * n)), x - 3, y + 3);
    textAlign(CENTER);

    j++;
    y = y + spacing + (2 * radius);
  }

  i++;
  x = x + spacing + (2 * radius);
}