Month: September 2025

Prompt:

What are some of the ways that computer vision differs from human vision? What are some techniques we can use to help the computer see / track what we’re interested in? How do you think computer vision’s capacity for tracking and surveillance affects its use in interactive art?

Response:

From my understanding plus the reading’s interpretation regarding computer vision, computer vision differs from human vision as human’s ability is sort of built-in inside our brain and takes way less energy and time to train our ability to recognize certain objects. For CV, however, they not only need numerous examples to learn certain facts, but also they consume huge amount of energy. Also, during the process of learning the ability to recognize, computer algorithms would often “cut” pictures into small pieces and train based on that while human learn to recognize as a whole.

Techniques that assist computer to see and track include frame differencing, background subtraction, brightness threshold, and simple tracking. I believe computer’s ability to track and surveillance could assist interactive art to be more interactive. For example, if I want to design a background music/scenes for a dancer, and if i want to change the background according to the dancer’s movements, I need CV as a technique to help me calculate parameters that could be applied into algorithms which later on could turn into shapes/sounds/etc..

 

Concept:

For this project, I decide to create a design includes interactivity with sound. When I looked at how musicians create their music, they always apply something called as “soundtrack” that could be dragged around to edit their produced songs. So, for this midterm project, I decide to build on this concept.

However, it would be too technical if I just recreate a soundtrack control system and it wouldn’t be very artistic. To add certain aesthetics to the design and to simplify the system. I decided to create a visual system that is similar to this picture.

With different color representing different sound, user could drag the gridlines to increase/decrease the length of certain sound. With colored blocks designated to certain sound, I decrease the difficulty to choose which sounds are available to the sound track. Also, I want to design a system in which the user could click on the grid inside and change the color(grid) of the sound. There should also be a play button which plays the sound block once the user finish design the block.

Complex parts:

I always insist on making my design graphically dominant. Ideally, there’s no word included in the system. However, I want to achieve the effect of asking users to discover they could drag the grid lines so that they could alter the duration of a certain sound. Also, the operation of changing the color of the grid should also be very intuitive.

Design:

There should be a class for blocks as user could alter the color of the grid and the width of the grid.

First Stage work:(press f to enter full screen)

As displayed above, this version is extremely crude.

There are several Improvements I could make in the coming week

1.  the entire interface should be more user friendly, right now it’s just ugly.
2. it should be a 5*5 grid instead of a 1*5 grid
3. the grid line alter function should be designed more beautifully
4. there should be no word instruction

However, this version works right now, and I can play with the sound to make some simple music.

 

Fullscreen sketch

Main Concept:

My main concept is the first home screen you see when you buy a new phone. There are so many “hello” messages in different languages popping up, and that makes me shiver and feel like I’m really getting a new phone. For this assignment, I wanted to replicate that feeling of “I’m getting a new thing.” I also thought generating “hello” in different languages would symbolize that even though we are divided by languages, we are all connected with each other, and it is important to understand and embrace one another.

 

The part of the code I’m proud of:

The part of the code I am most proud of is the update function. In order to calculate the time that has passed after the word was generated, I had to learn a new function called millis(), which basically gives you the number of milliseconds that have passed since the program started. I used multiple if-else statements to make the word gradually appear and disappear based on time intervals. For instance, the transparency of the word gradually increases from 0 to 255 within 1 second so that it does not pop up immediately. This was meant to imitate the iPhone’s way of generating “hello,” which gradually fades in. I also used the map() function, which we learned in class, to map 0 to 1 second to 0 to 255 in transparency. I am happy about the fact that I was able to fully utilize the concepts we learned in class in this update function inside the Hello class. 

update(){
    let passed = millis() - this.beginTime; 
    
    if (passed < 1000){
      //gradually fade in in 1 sec 
      this.alpha = map(passed, 0, 1000, 0, 255);  
    } else if (passed < 3000){
      //full transparancy after 3 secs
      this.alpha = 255;
    } else if (passed < 5000){
      //gradually fade out in 2 secs
      this.alpha = map(passed, 3000, 5000, 255, 0); 
    } else{
      //word faded out
      this.over = true;
    }
  }

Sketch:

 

Reflections & Future Improvements:

For future improvements, I would like to change the color of the word each time it pops up to make it more colorful and enjoyable for viewers. Furthermore, I want to avoid generating the same word two times in a row. I think I will be able to do this by using an if-else statement to control the conditions. Overall, I am happy with the outcome, as I was able to replicate a simpler version of the iPhone’s starting screen.

Reading Norman’s chapter on how to design everyday things brought back memories of my experience with poorly designed washing machines. The majority of newer machines have vague buttons, knobs, and symbols that make even a single load of laundry complicated. Some controls are counterintuitive, with icons that are unidentifiable as any standardized symbol. Others have poorly laid-out buttons or poorly readable colors, which make discoverability nearly impossible.

These design errors are just the kind of problems Norman discusses in terms of discoverability and understanding. A washing machine should express its use naturally so that users would know what can be done, where to do it, and what the controls accomplish without regard to instructions. Norman’s principles of affordances and conceptual models are applicable here. The signifiers should refer to the possible actions on the machine, and affordances should tell us where and how to do them naturally. Poorly designed washers fail in all of these ways, keeping their users uninformed and frequently erring that would not have been done with better design.

Norman indicates that machines should be planned for human error, and I agree that anticipating mistakes is crucial in terms of usability. A properly thought-out machine should anticipate human error and guide the user instinctively through the procedure, without requiring perfect knowledge or precision. I think there is a fine line, however, between assisting users and overcompensating for every mistake. If a design strives to support as many potential errors as it can, it will end up being overcomplicated or even enable sloppy use, rather than teach or lead users to the correct way of using it. Brilliant design, in my opinion, should discourage the most common errors without shutting doors entirely on the freedom to learn from experience and make decisions, rather than trying to predict all potential errors. This equilibrium provides usability without sacrificing structure or clarity.

Reflecting on Norman’s principles, I realize how important it is to design for clear feedback in interactive media, especially in my p5.js projects. For example, if I create a sketch where clicking on shapes triggers animations or changes their color, I can’t assume that a first-time user will immediately understand what to do. To address this, I might add visual cues like hover effects, tooltips, or a brief on-screen instruction to indicate which elements are interactive and what actions will happen. Norman’s arguments remind me that good design means guiding users through interactions intuitively, so they can enjoy the experience without confusion, frustration, or guesswork. By applying this principle, I can make my projects more accessible, engaging, and user-friendly.

My Concept

For this project, I wanted to create a data-driven timelapse showing airports across Europe. Each airport is represented as a circle, and its size corresponds to the number of passengers in a given week. The idea is to make busier airports stand out visually while showing the flow of air traffic over time. I got the idea as I was looking for datasets on Kaggle. The first dataset I found had the Daily flight information on hundreds of European airports from 2016-2022. The problem was that it didn’t contain the coordinates of the airports for me to plot them in p5 as I envisioned. Thankfully, I found a second dataset that contains the coordinates of airports from around the world. I decided to remove all the non-European airports from the second dataset, then cross filter the two datasets by airport code to make a third csv file with all the information I need before using p5.

Code Highlight

Since I wanted to create a third dataset. I needed to clean out any irrelevant, redundant, or incomplete columns, then merge the two csv files. To remove the non European airports from the coordinates file, I used the below C++ program which reduced the number of rows from the original 83,000 to a couple hundred.

while (getline(inputFile, line)) {
        stringstream ss(line);
        string ident, lat, lon, continent;
        getline(ss, ident, ',');
        getline(ss, lat, ',');
        getline(ss, lon, ',');
        getline(ss, continent, ',');
        continent = trim(continent);
        cout << continent << endl;
        
        if (continent == "EU") {
            cout << "Found an EU row" << endl;
            outputFile << line << "\n";
        }
        
    }

