References and Inspiration

This project was inspired by sunsets, specifically their color transitions from yellow to orange and purple. These colors were used to design the gradient effect in the particle trails. The movement of the particles was influenced by the idea of natural flows and atmospheric motion. On the technical side, the code was built in p5.js using established techniques such as Perlin noise flow fields and particle systems, which were adapted to fit the chosen sunset theme.

Embedded Code

//this is our particle class responsible for each line of perlin noise
class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height)); //randomly positioned
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 2; //limit to how fast the particle moves
    this.prevPos = this.pos.copy(); //saves the previous/latest position of the trail 
  }

  update() {
    this.vel.add(this.acc); //alowing the vleocity to change based on the acceleration 
    this.vel.limit(this.maxSpeed); //limting the speed
    this.pos.add(this.vel); //change position based on the velocity 
    this.acc.mult(0); //reset accelration so it foes not increase infintely 
  }

  applyForce(force) {
    this.acc.add(force);
  }

  follow(vectors) {
    let x = floor(this.pos.x / scl); //getting the position of the particle x and y 
    let y = floor(this.pos.y / scl);
    let index = x + y * cols; //makingt he 2d grid into 1 d for indexing
    let force = vectors[index]; //access the vector at index
    this.applyForce(force); //apply the perlin noise
  }


  show() {
    // Sunset gradient colors
    let t = map(this.pos.y, 0, height, 0, 1);

    // Top → yellow, middle → orange/red, bottom → purple
    let topColor = color(255, 200, 50, 30);    // golden yellow
    let midColor = color(255, 100, 50, 30);    // deep orange/red
    let bottomColor = color(180, 60, 160, 30); // magenta/purple

    
    
    let c; // c is the chosen "sunset color"
    if (t < 0.5) { c = lerpColor(topColor, midColor, t * 2); } else { c = lerpColor(midColor, bottomColor, (t - 0.5) * 2); } stroke(c); strokeWeight(1.5); line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y); this.updatePrev(); } updatePrev() { //updating to make sure that the trail starts from the current positoin for the next/continued oaeticle this.prevPos.set(this.pos); } edges() { //limit particles ot stay within the frame if (this.pos.x > width) {
      this.pos.x = 0;
      this.updatePrev();
    }
    if (this.pos.x < 0) { this.pos.x = width; this.updatePrev(); } if (this.pos.y > height) {
      this.pos.y = 0;
      this.updatePrev();
    }
    if (this.pos.y < 0) {
      this.pos.y = height;
      this.updatePrev();
    }
  }
}

Concept:

In my p5.js sketch for this week, I mainly use a particle system where many small points move across the screen, each leaving a trail. Their movement is controlled by a flow field, which is simialr to an invisible grid of arrows that points the particles in the direction they should move in. The directions of these arrows are created with Perlin noise, which makes the movement look smooth and natural instead of random. Each particle updates its position based on the flow field and avoids the mouse when it gets too close, adding interactivity. To match the sunset theme, the particles are colored with a gradient that changes from yellow to orange to purple depending on their vertical position on the screen.

Problems I Ran Into:

I had to review the previous Decoding Nature slides in order to refresh my memory on the concepts like flow field and perlin noise, and particles leaving a trail. So although it was not exactly a “problem” I had to readjust some parameters and play around with the values of certain parameters to remember what they were responsible for.

Embedded Skecth:

Reflection & Future Sketches:

I plan to incorporate more of the concepts taught in decoding nature to the weekly sketches.  I also want to focus on the creative elements and aspects of the sketches.Looking ahead, I want to experiment with making the particles react to more external inputs, such as sound or keyboard interaction, to create more dynamic sketches.

 

Reading Reflection:

When readings Crawfords piece I noticed that he mainly focused on three elements that make strong creativity: Listening, Thinking, and Speaking. By listening he means the system should be able to “capture” or “record”. Not only that but to accurately respond to certain triggers, whether it would be accurately through time, as in instant reaction, or accurately respond in an area specifically clicked on through the mouse.

After reading the piece, I have a few ideas for future sketches that will enhance the interactivity. For example, I want to start integrating all the Listening, Thinking, and Speaking elements cohesively so that the user does not have to be told that the piece is interactive- the piece speaks for itself. For instance, if my sketch has audio interaction or mouse interaction, I want the interactive element to shine through and to be the main focus rather than just an addition..

 

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.

Reading Chris Crawford’s chapter “What Exactly Is Interactivity?” made me rethink what I usually call “interactive.” Especially, now as I am taking 3 IM classes, and we often see the artworks and come to the term interactive, I have started to understand how truly important it is. After the reading, I realized that I often label something as interactive just because I can click or move something and it changes, but Crawford’s explanation made me see that real interactivity is much deeper than that. I really liked his comparison to conversation, it made sense that true interactivity should feel like a back-and-forth exchange where both sides “listen, think, and speak.” This idea made me reflect on my own p5 sketches and notice that, while they respond to user input, they do not necessarily feel like a conversation. They just react without much “thinking” or meaningful change based on the user’s action.

Speaking of 5p, the reading challenged me to think about how I can make my work more engaging and meaningful. I felt motivated to experiment more with giving my sketches some kind of “memory” or adaptive behavior so that the experience feels less mechanical and more like a dialogue. For me, a strongly interactive system is one where the user’s input actually matters and shapes the outcome in noticeable, sometimes unexpected ways. It should feel like the system is “paying attention” and changing its behavior based on what I do, rather than just executing a simple trigger. I think strong interaction also invites me to explore, experiment, and maybe even get surprised by the result.

After the reading, I had some ideas of how I can improve my interactivity of  p5 sketches. I could add elements that respond over time or evolve depending on how much and how often I interact. For example, instead of bubbles just appearing when I click (assignment 3 – OPP), I could make them “learn” from my clicks, maybe clustering in areas where I click often or changing colors based on patterns of interaction. I could also make my sketches remember past actions so that the experience feels continuous rather than resetting each time. I think, after this steps, it would move my work closer to what Crawford calls a real conversation between user and system.

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 project, I wanted to make something a bit more playful and fun. I took inspiration from the classic “Why did the chicken cross the road?” joke, but instead of just one answer, I made each chicken have its own punchline inside a speech bubble. This time I wanted to use a more creative inspiration and make it a little comedic by playing with humor and randomness.

I also challenged myself more with the coding. I didn’t just stick to what we already learned in class, but tried to experiment by looking things up, exploring, and figuring out how to make it work. For example, I had to learn how to make the speech bubble size change depending on the sentence length, and how to make sure each chicken gets a unique punchline. It was tricky, but I liked that I was able to understand and fix something new on my own.

So overall, this piece is both about the humor of random answers to the same old joke, and also about me pushing myself creatively and technically.

Highlight of a code i’m proud of:

One part of my code I’m really proud of is how I made sure each chicken gets a unique punchline. I used shuffle(punchlines, true) to mix up all the punchlines randomly so the order isn’t always the same. The true part is important because it tells the program to change the original punchlines array directly, instead of just making a shuffled copy. This way, when I assign punchlines to chickens, the original array is already randomized. Then, I looped through the array with for (let i = 0; i < punchlines.length; i++) to create a new chicken for each punchline using chickens.push(new Chicken(0, 50 + i * 40, punchlines[i]). The 0 makes each chicken start on the left side of the canvas, and 50 + i * 40 spaces them vertically so they don’t overlap. I like this part because it shows how I can combine arrays, loops, and objects to create multiple unique characters on the screen, and it really brings the sketch to life.

// shuffle punchlines so each chicken gets a unique one
  shuffle(punchlines, true); // randomize the order of punchlines in place

  // create one chicken for each punchline
  for (let i = 0; i < punchlines.length; i++) {
    // x = 0 so chicken starts on left
    // y = 50 + i*40 to space them vertically
    // punchlines[i] gives each chicken its own joke
    chickens.push(new Chicken(0, 50 + i * 40, punchlines[i]));
  }
}

Problems I Ran Into: 

   – Speech bubbles being too small
At first, the text didn’t fit inside the bubbles. I fixed this by using textWidth() to measure the punchline and then adding padding, so the bubble grows depending on how long the sentence is.

   – Same punchlines repeating
