1.  
2. // Create a simple grid of circles with numbers inside them.
3. // The grid should be able to dynamically change size based on a variable.
4. // If the value of the variable is 3, then you should have a 3x3 grid.
5. // If the value is 5, then the grid should be 5x5, and so on.
6. // The pattern must fit on the canvas regardless of the size of the variable, or the size of the canvas.
7.  
8. // Setup canvas
9. size(600, 600);
10. background(100);
11.  
12. // Initial number of rows/columns
13. int n = 5;
14.  
15. // Spacing between circles/rows/columns
16. int spacing = int(width * 0.6 / 100);
17.  
18. // Circles radius
19. int radius = int((width - (spacing * (n + 1)))/ (2 * n));
20.  
21. // Draw the grid
22. int i = 0;
23. int x = spacing + radius;
24. while (i < n) {
25.  
26.   int j = 0;
27.   int y = spacing + radius;
28.   while (j < n) {
29.     // Fill the circle red if the number inside is odd
30.     if ((i % 2) == 1) {
31.       fill(199, 28, 0);
32.     } else {
33.       // Fill the circle blu if the number inside is even
34.       fill(2, 37, 201);
35.     }
36.  
37.     circle(x, y, 2 * radius);
38.  
39.     fill(0);
40.     textSize(18);
41.     text(( (i + 1) + (j * n)), x - 3, y + 3);
42.     textAlign(CENTER);
43.  
44.     j++;
45.     y = y + spacing + (2 * radius);
46.   }
47.  
48.   i++;
49.   x = x + spacing + (2 * radius);
50. }
51.