Week 2 – Animation, Conditionals, Loops

Concept

In this p5.js sketch, my main objective was to practice for loops and play around with the concept of randomness a bit. It is a simple generative art piece. The idea was to generate a grid of circles, where each circle varies in size, color and level of transparency. So by clicking on the window/canvas, the user can regenerate a completely random pattern (this adds an element of interactivity and makes the artwork dynamic).

Demo (Click on canvas)

Code Highlight:

One of the parts I’m most proud of is the loop structure that efficiently places the circles while maintaining randomness in their size and color:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
for (let x = 0; x < width; x += spacing) {
for (let y = 0; y < height; y += spacing) {
let size = random(10, spacing * 0.8);
let r = random(100, 255);
let g = random(100, 255);
let b = random(100, 255);
fill(r, g, b, 180); // Semi-transparent random color
noStroke();
ellipse(x + spacing / 2, y + spacing / 2, size, size);
}
}
for (let x = 0; x < width; x += spacing) { for (let y = 0; y < height; y += spacing) { let size = random(10, spacing * 0.8); let r = random(100, 255); let g = random(100, 255); let b = random(100, 255); fill(r, g, b, 180); // Semi-transparent random color noStroke(); ellipse(x + spacing / 2, y + spacing / 2, size, size); } }
for (let x = 0; x < width; x += spacing) {
  for (let y = 0; y < height; y += spacing) {
    let size = random(10, spacing * 0.8);
    let r = random(100, 255);
    let g = random(100, 255);
    let b = random(100, 255);

    fill(r, g, b, 180); // Semi-transparent random color
    noStroke();
    ellipse(x + spacing / 2, y + spacing / 2, size, size);
  }
}

Reflection & Improvements for Future Work

This project reinforced my understanding of looping structures in p5.js and the power of randomness in generative art. It was interesting to see how slight variations in parameters can lead to visually engaging results.

Future Work:
Experiment with different shapes (e.g., triangles, squares, or custom polygons). Add animation so circles gradually fade in and out.  Allow users to save their favorite generated patterns.

This was a fun dive into creative coding, and I look forward to exploring more complex generative techniques!

Leave a Reply