Category: F2025 – Aya

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.

Concept:

I always see people talk about how everyone and everything are connected one way or another, and I find that to be very true. I always find weird connections that bring me and others together, and in my classes, they seem to overlap more often than not, which is a good thing! In all honesty, at first I was going to attempt an artwork that incorporated the spiderman suit pattern somehow, but I found myself overcomplicating it and confusing myself, so I went with this idea instead. A web of connections, and every time you press, more connections happen, like how the more you interact with people or things, the more connections you ge,t whether to others or a bigger scope of understanding.

Part I am proud of:

//draw nodes and connections
function drawWeb() {
  background(0);

  //draw connections
  //the further apart the nodes are
  //the fainter the lines
  for (let i = 0; i < nodes.length; i++) {
    for (let j = i + 1; j < nodes.length; j++) {
      let d = dist(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
      if (d < connectionDistance) {
        let alpha = map(d, 0, connectionDistance, 255, 50);
        stroke(255, alpha);
        line(nodes[i].x, nodes[i].y, nodes[j].x, nodes[j].y);
      }
    }
  }

  //draw all nodes
  for (let node of nodes) {
    node.show();
  }
}

I used the help of ChatGPT to help me with the thought process, but essentially, I wanted to make the closer connections look bolder and the further ones more faint. I hadn’t used alpha previously; I always rely on manually choosing the color instead, so this was a hands-on way for me to learn.

//when mouse is pressed
//add more nodes and draw connections
function mousePressed() {
  // add 5 new nodes at random 
  for (let i = 0; i < 5; i++) {
    nodes.push(new Node(random(width), random(height)));
  }
  
  drawWeb(); //redraw everything including new nodes
}

I also chose to redraw every time new nodes and connections are made because otherwise, we could see a lot of overlap, and the work would lose some of its visual appeal.

The Art Piece:

Reflection:

To reflect, I want to talk about a struggle I faced that is not related to the final product or my code, but rather that I found myself getting overwhelmed because I had so many ideas, yet neither the time nor the skill to create them yet and so I decided to kind of take a step back and take a more simplistic route. Simple can sometimes be better, and I feel like, in hindsight, the work I created is a pretty solid representation of how my brain feels at times with creative projects like these.

In my opinion, what makes a strongly interactive system is, as Crawford put it, the “cyclic process in which two actors alternately listen, think, and speak”. It reminded me of something I am learning about in another class of mine, where we read Sartre. A French Philosopher and a major player when it comes to existentialism. In his work, ‘Why Write’, he makes a point in saying that with written forms of art, like books, simply writing it isn’t enough. The reader and the action of reading are what bring the work to life. He describes writing as a creative direction in which the author guides the reader to think in a certain way, but the perception of the reader is still uniquely theirs. In a way, we have presented the speaker of the two actors, which would be the writer. Then the listener and thinker would be the reader. The role of both actors here isn’t passive engagement; the listener should be thinking about what the speaker is saying to make connections and give what the speaker’s saying a broader meaning. Likewise, the speaker should think about what they say and how to respond to what was said by the listener when the roles are reversed. 

I believe that implementing in p5.js what I have in mind would be rather difficult, but a welcome challenge. User input really matters here, and I think adding aspects like microphone access might be a way to consider that. While I’m not sure how complex projects can go on p5, I think something where it registers voice commands to do certain tasks would be very interesting and interactive. Also, having seen previous IM showcases, a potential idea I have in mind, which would combine arduino and p5js would be a functioning (or almost) Spiderman web shooter.

I agree with the author’s point that interactivity only happens when two subjects are actively engaging with each other through purposefully listening, thinking, and speaking to each other. In my personal experience, I used to feel lonely and left out when a person who I was talking to was scrolling on their phone while I was seriously talking to them about my idea during the team project back in my high school. I felt like I was ignored and I thought I was talking to myself. I think there was no interactivity at all in that situation. 

Also, from what I learned in the class called Immersive Experiences I took in the fall semester last year, I think interactivity also needs to incorporate as much sensory information as possible. For example, if you close your eyes and block your ears completely when someone is talking to you, you won’t be able to know who that person is and what that person is talking about. So, a lack of interactivity can also lead to a lack of information and understanding in real-life situations.