Author: Ellina Chermit

Her code got humans on the mood

Before reading this article, I didn’t know anything about Margaret Hamilton, even though she is the person who basically laid the foundation for software engineering. She literally wrote the code that made Apollo 11’s Moon landing possible, and yet people didn’t realize how groundbreaking that was at the time.

It wasn’t just because she was a woman in tech, but because no one had really seen software engineering as a real discipline yet. It made me think about how when something revolutionary happens for the first time, people often don’t give it much credit because they have no prior knowledge/understanding.

One moment from the article that i remember the most was when Hamilton insisted on including error-handling in the code, even though others thought it wasn’t necessary. During the actual Moon landing, those systems kicked in and saved the mission from being cancelled. It made me think about how forward-thinking she had to be planning for what could go wrong. It also reminded me how invisible certain kinds of work can be. Her code wasn’t  visible like the rocket itself, but without it, none of it would’ve worked.

Attractive things work better

In the entire design industry, one area I’ve always had the most interest in was human-centered design. The idea that “products designed for use under stress follow good human-centered design” as stress makes people less good at problem-solving stood out to me. It made me think of when I myself am doing something in a hurry, and if something isn’t designed for ease of access, it forces me to slow down and spend extra effort on something that could be simplified. Whereas products designed for relaxed occasions can enhance usability through aesthetic design. So, it means that if we were to compare those two, usability would prevail over attractiveness.

However, after reading Norman’s article, my perspective shifted. He argues that attractive things work better, not because they have superior functionality, but rather because their visual appeal creates positive emotions that improve cognitive performance, especially in problem-solving.

So, aesthetic appeal can directly support usability, especially under stress. For instance, when I use confusing interfaces (especially when I’m in a hurry), I feel frustrated and mentally over the place. In contrast, using a clean, beautifully designed app like Notion makes tasks feel manageable, even enjoyable, despite any pressure. This made me think about the psychological aspect of good design and that it’s not just about how things work, but how they make us feel.

My Concept

For a while, I couldn’t come up with a creative idea. As I sat at my desk, I looked over at my surroundings and saw some books piled up from hours of studying, realizing I could use them as a switch.

A “Break Reminder Switch” activates when I close my books, triggering LED light to remind me to take a well-deserved break. And if you’re too tired, you can also use your head to activate the switch by resting it on top of the books.

Watch the video here

When thinking about the idea of my switch, it reminded me of a Pomodoro Studying Technique. I could improve this project by adding a timer that lets users take breaks for a set amount of time, like 5 minutes, before an alarm reminds them to get back to studying. This way, they can study for as long as they like and use the switch to manage their own breaks without losing track of time.

Set-up

I attached jumper wires to the covers of two books — one connected to GND, the other to a digital pin on the Arduino. When the books close, the wires touch and make the LED light up.

Initially, the wires didn’t always make good contact, so I adjusted the wire positions by twisting and aligning them at the center and opposite to each other to ensure they touch properly and trigger the switch.

Coding

int switchPin = 10;    
int ledPin = 6;        

void setup() {
  pinMode(switchPin, INPUT_PULLUP);  
  pinMode(ledPin, OUTPUT);
}

void loop() {
  if (digitalRead(switchPin) == LOW) { 
    digitalWrite(ledPin, HIGH);      
  } else {
    digitalWrite(ledPin, LOW);          
  }
}

Reflections

At first, I struggled for hours trying to get the external LED to light up. The issue was that I didn’t plug the short leg of the LED into the negative rail on the breadboard — this made only the internal LED light up. Then, it was the way I set up my project that kept causing problems.

I also learned that wire contact must be firm, so I tried different taping angles and even thought about using multiple wires for a better chance of contact.

Through all the trial and error, I realized how small details can cause big issues and that paying attention to them can save hours of frustration. Most importantly, I learned that good ideas often come from your surroundings, even something as simple as a stack of books.

Concept

