Author: Tiffany Rakotonirina

Attractive Design

I  found the example of the three teapots particularly interesting because it shows how different designs serve different purposes.  The author describes one of the teapots as being deliberately unusable, the other more aesthetically pleasing, and the last one being practical and well thought out. Yet, he uses all of them at different times, proving that design is situational. This made me reflect on my own experiences, there are times when I  am most liekly to prioritize efficiency, but other times I would like to appreciate beauty or novelty in design. Essentially,  it’s not about a single “best” design but rather the right design for the right moment.

Her Code Got Humans on the Moon

Reading about Margaret Hamilton’s contributions really gave me a new perspective on software design and reliability. I had never thought about how early software engineering had to account for human error in such high-stakes environments. This made me think about how much of today’s UI/UX design is centered around the same kind of principles and ideas Hamilton had. In interactive systems, we rely on clear, intuitive design to prevent mistakes, just like the Apollo software had to ensure astronauts couldn’t accidentally erase critical data. Her work really highlighted the idea that good software isn’t just about writing code but also  about anticipating how users will interact with it and designing systems that are both strong and intuitive to use.

Concept

When thinking about this project, I wanted to solve a problem that I constantly deal with. I often bring a different bag or wallet everyday, meaning I have to move all my cards and items to the other bag. However, whether it’s my credit card, metro card, or student ID, I always realize too late that I left something in my other bag and it’s frustrating to get to the subway and not have my metro card or to be at a café and realize my credit card is missing.

So,  to fix this, I created a simple switch that tells me if my card is in my wallet. The idea is straightforward, if the card is inside, the circuit is complete, and the LED lights up. If the card is missing, the circuit remains open, and the LED stays off, reminding me to grab it from the other bag before I leave.

Here is a quick demo: IMG_5445 

Implementation

To build the circuit, I mainly based it off of the switch circuit we went over in class, however instead of the button I used two wires, one connected to my wallet and the other to my metro card. I then placed a thin conductive strip of aluminum foil inside my wallet as well as  on the metro card to make sure that when I insert the card  it completes the circuit, turning on the LED. This way, I can quickly check if I have everything just by looking at the light, no need to rummage through my bag at the last second.

Below is the code I used:

int wireTouch = A2;

void setup() {  
  pinMode(11, OUTPUT); 
  pinMode(wireTouch, INPUT);   // Button input
   Serial.begin(9600);

}

void loop() {
 int touchState = digitalRead(wireTouch);
 Serial.println(touchState);
  delay(1); 

  if (touchState == HIGH) {
    digitalWrite(11, HIGH);  // Turn LED ON if wires touch
  } else {
    digitalWrite(11, LOW);   // Turn LED OFF if wires don't touch
  }
}

Reflection

I think building this project was a fun and practical way to apply the switch circuit we learned in class to a real-life problem. I am pretty happy with the result as the circuit worked as expected, when the card was inside the wallet, the LED turned on, and when it was missing, the light stayed off. However, one challenge I faced was ensuring the conductive strips inside the wallet aligned properly with the card. At first, the connection wasn’t always reliable, and the LED flickered. I had to adjust the placement and use stronger adhesive to keep the strips in place.

In terms of improvements and additional elements, I could maybe add an LCD, so  instead of just the LED turning on or off, an LCD display could show a message like “Card Present” or “Card Missing,” which would provide a clearer and more informative response. A sound alert could also be useful, I could add a small buzzer so that it gives a short beep when the card is missing or inserted, providing a more immediate and noticeable notification.

Concept

My midterm project is an escape room game where the players must follow a series of clues to find different objects around the room. The game begins with a hint that directs the player to the first object. An once it is found, the object reveals a number that the player must remember, as it is part of the final password. The object also provides the next clue, leading the player to the next item in the sequence. This process continues until all objects have been discovered, all of them giving a number needed for the final passcode. To ensure the correct sequence, my game has an ordered clicking type of logic, this means the players can only interact with objects in a specific order. If they attempt to click on an object out of sequence, it will not respond, preventing them from skipping ahead or guessing the passcode incorrectly. This makes sure the players follow the clues and remember the numbers in the right order, so that they can successfully input the password at the end to escape.

