Category: F2025 – Aya

Here’s the final output:

For this program I want users to interact with balls on the screen to check how fast they can click on the ball that randomly appears on the screen.

To control the ball instance, I created a ball.js class in the files and part of the code that I am proud of is

isExpired(now) {
    return now - this.bornAt >= this.lifespan;
  }

  contains(px, py) {
    return dist(px, py, this.x, this.y) <= this.r;
  }

this code control the ball disappearing time as users will fail to click on the ball if they move their mouse slow.

To control which ball to disappear in a sequential manner, I use array to control the sequence of spawning and disappearing the ball

for (let i = balls.length - 1; i >= 0; i--) {
    let b = balls[i];
    b.draw();

    // remove if expired
    if (b.isExpired(now)) {
      balls.splice(i, 1);
    }

Future Improvements:

I could add a score board somewhere so that user know how they well they perform in this “clicking the ball game.”

Prompt: What do you consider to be the characteristics of a strongly interactive system? What ideas do you have for improving the degree of user interaction in your p5 sketches?

Based on the reading, a strong interactive system would involve several cycles of listening, thinking, and speaking processes. He denied movie as interactive as the content does not alter based on audiences’ reactions. However, I strongly disagree his opinion as audiences choose to attend this movie to listen the expressions by the movie directors expressed through images and sounds, during the watching experience, movies would alter audience emotion along and this process, in my opinion, is interactive. i believe interactivity should be defined as a media’s ability alter the state of its audiences. And therefore a strong interactivity would be medias that have really strong ability to affect the audience whether it is through responding audiences’ input or itself would be strong enough to affect audience regardless of their reaction. There are several ways of affect audiences and we don’t have to limit the ways of interactivity like the author did.

To improve the degree of user interaction, I believe there are two aspects that I should consider most. First, the design itself should be full of aesthetics and would emotionally change the audiences’ states. Second, the design would change based on the user input to improve the level of engagement or concentration of the audiences.

For a long time creating art was a linear process, with a clear beginning and end points, they were made to be viewed and attract reactions from their target audience. This was until we introduced interactivity into works, since then many have adopted a more ‘cyclic’ approach where the beginning is set in stone and the journey to end is more adaptive and influenced by the viewer. But what is that interactivity that is capable of affecting the path of a work that much? Crawford defines true interactivity as not merely participation or response but as an endless, two-way cycle of listening, thinking, and speaking by both the user and the system. Both sides must look, process, and respond, influencing each other in some manner. Without this exchange, even if there is a significant input from the audience, the experience remains linear at its very core.

Now that I look back, I realize that creating interactive art is not just having buttons, choices, or answers, I realized that it’s about creating a system where it can actually respond to the user and have the user’s actions change the experience. The challenge is to do that two-way effect without breaking the cohesiveness of the story or the aesthetic, similar to the challenge that was discussed last reading about randomness.  Balancing things such as interactivity and randomness while maintaining a logical flow that the user can follow is quiet a difficult task. To me, this idea holds possibility for my own work, the user is not anymore a passive receiver but an active participant whose decisions and actions construct a unique experience each time. After reading the text, in my future works I’d like to now create a conversation between the user and the works where they both respond to each other’s cues creating a work that it truly interactive.

Concept & Inspiration

When I first started working on this project, the Wi-Fi didn’t work and I was welcomed with the familiar Google Dinosaur game on my screen that appears when there is no connection. That simple little dinosaur planted the idea in my mind for a playful take, a prisoner committing an escape through a pixelated desert. The prisoner is guided by the player as he jumps over cacti with rolling tumbleweeds in the background adding to the atmosphere as he attempts to outrun the inevitable collision that make the game end. I aimed to add some gamification to the work, so it is interactive in a way that directly affects the narrative, the user decides whether the prisoner escapes or not. The desert is dramatized with gradient skies giving it depth and atmosphere without breaking up gameplay. To make the character interesting and match the aesthetic of the original game, I added a pixelated body, clothing, and even simple facial features, so every dodge and every jump feels dynamic and personal. In retrospect on the project, I enjoyed taking a fundamental, well-known mechanic and making it something more story-based and visual. My objective was to make the user more in control of the narrative compared to my previous work, making each playthrough a lighthearted and engaging choice-based experience.

Code that I am Proud of

display() {
    rectMode(CENTER);
    noStroke();

    //Legs
    fill(255, 120, 0);
    rect(this.x - 10, this.y - this.legHeight / 2, this.legWidth, this.legHeight); //left leg
    rect(this.x + 10, this.y - this.legHeight / 2, this.legWidth, this.legHeight); //right leg

    //Feet
    fill(0);
    rect(this.x - 10, this.y, this.legWidth + 2, 5); //left foot
    rect(this.x + 10, this.y, this.legWidth + 2, 5); //right foot

    //Body (torso)
    fill(255, 120, 0);
    rect(this.x, this.y - this.legHeight - this.bodyHeight / 2, this.bodyWidth, this.bodyHeight); //torso

    //Arms
    fill(255, 120, 0);
    rect(this.x - this.bodyWidth / 2 - this.armWidth / 2, this.y - this.legHeight - this.bodyHeight / 2, this.armWidth, this.armHeight); //left arm
    rect(this.x + this.bodyWidth / 2 + this.armWidth / 2, this.y - this.legHeight - this.bodyHeight / 2, this.armWidth, this.armHeight); //right arm

    //Head
    fill(255, 220, 180);
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 15, 20, 20); //pixel head

    //Prisoner beanie
    fill(255, 140, 0);
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 25, 20, 8);//beanie band
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 30, 16, 5);//top of beanie

    //Facial features
    fill(0); //eyes
    rect(this.x - 5, this.y - this.legHeight - this.bodyHeight - 20, 3, 3); //left eye
    rect(this.x + 5, this.y - this.legHeight - this.bodyHeight - 20, 3, 3); //right eye

    fill(150, 0, 0); //mouth
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 10, 6, 2); //simple mouth
  }
}

