Author: Mariam Aljunaibi

Chris Crawford compares interactivity to two people holding a conversation, where each listens and responds, and that back and forth creates something dynamic. Before reading this, I hadn’t really thought deeply about what makes a system truly interactive, and Crawford’s explanation really clarified it for me. I agree with him because a strongly interactive system is one where the user’s input can meaningfully change the outcome, rather than just triggering a predictable or surface-level reaction. That’s when interaction feels real.

For my own p5 sketches, I’ve thought about ways I could improve the interactivity in them. Instead of just clicking to trigger something to happen, the sketch could react differently depending on the type of input, like how long you hold a key or how fast your mouse is moving. This would make the artwork/program feel less like a machine following certain orders and more like an actual conversation between the user and the program.

Concept

When I thought about what to do for this assignment, I started brainstorming and eventually decided to create a simple simulation of rainfall. I always found rain both calming and visually appealing, so I wanted to capture that feeling in my artwork.

Code I’m Proud Of

I’m proud of this code because I figured out how to make the raindrops disappear at the bottom of the canvas (when they reach the sea). At first, I used pop(), but it didn’t work the way I wanted it to: it would randomly delete all the droplets in the middle of the page. So I researched a bit and instead, used splice(), it deletes the droplets when they reach the bottom of the page and works perfectly!

//deletes raindrops after they reach the sea
if (raindrops[i].disappear()) {
  raindrops.splice(i,1);
  //splice removes/deletes the disappeared raindrops 
}

Here’s the artwork I created:

Reflection and Future Improvements

Overall, I’m happy with the way my rainfall artwork turned out. I especially liked learning how to use arrays with objects because it made me think more carefully about organization and how each part of the code connects.

If I were to improve this piece in the future, I’d probably add sound effects of rain falling, or even experiment with lightning and thunder for a more dramatic atmosphere. Another idea I had is to adapt the same logic to create snow instead, using different PNGs for different snowflake shapes. That way, the piece could feel more unique while still using the same object-oriented structure I implemented here.

Concept

For this assignment, I decided to create a simple artwork inspired by the portal in the movie Coraline. I’ve always loved how layered and colorful it looks in the film, so I used it as inspiration for my own piece.

Here’s a picture of the portal from Coraline:

Code I’m Proud Of

It took a lot of trial and error to get the loop working properly. Once I figured out how to write the condition correctly, the rings appeared just how I wanted them. I also added randomized colors of blue, purple, and pink to the rings to make them feel closer to the portal from Coraline. I also adjusted the frame rate to create more of a portal effect.

// circles size increase by an increment as it loops
 for (let i = 0; i < ring1; i += 1) {
   let s = minsize + i * increment;
   ellipse(centerX, centerY, s, s);

   // random colors from the list for each ring
   stroke(random(colors));
 }

Here’s the work of art I created:

Reflections and Improvements

Overall, I’m happy with how it turned out. I wasn’t trying to recreate the portal exactly, but instead capture the beauty of its colors and layers. However, I noticed it took me a really long time to figure everything out, and at one point the program kept crashing. I’d like to improve in understanding loops in general to be more efficient in future projects. I’d also love to add animation to this artwork, like making the rings spiral and swirl so it feels more like an actual magical portal.

In his talk, Casey Reas explores how generative art uses code, rules, and chance operations to create dynamic and unpredictable visuals, showing that creativity comes from both structure and chance. I found it particularly interesting when Reas explained that generative art is a space where structured rules interact with randomness, because when people generally think of coding, they assume there’s always a “right” way to do it, but I don’t necessarily think that’s true. I agree with Reas on this point about how chaos and order thrive together in generative art. But at first, I was one of the people who thought coding was strict and bound by certain rules to follow,  now I see that it can be more playful and freeing.

When I was coding my artwork assignment, I decided to add randomized colors to my code to make it more exciting every time I run the code. The outcome always comes out as different and unique from the one before it, and I enjoyed the unpredictability of it. At the same time, I wonder if too much randomness could take away from the artist’s control. Reas seems to always see randomness in a positive way, but I’m not sure I fully agree with that. Personally, I think it works best when theres a balance, where the structure I write in the code guides the randomness so that the results are still under my control to some extent.

Concept

For my self-portrait, I decided to base it on my Animal Crossing Avatar. I thought it would be a fun way to represent myself since my character in the game feels like a version of me. Also, the cartoon style of the avatar fits perfectly for this kind of assignment!

Here’s my character for reference:

Favorite Code

Although I didn’t do anything super complex, I’m especially proud of how the eyes turned out. I think they gave the portrait a lot of personality and helped bring the whole thing together.

//left eye
  fill("black");
  ellipse(175, 225, 38, 50);

  fill("white");
  ellipse(174, 213, 18, 12);
  ellipse(182, 235, 6, 10);

  fill("black");
  triangle(158, 220, 152, 200, 163, 210);

  //right eye
  fill("black");
  ellipse(265, 225, 38, 50);

  fill("white");
  ellipse(265, 213, 18, 12);
  ellipse(274, 235, 6, 10);

  fill("black");
  triangle(248, 220, 241, 200, 251, 210);

Here’s the self-portrait I created:

Reflection and Future Improvements

While working on the portrait, I experimented with different shapes for the mouth and lashes. I tried using curves and Bezier functions, but they didn’t turn out the way I had hoped. In the end, I used an arc for the mouth and a triangle for the lashes, which worked better for the style I was going for.

I also used a semicircle arc for the bangs, but it stuck out a little awkwardly. To fix it, I placed a triangle in the same color as the background on top of the part that was sticking out, but I’m sure there’s probably a cleaner way to handle this.

In the future, I’d like to practice more shapes and figure out better techniques for handling these things.

Overall, this project was a fun way to explore coding and experiment with shapes. I’m excited to keep practicing and see how much more expressive I can make my sketches in the future!