In the beginning, some chickens had the same joke. To fix this, I used shuffle(punchlines, true) so the punchlines get mixed up randomly, and each chicken gets its own unique one.

– Balancing simplicity and creativity
I didn’t want the code to be too complicated, but I still wanted it to be fun and creative. That’s why I kept the chicken shape simple (just ellipses for the body and a triangle for the beak) and focused more on the concept with the speech bubbles and punchlines.

Reflection and ideas for future work or improvements: 

I really enjoyed making this project because it let me experiment with coding in a creative way, using arrays, loops, and objects together. I learned a lot about how to structure a sketch, how to make multiple objects move independently. 

For future improvements, I’d love to make the sketch even more dynamic and interactive. For example, I could let the user click on a chicken to make it say a new punchline, or have the chickens move at different speeds across a more detailed road scene. I could also experiment with animations in the bubbles, like making them pop up.  Another idea is to add more randomness to the chicken shapes or colors to give each one even more personality. Overall, I’d like to keep exploring ways to make the sketch playful and visually fun while practicing more advanced coding techniques.

Concept

When I started thinking about how I wanted to use Object-Oriented Programming (OOP) in my project, I imagined an underwater world. I wanted to make something calm and relaxing, so I created a digital aquarium. In this scene, bubbles float gently to the surface, colorful fish swim across the canvas, and seaweed sways back and forth at the bottom of the ocean.

Each time the sketch runs, the scene looks slightly different. The bubbles start at random positions and have different sizes and speeds. The fish are given random colors and swim in different directions, and even the seaweed moves with slightly different timing. This randomness makes the project feel alive,  it never looks exactly the same twice.

I also wanted the viewer to feel like they could interact with the piece. When you click anywhere on the canvas, new bubbles appear, as if you are adding more air into the water. I think this small interaction gives the viewer the feeling that they are part of the underwater world, and they can keep changing it over time

Code I am proud of

Since this was one of my first tries using OOP, I am proud of how I used classes and arrays to keep my code neat and reusable. Instead of writing separate code for every single bubble, fish, or piece of seaweed, I made classes for each one with their own properties and methods. Then I stored all the objects in arrays and used a simple loop to update and display them. It made my code much easier to read and change, if I want to add more bubbles or fish, I just push a new object into the array and everything works automatically.

function displayBubbles() {
  for (let b of bubbleArray) {
    b.update();
    b.show();
  }
}

Also, there was some difficulties, for example, all the bubbles were moving in perfectly straight lines, which looked too mechanical. To make them look more natural, I added a sin() wave offset and a slight random angular speed so they gently drift side to side as they rise

update() {
    // Move upward and slight sideways wiggle
    this.y -= this.speed;
    this.x += sin(this.angle) * 0.5;
    this.angle += this.angleSpeed;

    // reset bubble when it leaves canvas
    if (this.y < -this.size) {
      this.y = height + this.size;
      this.x = random(width);
    }
  }

Sketch:

Click the mouse to add more bubbles

Reflection

I am proud of how this project demonstrates the use of Object-Oriented Programming (OOP), arrays, and dynamic interactivity to create a visually engaging underwater scene. I was able to organize the code cleanly, avoid repetition, and make it scalable, while arrays allowed for easy iteration and animation

Yet, I think for the future development, I could increase interactivity by having fish respond to the mouse or implement bubble popping effects, introduce more dynamic visuals such as a gradient background, diverse sea creatures, and multi-layered seaweed for depth, and incorporate physics-based movement or sound interaction to create a more immersive experience. Overall,  for me this project combines programming, aesthetics, and interactivity that explores potential of generative digital art.

While reading Chris Crawford’s chapter on “What Exactly Is Interactivity?”, it was interesting to him use the metaphor of listening, thinking, and speaking as the foundation of interactivity. This conversational model made the concept easier to grasp because it parallels something we intuitively understand, human dialogue. However, when Crawford extended these terms into a more literal context, insisting that actors must possess intellectual ability, I found it difficult to relate to his perspective.  For me, interactivity is whether one actor’s input produces a meaningful change in the other. Therefore, I found myself questioning some of Crawford’s examples. For instance, he dismisses the refrigerator light as non-interactive because it does not truly “think.” Yet I feel that even in his own terms, the refrigerator does listen and respond. When someone opens a refrigerator they are giving an input and the refrigerator is listening to it and by thinking it then turns on the light. To me, that still counts as a form of interactivity, even if it is simplistic or mechanistic.

