When I was reading ‘Computer Vision for Artists and Designers’, one thing that stood out to me was how computer vision is so different from human vision. For us, seeing feels natural , we can look at a scene and instantly recognize people, objects, emotions, or even context. But computers don’t “see” that way. For them, an image is just a bunch of pixels with numbers. They need step-by-step methods to figure out what’s moving, what belongs in the background, or what part of the picture matters.

The reading showed me some basic techniques that help computers track what we want. For example, frame differencing looks at what’s changed from one frame to the next, background subtraction compares the scene to a saved “empty” version to spot people, and brightness thresholding picks out objects based on how light or dark they are compared to the background. These sound simple, but they can be powerful if the physical setup is right like having strong contrast or good lighting. I liked how the article talks about the environment matters just as much as the code.

Thinking about how this connects to interactive art, I can see both exciting and uneasy sides. On one hand, artists can use tracking to make playful or immersive experiences, like games that respond to your body or installations that react to your movements. That feels fun, creative, and even magical. But at the same time, the same tracking tools can be used for surveillance, like watching people without their consent or profiling them. That tension makes interactive art more thought-provoking, because it forces us to see how technology can be both empowering and controlling.

For me, this makes computer vision in art feel very alive , it’s not just about coding tricks, but about what message the artist is trying to send and how it makes us reflect on being “seen” by machines.

Concept 

I’m making a small interactive vertical Chicken Invaders style shooter game. The player controls a spaceship at the bottom of the screen and can move up, down, left, or right while shooting bullets upward. Chickens (enemies) continuously descend from the top of the screen, and some randomly drop eggs that can damage the player.

The game starts with a start screen that tells the player how to play: “Arrow keys to move, SPACE to shoot. Press SPACE to start.” Once the player starts, waves of chickens begin descending. The player earns points by shooting chickens and can lose lives if hit by enemy eggs. After losing all lives, the game transitions to a Game Over screen, showing the final score and instructions to restart by pressing ENTER.

Player interaction is simple and intuitive:

• Arrow keys: move the spaceship in all directions

• SPACE: shoot bullets upward

• Collision detection: bullets destroy enemies, eggs damage player

• Score and lives display updates in real time

• Continuous spawning keeps the game dynamic and engaging

Code Design

The game is designed in an object-oriented structure:

1. Player class:
   • Controls the spaceship’s position, movement, and display
   • Constrains the player within canvas boundaries
2. Bullet class:
   • Manages bullet position, movement, and collision with enemies
3. Enemy class:
   • Controls chicken position, downward movement, and spawning
   • Randomly generates enemy bullets (eggs)
4. EnemyBullet class:
   • Manages eggs dropped by enemies, movement, and collision with the player
5. Main sketch:
   • Holds a gameState variable: "start" | "playing" | "gameover"
   • Delegates drawing and updates depending on the current game state
   • Spawns new enemies continuously and updates UI elements (score, lives)

Current Game:

Risk & Challenges

The scariest part was managing continuous enemy spawning and collision detection while ensuring smooth movement and responsive player controls. If either bullets or enemy collisions failed, the gameplay would feel broken, and the game could become frustrating.

How I reduced the risk:

• I wrote small test sketches for bullets and enemy collisions first, confirming that collisions were detected reliably

• Spawn timers were implemented to gradually introduce enemies without overloading the canvas

• Player boundaries were constrained using constrain() to avoid moving off-screen

• The gameState system ensures that start, playing, and game over screens never interfere with gameplay logic

Result: collisions, enemy spawning, and player movement are smooth and reliable, so the core gameplay is stable and enjoyable.

Next Steps

• Add background music that loops during gameplay and optional sound effects for shooting and enemy hits

• Add visual enhancements: use emojis, icons, or sprites for player and chickens for more arcade-like feel

• Add multiple enemy types: faster chickens, stronger enemies, or bonus targets

• Implement power-ups: shields, rapid fire, or score multipliers

