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.