Additionally, I agreed with several of his distinctions. His argument that reading a book is not interactive made sense: the book only “speaks,” but it does not adapt to or acknowledge the reader. The same applies to dancing: two dancers interact with each other, but the music itself is not interacting with them. These examples clarified for me the difference between experiences/ participation and genuine interaction.

Moving forward, when Crawford discussed movies, I started thinking about the children’s show Dora the Explorer. On the surface, it seems interactive because Dora asks the viewer questions. However, as Crawford would point out, the show fails at “listening.” It cannot actually register or respond to the viewer’s input, which makes the interactivity an illusion rather than reality. This helped me recognise that some systems or media may simulate interactivity without fully achieving it.

Ultimately, I interpret interactivity as a cause-and-effect relationship. If my input changes the receiver’s action, then interactivity has occurred. This perspective also ties into what we are learning in class. Functions like mousePressed() or keyPressed() are fundamental building blocks that create interactive spaces. In my Week 3 assignment, I experimented with this by coding a response to mouse clicks. Looking ahead, I want to experiment with creating interactions that are not uniform for every user but instead feel more personal and dynamic. For example, rather than coding a mouse click to always trigger the same outcome, I could design the system so that each person’s click produces a different reaction. This could be achieved by introducing elements of randomness, personalisation, or memory.

When I first read that activities like reading or dancing are not really interactive, I was confused. I always thought that simply reacting to something counted as interacting, so I had to question my own assumptions. Crawford explains that strong interaction requires three elements: listening, thinking, and speaking. Listening is when the system notices what the user does, thinking is when it figures out how to respond, and speaking is when it actually shows that response. I realized that many of my sketches are more reactive than interactive. They respond to clicks or mouse movement, but they do not really “think.” Without all three elements, interaction feels one-sided or unsatisfying. Thinking about this helped me see that interactivity is really a two-way conversation, where the program and the user are both active participants. The reading also made me reflect on the balance between predictability and surprise. If the sketch always responds the same way, it quickly becomes boring. If it responds randomly without logic, it can feel confusing. Strong interactivity happens when the user feels like their actions truly matter, but the system also has its own personality and reasoning.

For my p5 sketches, I want to build this type of interactivity. In my most recent mosaic-style sketch, the program could listen to which shapes the user clicks or where the mouse moves, think by changing the lines, colors, or arcs, and speak by  updating the patterns on the canvas. I also want to add keyboard functions so pressing keys can change the color of something or the layout. By including randomness or subtle variations, each interaction would feel unique while still making sense. This way, the user is not just observing the sketch, they are influencing it, experimenting, and finding out how different interactions can lead to different outcomes. Adding these layers of responsiveness would make the sketch feel alive and engaging, showing the strongest form of interactivity that Crawford describes.

“We are all mosaics of the people we’ve met.”

This artwork started as an idea I couldn’t stop thinking about: what if all the people and experiences in our lives were shapes in a giant, messy mosaic, connected by invisible lines we carry with us? So I made it happen. Each shape, circles, squares, triangles, and some random oddballs, represents a person or a memory. The lines connecting them are the invisible threads of influence that never really go away, no matter where you move or who you become.

I wanted this mosaic to feel alive. It’s not static. The shapes can move around when you click on them, but the connections always stay. It’s a simple interactive twist, but I love how it visually represents the idea that we carry pieces of each other wherever we go. You can almost imagine it breathing, like a community of little tiles that are all related in some way.

 

How I Built It: 

I used Object-Oriented Programming because I wanted each shape to feel like its own little character, with its own position, size, rotation, and even “friends,” aka connections to other shapes. All the shapes live in an array, which makes it super easy to loop through them to draw, animate, and update lines.

The movement was trickier than I thought. I used lerp() to make shapes glide smoothly toward new spots instead of jumping around like they were hyperactive. And here’s a cool tip I learned from The Coding Train: push() and pop() are lifesavers for isolating transformations like rotation and translation. Without them, every rotation or move would have messed up all the other shapes. Honestly, watching that video was a game-changer. I finally understood why isolating transformations is so important in generative art.

