This simple p5.js sketch represents a grid of circles on a canvas. The circles are evenly spaced in rows and columns. The purpose of this artwork is to explore the fundamental principles of drawing shapes using p5.js, such as ellipses, and to create a pattern. While this version lacks interactivity, I believe that this grid of circles can be a starting point for more complex projects, where additional features and interactions can be incorporated to enhance the user experience.
one aspect of the code that I’m particularly proud of is the nested loop structure used to create the grid of circles. This nested loop efficiently iterates through rows and columns, positioning each circle at the correct coordinates on the canvas. This code snippet demonstrates the power of loops in creating repetitive patterns and organizing elements in a systematic way:
for (let x = 0; x < width; x += spacing) {
for (let y = 0; y < height; y += spacing) {
fill(0); // Set the fill color to black
ellipse(x + circleSize / 2, y + circleSize / 2, circleSize, circleSize);
}
}
Embedded Sketch: