Week 2 – Loop Art

My Concept

For this assignment, I wanted to create something simple, structured, and fully based on the techniques from the Week 2 slides. I decided to build a grid of squares using nested loops, just like the examples shown in class. But instead of keeping the grid static, I wanted it to feel a little more interactive.

My idea was to make the colors shift whenever the mouse is pressed, using the built‑in boolean variable mouseIsPressed from the slides. The end result of my project is a grid of evenly spaced squares that change color in a smooth loop every time you click.

Snippet of the code I’m proud of:

if (mouseIsPressed) {
  colorShift += 2;
}

if (colorShift > 255) {
  colorShift = 0;
}

I’m proud of this part because it uses boolean logic and variable incrementation.

  • When the mouse is pressed the variable colorShift increases.
  • This creates a looping color effect and it shows how conditionals and variables can work together to create interaction.

Embedded sketch:

How I made this: 

I started by creating a canvas using createCanvas(600, 400), just like in the examples from class. Then I used nested for loops to place squares across the screen.

To make the squares spaced further apart, I increased the loop step to x += 70 and y += 70. This gives the grid a clean, airy look.

Next, I added a variable called colorShift that starts at 0. Using the boolean variable mouseIsPressed (from the slides), I made the number increase whenever the mouse is clicked. This number is then added into the fill() colors so the squares change color interactively.

I also used simple conditionals (if, else if, else) to change the color depending on how far down the screen the square is.

Finally, I drew each square using rect(x, y, 50, 50) inside the nested loops. Because the loops repeat across the whole canvas, the pattern fills the screen automatically.

Reflection and future ideas

Overall, I’m really happy with how this piece turned out, because it uses simple tools like loops, conditionals, boolean variables, and a bit of animation, yet it still manages to feel interactive. Even though the sketch is built from very basic building blocks, the way everything works together makes the grid feel responsive and alive.

Using mouseIsPressed was especially fun, because it showed me how a single boolean variable can instantly make a sketch interactive. Just clicking the mouse changes the colors across the whole grid, and that small action makes the code fun.

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

  • Week 2 Slides, (Conditionals, Loops, Boolean Variables) Used for understanding nested loops, mouseIsPressed, relational operators, and conditional logic.
  • p5.js Reference https://p5js.org/reference/ Used to check syntax for rect(), fill(), and basic drawing functions.

Leave a Reply