The hardest part was keeping the lines connected while shapes moved independently. At first, I tried drawing straight lines, but it looked rigid and didn’t feel like a living mosaic. I solved it by using curved lines with quadratic vertex and a little randomness to the midpoint, which made the connections feel fluid and unique. I also had to carefully loop through each shape’s connections array so that every connection stayed accurate even when shapes moved.I must have spent hours fiddling with arrays and connections, trying to get it to feel smooth but not rigid. I think it ended up working, and honestly, I kind of love the little quirks. The lines stretch and bend in ways that feel alive. The code snippet: 

// Draw connecting lines
stroke(255, 100);
strokeWeight(2);
for (let i = 0; i < shapes.length; i++) {
  for (let target of shapes[i].connections) {
    // curved line for mosaic effect
    let mx = (shapes[i].x + shapes[target].x) / 2 + random(-20, 20);
    let my = (shapes[i].y + shapes[target].y) / 2 + random(-20, 20);
    noFill();
    beginShape();
    vertex(shapes[i].x, shapes[i].y);
    quadraticVertex(mx, my, shapes[target].x, shapes[target].y);
    endShape();
  }
}

The Interactivity:

You can click on any shape, and it will move to a new random location. The lines stretch and follow, showing that even if things move around in life, the connections remain. I considered adding drag-and-drop or color changes, but I kind of like it simple. Letting the shapes shift on their own feels like they have a mind of their own.

Reflection : 

This project taught me a few things:

• Classes and arrays are magical once you get them to work together 
• lerp() is a lifesaver for smooth motion 
• push() and pop() are your best friends for rotations and translations (thanks, Coding Train) 
• Generative art can be messy and chaotic, but sometimes that’s exactly the point 

If I did this again, I’d probably add more personality to each shape, maybe tiny patterns or colors that reflect “who” each piece is. For now, I like how it’s simple, a little messy, and interactive, like a mini community on the screen.

The inspiration for this art piece came from cherry blossoms in Japan. My friend was telling me stories of when she visited and how beautiful, peaceful, and calming being around the blossoms felt for her. While exploring generative art online, I also came across examples of flow fields that captured a similar sense of beauty. I liked one of the examples and decided to integrate that idea with the concept of cherry blossoms.

For this piece, I try to mimic the nature of cherry blossoms and recreate that positive, calming environment around them. Each circle in this artwork represents a blossom, drifting softly in circular motion like petals swaying in a spring breeze. They begin large and vivid, then slowly shrink, mirroring the delicate, short-lived bloom of cherry trees that peak for only a brief moment before fading. Because cherry blossoms symbolize new beginnings and fresh starts, every click becomes a moment of renewal. The background’s soft pink hue further evokes this atmosphere.

move() {
    // moving ball in a circular motion
    this.angle += this.speed;

    // Calculate new position
    this.x = this.x + (this.d / 2) * cos(this.angle);
    this.y = this.y + (this.d / 2) * sin(this.angle);
  }

The above code defines the movement of class and is particularly something I’m really proud of. In class so far we have only talked about linear motion but I have observed that many of my classmates have used sin and cosine functions, hence, for this project I decided to venture out, learn something new and incorporate it into the sketch. In the code the angle increases by speed and while mapping it in x-coordinate, y-coordinate I know that x=r*cos(angle), y=r*sin(angle) and since we are increase the x by this value, I add it to this.x.

One challenge I faced while creating this artwork was drawing the circular path of motion. At first, I wasn’t sure how to model this in p5.js. After some research, I discovered that sine and cosine functions could be used to trace circular paths, and I learned how to increase the angle gradually to animate the motion. Another challenge was resizing the blossoms: initially, all my circles shrank to a fixed diameter of 20, but I wanted each to reduce to a random size. To solve this, I introduced a  targetSize variable, which allowed each blossom to shrink smoothly to its own unique final size.

In the future, I would like to add gradual color transitions. Specifically, I imagine the blossoms changing from colorful hues to red, where red represents the fading or “death” of the blossoms. I think this would add another poetic layer to the theme of impermanence.