For my midterm project, i created an interactive experience at the airport that is a bit different from the usual way we think about travel.  Instead of conventional destinations, the airport’s departure board offers emotional states that users might be seeking: peace, guidance, restart, sign, purpose, direction, and inspiration.

The idea behind this project came from this simple question:
“What if people travel not to visit a place, but to experience a certain emotion?”

Reflecting on my own travels, I realized that my strongest memories aren’t necessarily about locations themselves, but about how those places made me feel. So, once a user chooses their destination, they receive a quote/message they might need to hear.

Project features

In my project, there are three main pages:

1. Welcome Page:

   • The user is greeted with a sky background and a welcoming message, all while having airport sounds in the background.
   • A “Start” button starts the experience.

2. Airport Scene:

   • Once the user clicks “Start,” they are transported to an airport background with lofi sounds.
   • They need to click on the departure board to proceed.

3. Departure Board Page:

   • This page focuses on the departure board, listing different emotional “destinations.”
   • Lofi music plays softly in the background to enhance the experience
   • Then, clicking on a specific “destination” triggers a pop-up message with a quote related to that emotion or the desired state a person wants to achieve.

Problems I ran into

Some ideas I initially planned like zoom-in features and extra interactive elements were difficult to make in the given timeframe. So i had to make the most essential features first.

So, the biggest challenge was finding suitable images online that matched the vision I had in my mind. So, i had to create some elements myself and manually edit the departure board to fit my concept and include the emotional destinations. I also combined multiple images to achieve the desired design for each stage of the experience.

Initially, I tried drawing the entire page from scratch, but I later realized that wouldn’t work well with the multiple pages interactive format I wanted.

Future improvements

If I were to expand this project, I would like to add animations to create smoother transitions between pages and implement a customized quote generator where i take input like the name of the user to make it feels personal.

Despite the challenges, I’m proud of how this project turned out. I put in a lot of time and effort to make it look as close as possible to what I imagined. By making this project, i could represent a concept I resonate with: travel as an emotional journey rather than just a physical one.

Link: https://editor.p5js.org/Ellina_Chermit/full/i1vywV_MT

In Computer Vision for Artists and Designers by Golan Levin, the main difference between human and computer vision is that while humans naturally interpret context and meaning, computers analyze images numerically.

People can recognize objects in varying conditions, but computers need specific training to do the same. For example, while we can recognize a face even if it’s partially obscured, computer vision would struggle unless it’s specifically trained to do so. This difference stood out to me because it shows how much more complex human perception is compared to a computer’s mechanical analysis.

To help computers track things we’re interested in, techniques like thresholding (simplifying images), edge detection (finding shapes), and optical flow (tracking movement) are used. More advanced methods, like machine learning, help computers recognize objects by learning from large datasets. These methods don’t give the computer understanding, just the ability to process data.

Levin also explores how CV’s tracking abilities are used in both art and surveillance. Artists use CV for interactive installations that respond to movement, but the same tech is used for facial recognition and monitoring. This can be a bit problematic as while CV enhances art, it also enables tracking people, sometimes without consent. Some artists challenge this by confusing or exposing surveillance systems.

This made me think about how CV has become so embedded in our everyday lives, from facial recognition on our phones to tracking in stores. While these systems often make things more convenient, they also normalize constant monitoring. For artists, I think it’s important to be aware of the implications of using CV, especially for privacy and surveillance.

My concept

I had several ideas for my midterm, but as the spring break is coming up, everyone keeps asking: “Where do you wanna go?” The variety of my friends’ responses made me think: what if people travel not to see a desired destination per se, but to experience certain emotions?

That’s how i came up with my project idea: an airport departure board where, instead of regular destinations, users choose from emotional states like: peace, guidance, re-start, sign. 

User Interaction

Here’s how the interaction works:
1. The user sees the departure board with different emotional destinations.
2. Clicking on a mood smoothly zooms in on that selection.
3. After zooming in, a pop-up appears with a random message or affirmation related to their chosen emotion.
4. Users can go back to the main screen and pick another mood.

