In this week’s assignment, we were asked to create a generative artwork using objects and arrays. I have always liked seeing how small movements can make interesting patterns. At first, I thought about making chaotic particles flying everywhere, but that felt messy and confusing. So I decided to make particles orbit around a center point, which allowed me to practice using objects and arrays while keeping the artwork neat and easy to see.

I also wanted it to be interactive, so:

• Clicking the mouse adds more particles, making the pattern more complex.

• Moving the mouse slightly affects their movement, making it feel alive.

• Particles change colors and pulse in size so they feel like a tiny living galaxy.

Part I Am Proud Of

// Particles react to mouse movement
let centerX = width / 2 + cos(this.angle) * this.radius;
let centerY = height / 2 + sin(this.angle) * this.radius;
let dx = mouseX - centerX;
let dy = mouseY - centerY;
this.radius += 0.0005 * sqrt(dx * dx + dy * dy); // subtle attraction to mouse

I am proud of this part because it makes the particles move a little toward the mouse. I also like how the colors slowly change.

It makes the particles feel like they are  alive, instead of staying the same all the time .

// Particles change color over time
this.color[0] = (this.color[0] + 0.5) % 255;
this.color[1] = (this.color[1] + 0.3) % 255;
this.color[2] = (this.color[2] + 0.7) % 255;

How It Works / Functions

• setup() → Creates the canvas and initial particles.

• draw() → Updates and draws all particles every frame.

• mousePressed() → Adds 5 new particles when clicked.

• keyPressed() → Clears the canvas with ‘c’ or resets particles with ‘r’.

• Particle.update() → Updates each particle’s motion, size, color, and mouse interaction.

• Particle.display() → Draws each particle using its position and size.

Final work:

Reflection & Future Improvement

At first, I had too many ideas ,  interaction, different shapes, more complex movement , but I realized I needed to keep it simple. By focusing on particles orbiting with color and size changes, I made something that works well and looks nice.

I also learned that small changes can make a big difference. The particles reacting to the mouse and slowly changing color make the system feel alive. This project reminded me that sometimes simple ideas can be very powerful, especially when they are interactive and thoughtful.

Future Improvement:
In the future, I would like to add sound interaction, so the particles could respond to music or noise. I could also experiment with different shapes or trails instead of only circles, and maybe allow more mouse control or multiple attractor points. These changes could make the artwork even more dynamic and engaging, while keeping the smooth, organic feel.

After watching Casey Reas’ talk on chance operations, I realized how randomness can be a powerful tool in creative work. Instead of controlling every detail, allowing chance to play a role can lead to unexpected results that are often more interesting than what I would plan. In my own projects, I plan to experiment with random elements in small ways, like changing colors, shapes, or patterns based on a set of rules but leaving some outcomes to chance. This connects to our discussions in a different class, Understanding of IM class, where we talked about using randomness as an algorithm in conceptual art for example by letting the computer generate outcomes that are surprising but still guided by certain constraints or rules. I think the key is to find a balance between control and randomness, so the work feels intentional but still fresh and dynamic.

The talk also made me question how much control we really need in our work. Reas shows that too much control can limit creativity, but too much randomness can make a project feel chaotic. I found this idea challenging because I usually like to plan every step carefully. I kind of  think about trying a more experimental approach, even if it feels uncomfortable at first. It raises questions for me about when to intervene in a random process and when to let the algorithm or chance take over. 

Concept

For this assignment, I decided to create a simple artwork called Retro Grid Swirl. I was inspired by the bold geometric patterns I saw in the Computer Graphics and Art magazines from the 1970s. I wanted to capture that retro feel but also make it animated, so the grid of shapes would feel alive and moving.

The piece shows a grid of circles and squares that rotate and change size over time. Together, the movement creates a swirling, portal-like effect, as if the grid itself is moving.

Code I’m Proud Of

It took me some experimenting to figure out how to make the shapes switch between circles and squares. Once I added the condition based on frameCount, the grid started changing form every couple of seconds, and I really liked how dynamic it looked.

I also enjoyed playing with color alternation so the shapes wouldn’t feel flat. This made the grid feel more playful and gave it a stronger retro look.

if (floor(frameCount / 120) % 2 === 0) {
  square(0, 0, size);
} else {
  ellipse(0, 0, size);
}

Here’s the work of art I created:

Reflections

 I’m happy with how Retro Grid Swirl turned out. It’s simple, but the combination of loops, conditionals, and animation gives it a lot of life. I especially like how the grid feels balanced but never static , it always has something moving and shifting. At first, it was tricky to control the animation so it didn’t feel too chaotic. Using sine-based size changes helped make the motion smoother and more rhythmic.

Concept

In this assignment , I wanted to  create a simple cartoon-style portrait using  p5.js. I wanted to practice how basic shapes like circles, rectangles, and arcs can be layered to form a face. Instead of making it realistic, I focused on keeping it playful and expressive.

I also wanted my portrait to react to the viewer. That’s why I added interactivity with the mouse. The eyes follow the mouse pointer around the screen, and the mouth changes its size depending on how high or low the mouse is. This makes the portrait feel alive, almost as if it is looking back at you.

Code Highlight

One part of the code I am most proud of is how I handled the pupils. Normally, if you just link the pupils to mouseX and mouseY, they will move all over the canvas and leave the eyeballs. To fix this, I used the constrain() function. This keeps the pupils inside a specific range so they stay within the white part of the eyes.

// Pupils follow the mouse but stay inside the eyes
let pupilLeftX = constrain(mouseX, 140, 180);
let pupilLeftY = constrain(mouseY, 225, 255);
let pupilRightX = constrain(mouseX, 220, 260);
let pupilRightY = constrain(mouseY, 225, 255);

fill(0);
ellipse(pupilLeftX, pupilLeftY, 20, 20);
ellipse(pupilRightX, pupilRightY, 20, 20);

Here is my portrait:

Reflection

This assignment has  showed me how even the simplest shapes can be combined to make something expressive. The interactivity made it more engaging, and I enjoyed seeing how the eyes and mouth could “react” to movement.

If I had more time, I would like to:

1. Add more details to the hair using curved lines or shapes to make it less blocky.

2. Experiment with different facial expressions (for example, changing the mouth to a frown when the mouse is at the top of the screen, or raising the eyebrows).

3. Change the background color based on the mouse position to give the portrait different moods.

4. Add accessories like glasses or a hat using more shapes.In all , I enjoyed creating this portrait.