I then wrote this code to only take the airports that appear in both flights.csv and airports.csv, and write then to a third file, which I uploaded to p5

while (std::getline(flightsFile, line)) {
         std::stringstream ss(line);
         std::vector<std::string> cols;
         std::string cell;

         while (std::getline(ss, cell, ',')) {
             cols.push_back(trim(cell));
         }

         if (cols.size() < 6) continue; // skip malformed rows

         std::string icao = cols[3];

         // Skip row if airport not found in airportMap
         auto it = airportMap.find(icao);
         if (it == airportMap.end()) continue;

         // Write row with coordinates
         outFile << cols[0] << "," << cols[1] << "," << cols[2] << ","
                 << cols[3] << "," << cols[4] << "," << cols[5] << ","
                 << it->second.lat << "," << it->second.lon << "\n";
     }

     airportsFile.close();
     flightsFile.close();
     outFile.close();

     std::cout << "Merged CSV with coordinates created successfully.\n";
     return 0;

Finally, in p5, I looped through all the airport data and positioned them based on their coordinates mapped to the canvas size. Then I made the sizes of the airports correspond to their traffic using Power of Log Scaling to make the less busy airports extra small and the busy airports extra big so the contrast is clearer.

// Map coordinates and size
 for (let i = 0; i < airports.length; i++) {
   airports[i].x = map(airports[i].lng, minLng, maxLng, 50, width - 50);
   airports[i].y = map(airports[i].lat, minLat, maxLat, height - 50, 50); // Inverted Y because p5 coordinates are top to bottom

   // Power of log scaling for exaggerated size
   airports[i].size = map(
     pow(log(airports[i].passengers + 1), 2),
     0,
     pow(log(maxPassengers + 1), 2),
     2,
     60
   ); 
 }

Sketch

Reflection

I was impressed by how even large datasets can be visualized effectively with only a few lines of code once the mapping is set up. Using loops and data structures allows complexity to emerge naturally. This project reinforced how math and data can drive visual design, and how small adjustments, like using a logarithmic scale instead of linear mapping, can completely change how readable a visualization is.

For future improvements, I would like to make the timelapse smoother, add color coding by country or region, and include tooltips or labels when hovering over airports so users can see exact values. I could also allow filtering by week or year to explore trends more interactively. These enhancements would make the visualization more engaging and informative.

I totally agree with the author’s essential idea that it’s all about balancing competing priorities including usability, attractiveness, cost, reliability, manufacturability, marketability, and so on. I realized through reading that nowadays people care more about aesthetics rather than functionality, which undermines the usability of the product. Although aesthetics are quite important to attract a larger audience, I truly think that preserving usability is a must and should never be compromised. Otherwise, it would be bad if we, as producers, confuse users about how to use the product. As someone who likes minimalistic design, in my future projects in interactive media, I would like to keep the design simple and modern, while still being attractive to users. Muji is a great example. Its product designs are super simple, yet their usability is pretty good. Thus, I would like to balance usability and attractiveness like Muji does. 

 

I also realized that what’s being discussed in this reading is quite similar to the software development life cycle I learned in my software engineering class. Back in the old days, communication between clients and producers was not prioritized. However, in modern days, we use the agile method, where communication among users, developers, and business people is the most important factor in increasing usability and satisfying users’ expectations. I drew a connection here with the reading in the sense that we put more emphasis on facilitating communication to better understand and design the product itself. 

 

Something that drives me crazy is a washlet. As a Japanese person, I’m proud that so many foreigners are fond of it. But I don’t know how to use it even to this day. It has too many buttons, and sometimes there are buttons called “massage,” which I’m scared to press because I cannot imagine how a toilet would massage me while sitting. Also, there are multiple buttons to spray water, so I don’t know from which part of the toilet the water will spray. I’m just scared of getting wet and confused. I wish it could reduce the number of buttons for usability and add some simple text to explain what will happen when I press a certain button.