With a goal of focusing more on the artistic and creative aspects of this assignment, I’d say I am most proud of the design of the prisoner for the game. I wanted to go for a more pixilated look to match the aesthetic of the original game and gave the design of the prisoner a lot of focus. I am proud of this code merging visual creativity with functional interactivity, the arms, legs, beanie, facial features were all carefully positioned to give personality, while integrating the goal look of the character. Through this code I learnt the importance of the visuals in determining the feel of the game.

Embedded Sketch

Reflection

The main challenge I ran into while creating this game I’d say was balancing the focus on visual design as well as on the functional side of the work. For example, designing the prisoner to be pixelated yet still have recognizable features required careful positioning. So I had to constantly test and adjust the sizes so that the character didn’t interfere with collision detection. However, at the same time it was a learning experience where I went more in depth into the possibilities that come with this program. Next time I’d like to focus more on creating a more detailed visual world where more elements are integrated to create an immersive work.

Before reading The Art of Interactive Design, I used to think that once we receive a reaction from another thing, that automatically defines the concept of interactivity. When I came across the example of the Nintendo refrigerators on page 11, I immediately felt that it was an example of interactivity. Crawford, however, raised the idea of whether interactivity is subjective or a fixed concept of its absence or presence. After giving his argument careful thought, I believe that interactivity is subjective because it depends on how engaged the user is with the system. The same design might feel highly interactive to one person and mostly reactive to another, depending on how much input and attention they give. Drawing from his analysis and interpretation of interactivity in conversation, both parties must play their part to have a meaningful exchange. This is what I believe is the characteristic of a strongly interactive system: “input, process, and output from both ends must be very strong.”

Comparing that to the interactivity of a design, one user might find a design not interactive based on a low level of engagement on their part, while another user might find it highly interactive. Crawford really got me thinking when he highlighted the subtle difference between reaction and interaction. I have now realized that my p5.js sketches are mostly reactive and not interactive, since they respond to pre-programmed rules without requiring meaningful input from the user. Moving forward, I want to experiment with ways to make my sketches more interactive, such as allowing users to influence patterns, colors, or motion in real time, so the system becomes a collaborative experience rather than just a reactive one.

Concept

For this project, I wanted to make something playful and a little alive. I imagined ordinary water bottles sitting on a table and thought about what it would look like if they could bounce around on their own. Well, needless to say, I have some funny stories with water bottle, and so I wanted to create this specifically. I wanted each bottle to feel different, with its own color, size, and movement.

To make this work efficiently, I used object-oriented programming. Each bottle is an instance of a WaterBottle class with its own properties like position, size, color, velocity, and gravity.

Part of the Code I’m Proud Of

One of the parts I like the most is ensuring each bottle had a unique color while keeping everything randomized. While it’s easy to do, I found it fun to experiment with colors.