Something that drives me crazy is when I see an “automatic” door, but it still has a handle that makes me pull it before it opens. There’s one like this in D2, and it confuses me every time. I never know if I should wait for it to open, or if I need to pull it myself. Sometimes I pull too early or too late, and it feels frustrating. This could be improved by making the design consistent: if the door is automatic, it shouldn’t need a pull at all, or at least the handle should be removed to avoid sending mixed signals.

Using Norman’s principles, this is a problem of bad signifiers. The handle suggests pulling, but the automation suggests not touching it. In interactive media, I can avoid this by making sure buttons, icons, or gestures clearly show what the user should do, without mixed signals. I could also apply discoverability and feedback , like for example, if a button is loading, it should change color or show a spinner so the user knows the system is working. That way, people don’t waste time guessing what to do, just like they shouldn’t have to with a simple door.

This is what I feel and believe would help .

Concept

For this week’s coding assignment, I wanted to experiment with generative text, focusing on movement and interactivity rather than static words. My goal was to create a visualization where text on the screen feels like its floating, bouncing, and responding subtly to the viewer’s presence.

The concept I explored was simple: a set of words randomly placed on the canvas float gently in organic patterns. When the user moves the mouse nearby, the words grow slightly, creating a playful and responsive effect. I aimed to evoke a sense of motion and energy, so the text is not just something you read, but something you watch and interact with.

To achieve this, I combined techniques like sine and cosine functions for floating motion, randomized starting positions, and smooth interpolation to make the animation fluid. I also used color variation to give each word a soft, pastel-like appearance, creating a visually pleasing and lively scene.

Code I’m Most Proud

update() {
  // gentle floating motion
  this.x = this.baseX + cos(frameCount * this.speed + this.offset) * 20;
  this.y = this.baseY + sin(frameCount * this.speed + this.offset) * 20;

  // interactive effect: mouse proximity enlarges the word
  let d = dist(mouseX, mouseY, this.x, this.y);
  if (d < 100) {
    this.currentSize = this.size * map(d, 0, 100, 1.8, 1);
  } else {
    this.currentSize = this.size;
  }
}

display() {
  fill(this.color[0], this.color[1], this.color[2], 200);
  textSize(this.currentSize);
  text(this.txt, this.x, this.y);
}

This snippet stands out because it combines two important techniques learned in this assignment: smooth floating motion and  mouse interactivity.

• The use of sine and cosine functions allows each word to float naturally around its base position, giving the visualization a sense of organic movement rather than rigid animation.

• The interactive mouse effect enhances engagement: words near the mouse subtly grow. This adds a playful and interactive quality  to the text.

Final work:

Reflection

I’m happy with how the project looks now, but there are ways to make it even more fun and interactive. For example, each word could be broken into small points and animated individually, so the words could form on the screen or scatter when you move the mouse. The words could also have hover effects, like ripples, sparkles, or subtle movement when the mouse is nearby, making the interaction more engaging. Different words could behave differently as well, with action words bouncing faster while nouns float gently, and the words could change color or size based on sound or other data. Additionally, users could add their own words to the animation, creating a personalized experience. With these improvements, the text could go beyond just looking nice and become a fully interactive and playful visualization.

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.

After watching Casey Reas’ talk on chance operations, I realized how randomness can be a powerful tool in creative work. Instead of controlling every detail, allowing chance to play a role can lead to unexpected results that are often more interesting than what I would plan. In my own projects, I plan to experiment with random elements in small ways, like changing colors, shapes, or patterns based on a set of rules but leaving some outcomes to chance. This connects to our discussions in a different class, Understanding of IM class, where we talked about using randomness as an algorithm in conceptual art for example by letting the computer generate outcomes that are surprising but still guided by certain constraints or rules. I think the key is to find a balance between control and randomness, so the work feels intentional but still fresh and dynamic.

The talk also made me question how much control we really need in our work. Reas shows that too much control can limit creativity, but too much randomness can make a project feel chaotic. I found this idea challenging because I usually like to plan every step carefully. I kind of  think about trying a more experimental approach, even if it feels uncomfortable at first. It raises questions for me about when to intervene in a random process and when to let the algorithm or chance take over. 

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.