I might remove the zoom in feature if that doesn’t work out and let the user receive their message right away. I also wanna add different sounds: airport sound as the background noise and the pop-up sound.

Complex Part

Complexities with this project started before i even got to the coding part. I had a certain picture in my mind and i realized the only way to bring it to reality is by drawing it myself, so i made this:

Then, i realized that it will take me too much time to colour it and have the best final look, so i just took another picture and redesigned it a bit:

If the quality worsens or something else goes wrong, i’ll have to redesign this completely by combining several pictures, but hopefuly i’ll stick with this one.

Code-wise the most challenging part of this project is the zoom-in transition when a user selects a mood. If the zoom feels too abrupt, the experience won’t be immersive.

To solve this, i want to try implementing smooth zoom animation using lerp() and ensure the quote pop-up appears naturally after zooming in.

if (zooming) {
  zoomFactor = lerp(zoomFactor, targetZoom, 0.08);
  if (zoomFactor > targetZoom - 0.1) {
    zooming = false;
    messageShown = true; 
  }
}

In The Design of Everyday Things by Don Norman, the main argument is that usability issues stem from poor design rather than user error. This challenges the common assumption that people are to blame when they struggle with everyday objects. Come to think of it, well-designed objects should naturally guide users, minimizing confusion.

One example of poor design that was not mentioned in the reading but has always frustrated me are cable, especially USB ones. The traditional USB connector can only be inserted one way, yet there is rarely a clear indication of which side is correct. This often leads to flipping the plug multiple times before it fits. A simple signifier like a physical marker or a visible point, could solve this issue and make the interaction effortless.

Norman’s principles are also highly relevant to interactive media. Websites and apps often suffer from unclear navigation, hidden menus, or buttons that don’t look clickable. Applying affordances and signifiers like distinct buttons and clear labels would improve usability. Similarly, feedback is important as when users submit a form or click a link, they should receive a confirmation to avoid uncertainty.

My Concept

This project is Barbie-themed quote generator  where the user can pick different moods and see a random quote associated with each mood. The mood options, such as “Empowered Barbie”, “Sassy Barbie” and “Sad Barbie” each trigger a quote that is supposed to motivate the user and uplift their mood.

Code Highlight

The most challenging part of this project was integrating randomly changing quotes based on user selection. To achieve this, I set up a function to handle button clicks, where each button is linked to a specific mood and quote. I also added hover effects and smooth transitions to create a more interactive experience.


