Week 2 – artwork

Concept

This artwork explores the balance between structure and unpredictability through a dynamic grid of circles. The grid itself represents order and repetition, while the interaction with the mouse introduces an element of spontaneity. As the user moves their cursor, the circles respond by changing size and color, creating a sense of movement and fluidity. This interaction turns the viewer into an active participant, making the piece feel more alive and engaging. The idea behind it is to show how external influences can transform something predictable into something unexpected.

Code Highlight

One of the most interesting aspects of the code is the way it uses a double for-loop to generate a grid of circles. This helps arrange the shapes evenly on the canvas. The interactive part is driven by the dist() function, which calculates how far each circle is from the mouse pointer. That distance then determines the size and color of each circle, making them look as if they reacted to the user’s mouse movements. The map() function helps smooth out these changes by scaling the distance values into a range that works well for the visual effect.

for (let i = 0; i < cols; i++) {
  for (let j = 0; j < rows; j++) {
    let d = dist(mouseX, mouseY, x, y);
    let circleSize = map(d, 0, width, maxSize, minSize);
    fill(map(d, 0, width, 255, 100), 100, 200);
    ellipse(x, y, circleSize);
  }
}

Reflection & Improvements for Future Work

I believe that my project does a great job of showing how loops and interaction can be used to create something visually engaging in p5.js. The grid of circles reacting to the mouse makes the piece feel dynamic, and the changes in size and color add a nice touch of unpredictability. It’s simple, but it keeps things interesting as you move the mouse around.

That being said, there’s definitely room for improvement. Right now, the transitions feel a bit abrupt, so adding some smoothing or easing effects could make the movement more natural. It would also be fun to experiment with extra elements like rotation, fading effects, or even some subtle animation when the mouse isn’t moving. Another cool idea would be giving users more control—maybe letting them change the colors or grid size with sliders or buttons. And if sound was added, it could create an even more immersive experience where the visuals react to music or voice input.

Overall, this was a fun experiment in generative art.