Week 2 – Loop Art

My Concept

For this assignment, I wanted my design to feel both structured and fun to interact with, while still being something I could make using the basics we’ve learned in p5.js. My final sketch creates a grid of animated squares that slowly move and respond to the mouse. When the mouse moves over the canvas, squares close to it change size and color, making the grid feel interactive and fun to play with and explore.

Snippet of the code I’m proud of:

Here’s a section I’m proud of because it combines motion and interaction:

let d = dist(mouseX, mouseY, x, y);

if (d < 80) {
  size += map(d, 0, 80, 25, 0);
  r = 255;
  g = random(100, 200);
  b = random(200, 255);
}

This part checks how close the mouse is to a square (d) and then:

  • increases the square’s size as the mouse gets closer,
  • changes its color using both randomness and mouse position, which creates a dynamic, responsive effect. It shows how loops and conditionals work together with interaction.

Embedded sketch:

How I made this: 

I made this sketch by creating a canvas using createCanvas(600, 400) and then using nested loops with x and y to place squares evenly across the grid. I used a spacing variable to control how far apart the squares are. Each square changes size over time with sin(frameCount * 0.05 + x * 0.04 + y * 0.04) to make a smooth wave effect. I also used dist(mouseX, mouseY, x, y) to check how far the mouse is from each square so that squares near the mouse get bigger and change color. I added a small rotation with rotate() and used push() and pop() so each square rotates on its own. I set the colors using r, g, and b, some based on the wave and some random near the mouse, and drew the squares with rectMode(CENTER) and rect(). Using loops, animation, rotation, and mouse interaction made the piece feel alive while keeping a clear pattern.

The complete code:

let spacing = 45;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(10, 10, 30, 60);

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {

      // wave motion
      let wave = sin(frameCount * 0.05 + x * 0.04 + y * 0.04) * 12;
      let size = 18 + wave;

      // distance to mouse
      let d = dist(mouseX, mouseY, x, y);

      // angle rotation
      let angle = sin(frameCount * 0.02 + d * 0.05);

      push();
      translate(x + spacing / 2, y + spacing / 2);
      rotate(angle);

      // color
      let r = 120 + wave * 4;
      let g = 80 + d * 0.2;
      let b = 200;

      // interaction 
      if (d < 80) {
        size += map(d, 0, 80, 25, 0);
        r = 255;
        g = random(100, 200);
        b = random(200, 255);
      }

      stroke(255, 180);
      fill(r, g, b, 180);
      rectMode(CENTER);
      rect(0, 0, size, size);

      pop();
    }
  }
}

Reflection and future ideas

Overall, I’m really happy with how this piece turned out. I started with the idea of a geometric grid like the ones in old computer art magazines, and I used what I’ve learned about loops, motion, and interaction to make it come to life. Learning how to use nested loops was especially rewarding because it let me create a pattern that fills the whole canvas with very little code. I’m honestly very proud of how my code came out. I really enjoyed exploring this aspect of p5.  And i like how I made the squares change when the mouse moves over them which makes it feel alive and fun to explore.

If I had more time or knew more about p5.js, I would like to try more effects. For example, I could make the shapes respond to sound, or create more interactive features like clicking to make new shapes appear. I would also like to experiment with colors to make smoother gradients and more interesting palettes. In the future, I want to keep exploring user interaction and generative art using what I have learned so far and what I will learn next.

References

p5.js Reference: https://p5js.org/reference/

Leave a Reply