let shuffledColors = shuffle(BOTTLE_COLORS).slice(0, NUM_BOTTLES);
for (let i = 0; i < NUM_BOTTLES; i++) {
  bottles.push(new WaterBottle(
    random(50, width - 50),
    height - TABLE_HEIGHT,
    random(30, 50),
    shuffledColors[i]
  ));
}

Here I shuffle the array of predefined colors and then slice the first few to assign one to each bottle. This guarantees uniqueness without hardcoding or risking duplicates. Then I loop through and create a new WaterBottle instance for each color, giving it a random size and horizontal position.

The class itself encapsulates the motion logic:

class WaterBottle {
  constructor(x, y, size, bottleColor) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.baseY = y;
    this.velocity = random(-8, -5);
    this.gravity = 0.1;
    this.color = color(bottleColor);
  }

  update() {
    this.velocity += this.gravity;
    this.y += this.velocity;

    if (this.y > this.baseY) {
      this.y = this.baseY;
      this.velocity = random(-8, -5);
    }
  }

  display() {
    push();
    fill(this.color);
    noStroke();
    rectMode(CENTER);
    rect(this.x, this.y - this.size / 2, this.size / 2, this.size);
    fill(200);
    rect(this.x, this.y - this.size, this.size / 3, this.size / 7);
    pop();
  }
}

Reflection and Future Work

This project allowed me to combine visual creativity with programmatic thinking. I practiced designing independent objects, managing them in arrays, and applying simple physics in a clean, maintainable way.

For future improvements, I could: implement collisions so bottles interact with each other, add rotation or wobble for more lifelike motion, or let the user click a bottle to apply an impulse or change its colorOverall, the project demonstrates how small variations in physics and color, combined with object-oriented design, can turn a simple idea into a dynamic, generative animation.

Overall, it was incredibly fun!

Concept:

For this assignment, I tried to recreate the random walker algorithm. I used an array to keep track of all the walkers and a class to define how each one moves and displays. The walkers choose random directions at each step, which makes the design change constantly and never looks the same twice. I also added different colors so their paths would overlap in interesting ways and fill the screen with patterns. Using loops made it easier to update and draw all the walkers at once instead of writing separate code for each.

Code Highlight

I’m really proud of how I built the step() function for my walkers. It looks simple, but it’s the heart of the project. By randomly choosing between four directions, each walker ends up moving in unpredictable ways.

step() {
    let choice = int(random(4));
    if (choice === 0) {
      this.x += 2;
    } else if (choice === 1) {
      this.x -= 2;
    } else if (choice === 2) {
      this.y += 2;
    } else {
      this.y -= 2;
    }

Embedded Sketch

Reflections & Future improvements

This project was fun because it used simple functions to create a constantly changing visual. I like that each walker moves randomly and has its own color, creating patterns that are never the same twice. The step() function is especially satisfying, since such a small piece of code drives the entire motion. Using a class to manage each walker made the code organized and easier to expand.

To improve upon my current code, I would like to include more movement variation, such as diagonal movement.  I would also like to let the user click to add more walkers or control colors, which would make the design interactive. I could also have walkers bounce off edges or wrap around the canvas for more interesting patterns.

When i read the “The Arts of interactive Design” , I thought about  interactivity as a real conversation. It’s not about one side doing all the talking. It’s a loop where both sides listen, think about what was said, and then respond. If any part of that loop is weak, the whole interaction feels flat and broken.

For me, a strongly interactive system feels thoughtful and alive. It pays close attention to my actions, processes them in a meaningful way, and gives me a response that shows it “understood” me. It’s not just a simple reaction, like a light switch. It’s more like a good friend who remembers what you said earlier and brings it up again later.

Looking at my own p5 sketches, I realize they are mostly just reactive. They respond to a mouse click or a key press, but that’s it. They don’t really listen to how I do something, they don’t think or remember my past actions, and their response is often a simple, pre-set animation. There is no real dialogue.

To improve them, I need to focus on all three parts of the conversation. I want to make my sketches better listeners by paying attention to things like mouse speed or rhythm. I want to give them a simple memory so they can learn from my previous actions and change their behavior over time. Finally, I want their visual responses to feel more like an answer to what I just did, rather than a generic effect. My goal is to move from creating sketches that just react to creating sketches that feel like they are having a simple, but genuine, conversation with me.

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.