link to sketch: https://editor.p5js.org/tfr9406/full/1UNobzqQo

Code Highlights

I think a very important part of my game’s code is the ordered clicking system, which makes sure players find clues in the right order, and prevents them from skipping ahead . To do this I made it so that the code tracks the order of  the interactions using clickOrder and marks visited clues in the visitedClues object. This means, each clue can only be accessed if the previous one has been clicked. For example, the clock must be clicked first (clickOrder === 0) before moving to clue1, then the computer unlocks clue2, and so on until the final clue, the painting, leads to the password page.

I also made it so that the players can revisit clue while keeping the correct order. This is important because it allows players to go back and see the clue again without breaking the structured order. The visitedClues object keeps track of which clues have already been discovered, making sure that once a clue is unlocked, it remains accessible even if the player navigates away and returns. For example, once the player clicks on the clock, visitedClues.clue1 is set to true, meaning they can go back to it at any time. However, they can’t jump ahead to later clues unless they follow the intended order.  This is the code:

if (currentPage === "game") {
  // checks for valid order before allowing to open next clue page
  if (clickOrder === 0 && clock.isClicked(mouseX, mouseY)) {
    currentPage = "clue1";
    clickOrder = 1; // clock clicked first
    visitedClues.clue1 = true; // mark clue1 as visited
  } else if (clickOrder === 1 && computer.isClicked(mouseX, mouseY)) {
    currentPage = "clue2";
    clickOrder = 2; // computer clicked second
    visitedClues.clue2 = true; // mark clue2 as visited
  } else if (clickOrder === 2 && cupboard.isClicked(mouseX, mouseY)) {
    currentPage = "clue3";
    clickOrder = 3; // cupboard clicked third
    visitedClues.clue3 = true; // mark clue3 as visited
  } else if (clickOrder === 3 && books.isClicked(mouseX, mouseY)) {
    currentPage = "clue4";
    clickOrder = 4; // books clicked fourth
    visitedClues.clue4 = true; // mark clue4 as visited
  } else if (clickOrder === 4 && painting.isClicked(mouseX, mouseY)) {
    currentPage = "password"; // move to password page after painting
  }

To get to this final code, I first tested it out with a simpler object and basic logic to make sure the ordered clicking system worked correctly. Initially, I used a minimal setup with just 3 clickable elements and basic variables to track whether an item had been clicked. This helped me confirm that the logic for the sequential interactions was working before expanding it to include the full set of clues and the ability to revisit them. Below was the initial code:

function mousePressed() {
  if (!rectClicked && mouseX > 50 && mouseX < 130 && mouseY > 100 && mouseY < 150) { //first rectangle is clicked
    rectClicked = true;
  } else if (rectClicked && !triClicked && mouseX > 170 && mouseX < 230 && mouseY > 100 && mouseY < 150) { //triangle clicked true  if rectangle clicked first
    triClicked = true;
  } else if (rectClicked && triClicked && !circClicked && dist(mouseX, mouseY, 320, 125) < 25) {//circle clicked true if rectangle and triangle clicked before
    circClicked = true;
    escape = true; //clicking circle = players escapes
  }
}

Challenges

For my game I knew I wanted to implement hover animation to improve overall user experience by providing feedback. However, this was tricky at first because my game page was based on images rather than shapes. Unlike with shapes, where I could easily change the fill color on hover, I had to find a way to replace the whole image itself to give that same visual feedback. To solve this, I created an if-else condition that checks the mouse’s position relative to the designated area for hover. I then updated the image only if the mouse is hovering within the defined boundaries of the clickable area, and also made sure that when the hover condition is not met, the image reverts to its original state, which prevented it from being stuck in the wrong image.

// hover effect 
function handlePageHoverEffects() {
  if (currentPage === "landing") {
    
    // hover for Landing image (switches to landing2 on hover)
    if (mouseX >= 346 && mouseX <= 468 && mouseY >= 337 && mouseY <= 403) {
      currentImage = landing2; // switch to landing2 on hover
    } else {
      currentImage = landing1; // switch back to landing1 otherwise
    }

Improvement

Some of the improvements I could make to the game could maybe include adding different rooms or clues, which would provide more variety and depth to the game. Additionally, introducing difficulty levels would also make the game more accessible to a wider audience. For example, a beginner level with simple clues , and then progressively harder levels with more difficult riddles, hidden objects, and tougher challenges.

What are some of the ways that computer vision differs from human vision?

While humans tend to rely on context, experience, and intuition to recognize objects and interpret scenes in front of them, computers process raw pixel data and require algorithms for example to to make sense of whatever visual input they are “seeing”. In addition to that, human vision can naturally adapt to different lighting and lighting changes, whereas computer vision can struggle with color perception under different illumination conditions. Similarly, motion recognition when it comes to humans is more intuitive and predictive, whereas in computers, it depends on frame differencing or object tracking for example to detect movement.

What are some techniques we can use to help the computer see / track what we’re interested in?

According to the paper, to help computers see and track objects we’re interested in, frame differencing can be used. When using this technique, frames are compared, and if pixels change between these frames, the computer sees it as movement. Another technique is brightness thresholding, which separates objects from the background based on their brightness levels. In simple terms, the process involves setting a specific brightness value (aka the threshold), and any pixel brighter or darker than that value is considered part of the object or background. For example, in an image, if the threshold is set to a certain brightness level, pixels brighter than that will be identified as the object, and those darker will be treated as the background.

How do you think computer vision’s capacity for tracking and surveillance affects its use in interactive art?

I think computer vision’s capacity for tracking and surveillance has really  expanded the possibilities of interactive art by allowing artist to create art that allows real time audience engagement and way more personalized experiences. Installations can now respond dynamically to movement and different  gestures, creating really immersive environments that evolve based on the viewer’s presence. By using computer vision, interactive art becomes more fluid and responsive, transforming the more traditional passive viewing of art, into something more active and engaging. I think as a whole, this technology not only enhances and improves  the storytelling and emotional impact of art, but also opens new doors in terms of  large scale public art and immersive installations that really blur the line between the digital and physical worlds.

Concept/Design

For my midterm, I wanted to create a escape room type of game, where the players have to like find objects around the room to be able to escape. In terms of design, I want to structure it so that the players must find five objects for example within a room and answer a series of questions to unlock the next clue. So, the game might begin with an introductory hint that guides the player to find the first object. Once they find it, they are either provided with another hint or asked a question. Answering the question correctly would then lead them to the next clue or object, however anwering it wrong may either let them retry or offer an extra hint. As the player progresses, they will uncover more objects, until they have all the objects needed to escape. I will probably have the game feature different rooms for the player to choose from, and each room will present a unique set of clues, objects, and questions to solve.

Challenging Code/Uncertainty

For this project I think the most complex part of the it is like an ordered clicking type of mechanism. For this game specifically, I think this is needed because I want the players to interact with objects in a specific order,  whether it’s pressing buttons or flipping swithces , I want them to do it in a specific order. By adding this system in my code, where objects must be clicked in the correct order, it will make sure that players engage with the puzzle thoughtfully rather than just clicking randomly and finding the key the first try.

To minimize this uncertainty, I tried to write the code to keep track of which shapes the player has clicked by using variables like rectClicked, triClicked, and circClicked. These start as false, meaning the player hasn’t clicked them yet. Then, in the mousePressed() function, I set rules so that the shapes can only be clicked in the correct order. For example, the player has to click the rectangle first, then the triangle, and finally the circle. If the player tries to click them out of order, the game won’t move forward. This helps make sure the game flow stays smooth and clear for the player. below is this code:

function mousePressed() {
  if (!rectClicked && mouseX > 50 && mouseX < 130 && mouseY > 100 && mouseY < 150) { //first rectangle is clicked
    rectClicked = true;
  } else if (rectClicked && !triClicked && mouseX > 170 && mouseX < 230 && mouseY > 100 && mouseY < 150) { //triangle clicked true  if rectangle clicked first
    triClicked = true;
  } else if (rectClicked && triClicked && !circClicked && dist(mouseX, mouseY, 320, 125) < 25) {//circle clicked true if rectangle and triangle clicked before
    circClicked = true;
    escape = true; //clicking circle = players escapes
  }
}

One thing that drives me crazy is modern microwaves. Many microwaves have confusing button layouts, very cryptic labels, and just overall  inconsistent functionality across different brands. Like, some have dedicated buttons for specific foods like popcorn or  pizza and bury basic functions like adjusting power levels. Worse, sometimes  theres very little feedback if you press the wrong button, the microwave might beep, but it won’t tell you why. To improve this, designers could apply mapping and feedback more effectively. For example, a better approach would mean grouping related buttons together, and maybe place the most important buttons at the top, or make them significantly bigger.

In relation to the author and his principles of design, in the future, I could incorporate clearer feedback mechanisms for user actions in my projects. For instance, if a user hovers over an interactive element, I could add visual signifiers like small animations or color changes to show that the item is clickable. In addition to that, I would pay close attention to mapping, making sure that the user’s input feels directly connected to the system displayed. If I were creating a game where the user controls a character for example, I would make sure that the movements are mapped logically to the controls, such as using the arrow keys to move the character in the expected direction (up for up, down for down).

Concept

My inspiration for this project was a magic 8-Ball, which is like a classic toy that lets people ask a question, shake the ball, and then receive a random answer like “Yes,” “No,” or “Ask again later.” My project is similar to this but in a digital form, so instead of shaking a physical object, the user types a question and presses enter. The program then generates a response from a set list of answers.

Code Highlight

The core of this code is pretty straightforward. The setup function creates the canvas, places the input box, and ensures everything is aligned properly. Then generateResponse function then picks a random answer from a list whenever the user presses Enter. The draw function then continuously updates the screen, displaying the prompt and response.

let inputBox; 
let response = "";  // variable to store the response text
let fade = 0;  
let answers = [ 
  "Yes.", "No.", "Definitely.", "Absolutely not.", 
  "Likely.", "Without a doubt.", "Maybe?", "Never."
];

function setup() {
  createCanvas(600, 400);  
  textAlign(CENTER, CENTER);  
  textSize(24);  
  
  // inputbox
  inputBox = createInput("");
  inputBox.position(width / 2 - 100, height / 2 - 50);  
  inputBox.size(200);  
  inputBox.style("font-size", "16px");  
  
  
  inputBox.changed(generateResponse);  // calls generateResponse when text inside inputbox changes
}

// generates a random response when the input changes
function generateResponse() {
  response = random(answers);  // selects random responses from answers array

Reflection/Imporvements

If I were to improve this, I’d start by making the responses feel more dynamic. Right now, all of the answers appear in the same style, but I could change the color of the text based on the response, so maybe green for positive, red for negative, and yellow for uncertain ones. I could even add sound effects or animations would also really improve the experience, making it feel more interactive. Finally, I’d like to refine the user input, so that the box automatically clears after the question is asked.  Overall, I like how this project turned out. It’s a small but effective way to capture the fun of a Magic 8-Ball.

Concept

The concept of this project was to create a winter landscape featuring falling snowflakes and a couple trees. The snowflakes would fall from the top of the canvas, continuously reappearing at the top after they fall off the bottom. To create this effect, the trees and the snowflakes are drawn with random sizes  making each one look unique.

Code Highlight

One of the main challenges in this project was the randomization of the snowfall. To do this, I created a snowflake class to handle the snowflakes falling and reappearing at random positions. In the constructor in the code below, the snowflake’s x and y coordinates were set. Additionally, each snowflake is given a random size and speed , which adds variation to the scene, making each snowflake unique. The fallingsnow() function then moves the snowflake down the screen by adding its speed value to the y position. Then, when a snowflake reaches the bottom of the canvas, it resets by positioning it randomly at the top and also randomizes the x coordinate to create this illusion of continuity. I also did the same for  the trees where each tree’s size was randomized.

class Snowflake {
  constructor(x, y) {
    this.x = x; 
    this.y = y; 
    this.size = random(3, 7); 
    this.speed = random(0.5, 2); 
  }

  fallingsnow() {
    this.y += this.speed; // moves snowflake down by speed value

    // Reset snowflake to top once at bottom
    if (this.y > height) {
      this.y = random(-100, -10); 
      this.x = random(width); 
    }
  }

  display() {
    fill(255); 
    noStroke(); 
    ellipse(this.x, this.y, this.size); 
  }
}

class Tree {
  constructor(x, y) {
    this.x = x; 
    this.y = y; 
    this.size = random(30, 50); 
  }

  display() {
    
    //tree bark
    fill(139, 69, 19); 
    rect(this.x - 5, this.y, 10, this.size); 
    
    // tree leaves
    fill(34, 139, 34);
    triangle(
      this.x - this.size / 2,
      this.y,
      this.x + this.size / 2,
      this.y,
      this.x,
      this.y - this.size
    ); 
  }
}

Reflection/Future Improvements

Looking ahead, there are several ways I could improve this project. First, I could introduce a more complicated behavior for the snowflakes, like adding slight variations to their horizontal movement, so they kind of drift as they fall, maybe mimicking wind. Additionally, I could implement different types of snowflakes with unique characteristics, such as their  varying colors or shapes, to add more variety to the snowfall. In addition to this I could also add interactions with other elements in the scene, such as snowflakes collecting on the ground or interacting with objects like trees, enhancing the immersion of the winter scene.

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?

A strongly interactive system is one that feels alive in the sense that it responds to the user and isn’t just like a one way conversation. It listens to what the user is doing, understands those actions, and adapts in a way that makes the experience feel more personal and engaging. In the reading Crawford talks about interactivity being a kind of conversation between the system and the user, with three essential elements, listening, thinking, and speaking.  This means the system is not just reacting, but actively participating and if any of those elements falter, the interaction falls flat.

Thinking about how I can bring this to my p5 sketches, I realize there’s a lot I could do to make the interaction feel more alive. Specifically I think there’s room to play with how the system “speaks” back to my users. Before this reading my idea of interaction was just having visual feedback when a user clicks or drags, but now I think there’s more potential to make those responses more dynamic and meaningful. For example, instead of the same visual change with every interaction, I could have the system react differently based on how the user engages. If a user clicks quickly or drags slowly, the feedback could reflect that, so essentially just subtle changes in how elements behave could help keep the user invested. By treating user interaction as this ongoing exchange, I think I can create sketches that feel more responsive, intuitive, and engaging. The goal is for the user to feel like the system is learning and adapting, making each interaction unique. That’s what really makes it feel like the system has a personality of its own, and the user is an active part of shaping the experience.

After watching Casey Reas talk about randomness, it got me thinking about how I usually approach design. When working I’ve always been about control, and making sure every element has a purpose and fits just right. But Reas kind of pushed me to reflect on how it’s not about giving up control but rather just letting a little unpredictability into the process to keep things from becoming flat and boring. When things are too ordered, they lose their spark and this idea made me realize that maybe I’ve been too focused on precision and could benefit from creating space for randomness to breathe a little life into the work im making. I’m now thinking of ways to incorporate small random elements, like little shifts in color, shape, or spacing, so that my designs feel alive without losing the structured feel I love.

As for the balance between randomness and control, I think it’s about finding that perfect place where the two can interact with each other.  Things that are too rigid can become very static, while too much randomness can feel directionless. In my opinion the perfect balance happens when you have a solid structure but let randomness subtly influence the details. Whether it’s adjusting spacing, throwing in a surprise texture, or letting a color shift unexpectedly, it makes the work feel slightly more dynamic. The goal isn’t to pick one or the other but to let control and randomness work together to create something that keeps the viewer engaged and constantly evolving.