// Quote Generator Page
function displayQuotePage() {
  tint(255, 180); // Makes background a little more subtle)
  image(bg, 0, 0);
  noTint();  

  // Title and text layout
  textAlign(CENTER); 
  textFont('Montserrat');
  textSize(36);
  fill('#ff3385');  
  text("Choose your mood:", width / 2, 50);

  // Mood options
  textFont('Open Sans');
  fill(0); 
  textSize(24);
  text("Empowered Barbie", width / 2, 110);
  text("Sassy Barbie", width / 2, 160);
  text("Sad Barbie", width / 2, 210);

  // Quote section
 if (quote !== "") {
    fill('#ff3399');  
    noStroke();
    rect(150, 280, 400, 80, 15);  
    fill('white');
    textSize(22); 
    text(quote, width / 2, 310);  
  }

Reflections

The concept for this project was inspired by the diversity of Barbie characters and the different moods they represent. Barbie has always reminded me of the kind of uplifting quotes I use in my projects, which makes me feel better and motivated.

Looking back, one area for improvement would be the design. Since I didn’t have much time this week, I focused more on the interactivity aspect. Ideally, i would add elements like animated transitions or colorful backgrounds that change based on the selected mood. I’d also love to add sound effects or background music to better the mood and make the experience even more immersive. I was also thinking about taking user’s name to make the experience feel more personal. Overall, I’m happy with the way it turned out as i used a lot of new elements.

Embedded Sketch

My Concept

This project is a twinkling night sky, where stars pulse and change brightness naturally. Clicking (or pressing a key) creates constellations by connecting nearby stars, randomly forming unique patterns each time. The background is a real sky image that i uploaded beforehand.

Code Highlight

It took me a while to figure out the way to form constellations between stars. So first, I try to find stars near the mouse (within a distance of 100). Then, I enhance the twinkling effect by making closer stars (within a distance of 50) brighter. Also, my constellations sometimes looked messy with too many connections so i had to limit those to only nearby stars (within a distance of 70) for cleaner constellations.

function createConstellation(x, y) {
  let constellationStars = [];
  
  for (let star of stars) {
    let d = dist(x, y, star.xPos, star.yPos);
    if (d < 100) {
      constellationStars.push(star);
      if (d < 50) {
        star.setSizeAndAlpha(d);
      }
    }
  }

  connections = [];
  for (let i = 0; i < constellationStars.length; i++) {
    for (let otherIndex = i + 1; otherIndex < constellationStars.length; otherIndex++) {
      let d = dist(
        constellationStars[i].xPos, constellationStars[i].yPos,
        constellationStars[otherIndex].xPos, constellationStars[otherIndex].yPos
      );
      if (d < 70) {
        connections.push([constellationStars[i], constellationStars[otherIndex]]);
      }
    }
  }

  for (let star of constellationStars) {
    star.setBrightness(255);
  }
}

Reflections

The vision i had when creating this was the power of connection, resembling “the butterfly effect” — the idea that everything is interconnected and happens for a reason.  At first, the stars exist independently, scattered across the sky like people and events in the world. But through interaction (user clicks), certain stars come together to form constellations: patterns that weren’t visible before. This could represent how separate people, situations, or choices can align to reveal meaning in what once appeared random.

Looking back, if I had to do this project again, I would likely try to refine the performance, especially if the number of stars increases. I would also improve the design part by adding more visually engaging elements. Overall, I’m satisfied with the result.

Embedded sketch

In “The Art of Interactive Design” interactivity is defined as “a cyclic process in which two actors alternately listen, think, and speak”.  This approach suggests that the quality of interaction depends on the effectiveness of each subtask. It seems to me then that a strongly interactive system is great in perceiving input, processing it meaningfully, and providing feedback right on time, creating a conversation between user and system.

In my opinion, to create a better user interaction involvement, the artist should be designing elements that not only react to user inputs but also adapt and evolve based on user behavior. For example, incorporating real-time feedback mechanisms can make the interaction feel more engaging.

Apart from that, allowing for user customization and providing clear and simple visual cues can guide users through the interactive experience. This aligns with Crawford’s vision of interactive design as an art form creating meaningful digital exchanges, where the interaction feels like a real conversation between the user and the digital environment.

My concept

My project is a simple firework animation with randomly changing backgrounds. While reading the technical reading assigned for this week about randomness, I realized I wanted to incorporate that concept into my work. Another inspiration was the drawing exercise we did in class using mouseX and mouseY, so I decided to apply it here with the fireworks.

However, as I worked on the project, I realized that there’s a bigger meaning behind it. The randomness of the fireworks represents the unpredictability of life, with both the good and the bad. Each click creates a unique firework explosion, symbolizing how every action and decision in life leads to an outcome that can never be exactly repeated.

Code Highlight

One part of the code that I’m proud of is how I used user interactions to create the fireworks effect. On top of that, i created randomly changing backgrounds.

function mousePressed() {
  if (showText) {
    showText = false; 
    background(0); // Clear text from canvas
  }
  drawFirework(mouseX, mouseY);
  let randomBg = color( random(255), random(255), random(255) );
    background(randomBg); // Random Background with each click
}
function mouseDragged() {
  drawFirework(mouseX, mouseY); 
}

Reflection

This project taught me a lot, while allowing me to incorporate some concepts learned in class. While I initially struggled with creating the fireworks and spreading out the lines, I’m happy with how it turned out.

Also, i had an idea to add “Back” button so the user could return to the inital background and I hope the knowledge i’ll gain in classes will allow me to add such features.

Embedded Sketch