Category: S2026 – Mang

Reading Norman’s chapter made me realize how often I get frustrated with specific designs, especially ones that lack efficiency in everyday objects. Norman emphasizes that good design should communicate clearly, prevent errors, and provide feedback. I see this principle in some interactive media, where the design makes it easy to use without much explanation—anyone can figure it out quickly. When something is designed well, you don’t even notice it because everything feels natural and intuitive. Unlike the examples the author mentioned, such as the sink that requires pushing down on it or the door that needs a sign to explain that it is a sliding door, good design should not require instructions. If a user has to stop and think about how to use something basic, then the design has already failed.

Something that drives me crazy is the access doors on campus. I walk around carrying two access cards—one specifically for my suite and room, and another for the rest of the campus. It feels unnecessary and inefficient. On top of that, the glass doors are extremely heavy, and the sensors do not work most of the time. Instead of making entry smooth and accessible, the design creates frustration. According to Norman’s ideas, better mapping, clearer feedback, and fewer constraints could significantly improve this experience.

Concept:
My concept is based on showing the current global mood, and the world’s current situation. Because whenever I used would google “news” most of the things would is evoke aa negative emotion from me. So, I decided to visualize the news and categorize them into a few different emotions or feelings.

How I created the code:

I used Guardian and NYT API keys in order to get access to live articles, although there are some restrictions, like page requests. Therefore, I added some delay in order to access a larger number of pages and news article headlines. I also used world.json for the country borders.

I then created different arrays: one for the emotional bubbles, one for the country borders, one for the CNN breaking news ticker, and one for tracking articles so they are not shown twice. I also added a timer that updates every 60 seconds and adjusted the speed and position of the news ticker.

Then I added geographical points for a list of countries. I created bubbles for different emotions, with each emotion represented by a color. There is also a map key showing which color represents which emotion. The bubbles have visual effects like glowing and shrinking over time to make the map feel dynamic. Emotions are detected using keywords in article titles to classify sadness, anger, hope, or joy.

It initially gets the last 48 hours of news, then it is updated with live breaking news. I also added fallbacks: if the world map fails to load, a simple grid is shown, and if the API fails, a CORS proxy is used to make sure the news still comes through.

The code:
// Convert guardian format to our format
// Fetch 48 hours of historical news from The Guardian
function fetchHistoricalNews() {
let twoDaysAgo = new Date();
twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
let fromDate = twoDaysAgo.toISOString().split("T")[0]; // Format: YYYY-MM-DD
console.log("📅 Fetching Guardian news from " + fromDate + " to today...");

let totalArticles = [];
let pagesToFetch = 10; // Get 10 pages of results
let pagesLoaded = 0;
let failedPages = 0;

// Fetch pages sequentially with delay to avoid rate limiting
for (let pageNumber = 1; pageNumber <= pagesToFetch; pageNumber++) {
setTimeout(() => {
let apiURL =
"https://content.guardianapis.com/search?section=world&show-tags=keyword&from-date=" +
fromDate +
"&page-size=30&page=" +
pageNumber +
"&show-fields=webPublicationDate&api-key=" +
GUARDIAN_API_KEY;
console.log("🔄 Requesting Guardian page " + pageNumber + "...");
fetch(apiURL)
.then((response) => {
console.log("📡 Guardian page " + pageNumber + " response status: " + response.status);
if (!response.ok) throw new Error("HTTP " + response.status);
return response.json();
})
.then((data) => {
if (data && data.response && data.response.results) {
totalArticles = totalArticles.concat(data.response.results);
pagesLoaded++;
console.log("✅ Page " + pageNumber + " loaded: " + data.response.results.length + " articles");
if (pagesLoaded + failedPages === pagesToFetch) {
if (totalArticles.length > 0) {
console.log("📊 Total Guardian historical: " + totalArticles.length + " (" + pagesLoaded + "/" + pagesToFetch + " pages successful)");
isShowingHistorical = true;
sourceStatus.guardian.active = true;
sourceStatus.guardian.articleCount = totalArticles.length;
processArticles(totalArticles, true, "guardian"); // true = historical
} else {
console.error("❌ All Guardian pages failed");
sourceStatus.guardian.active = false;
}
}
} else {
console.warn("⚠️ Guardian page " + pageNumber + " returned empty results");
failedPages++;
}
})
.catch((error) => {
console.error("❌ Guardian page " + pageNumber + " failed:", error.message);
failedPages++;
if (pagesLoaded + failedPages === pagesToFetch) {
if (totalArticles.length > 0) {
console.log("📊 Total Guardian historical: " + totalArticles.length + " (" + pagesLoaded + "/" + pagesToFetch + " pages successful)");
isShowingHistorical = true;
sourceStatus.guardian.active = true;
sourceStatus.guardian.articleCount = totalArticles.length;
processArticles(totalArticles, true, "guardian");
} else {
console.error("❌ All Guardian pages failed");
sourceStatus.guardian.active = false;
}
}
});
}, pageNumber * PAGE_REQUEST_DELAY); // Use delay variable
}
}

// Fetch the latest breaking news from The Guardian
function fetchGuardianNews() {
console.log("📰 [" + getCurrentTime() + "] Fetching Guardian news...");
let apiURL =
"https://content.guardianapis.com/search?section=world&show-tags=keyword&page-size=25&show-fields=webPublicationDate&api-key=" +
GUARDIAN_API_KEY;
fetch(apiURL)
.then((response) => {
if (!response.ok) throw new Error("HTTP " + response.status);
return response.json();
})
.then((data) => {
if (data && data.response && data.response.results) {
console.log("✅ [" + getCurrentTime() + "] Guardian: " + data.response.results.length + " articles");
sourceStatus.guardian.active = true;
sourceStatus.guardian.lastUpdate = new Date();
sourceStatus.guardian.articleCount = data.response.results.length;
isShowingHistorical = false; // We're showing breaking news now
processArticles(data.response.results, false, "guardian"); // false = breaking news
}
})
.catch((error) => {
console.log("⚠️ Guardian direct failed, trying CORS proxy...");
tryGuardianWithProxy();
});
}

// Backup method: Try Guardian API through CORS proxy
function tryGuardianWithProxy() {
let apiURL =
"https://content.guardianapis.com/search?section=world&show-tags=keyword&page-size=25&show-fields=webPublicationDate&api-key=" +
GUARDIAN_API_KEY;
let proxiedURL = "https://api.allorigins.win/raw?url=" + encodeURIComponent(apiURL);
fetch(proxiedURL)
.then((response) => {
if (!response.ok) throw new Error("HTTP " + response.status);
return response.json();
})
.then((data) => {
if (data && data.response && data.response.results) {
console.log("✅ [" + getCurrentTime() + "] Guardian via proxy: " + data.response.results.length + " articles");
sourceStatus.guardian.active = true;
sourceStatus.guardian.lastUpdate = new Date();
sourceStatus.guardian.articleCount = data.response.results.length;
isShowingHistorical = false;
processArticles(data.response.results, false, "guardian");
}
})
.catch((error) => {
console.error("❌ [" + getCurrentTime() + "] Guardian completely failed:", error.message);
sourceStatus.guardian.active = false;
});
}

 

Reflection and ideas for future work or improvements:

Reflection:

Global Mood taught me a lot about combining live data, visualization, and emotion analysis. Seeing emotions vary across regions in real time was fascinating, and effects like glowing and shrinking bubbles made the map feel dynamic. It also taught me how to APIs and json files on P5.js.

Future Work and  improvements:

I would love to present it as an installation to show people the current global situation. For future improvements, I would incorporate Natural Language Processing to classify emotions more accurately, rather than relying solely on specific keywords. I also wish I had greater access to open-source news APIs to expand the dataset.

 

What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

Something that drives me crazy is some of the dryers in the laundry rooms on campus, specifically the ones that don’t have a screen! How am I supposed to know when my laundry will be ready? This system could make sense if this machine was just used by one person in their house, and they could just check on the machine whenever (or maybe there’s some sound that plays when a cycle is done). However, for a machine that’s shared by a whole building, it’s so inconvenient that you kinda have to just guess when your laundry would be ready. And if you’re too late, your laundry might just be tossed on the floor! This can be blamed on either university facilities for purchasing machines that do not have screens (since a few do, it’s just some that don’t have screens) or we can just blame the machines, because why can’t I know how long my clothes will take? So the improvement from my perspective is to add a screen!

How can you apply some of the author’s principles of design to interactive media?

Instructions! But, simple ones. Ones that build on what user’s are used to. For example, users are now used to pressing on the right side of their screen to speed up videos as that is how you do it on TikTok, YouTube, and Instagram. Instead of trying to reinvent wheel, sometimes it’s best to use what already exists.

My first time going to a library study room, I was confused on how to get out because I didn’t know you had to click a button to leave. Although it has a sign that says “click to exit,” I was still lost because other study rooms on campus didn’t have this, and the button is on the side of the door where you usually don’t look, something Norman calls a classic signifier failure. The more I used the study rooms, I found myself still struggling as sometimes the button to leave or the ID scanner to get inside just don’t work. When I swipe my ID and nothing happens I have no idea if my card failed, the reader failed, or I did something wrong, which is exactly the feedback problem Norman describes. Getting in and getting out also use two completely different interactions with no consistent logic and it breaks any conceptual model I try to build of how the door works.

I think I can apply Norman’s principles to my own work in p5.js sketches. One thing I want to start doing is making it clearer to users how they are supposed to interact with my sketches, whether they need to click, long press, or drag to interact with my piece. Right now someone could open my sketch and have no idea what to do with it, which is the same signifier problem Norman talks about with doors. I want to incorporate small visual cues like a pulsing cursor, an animated hand icon, or a brief on-screen hint that disappears after a few seconds to guide the user naturally into the interaction without overwhelming them with instructions.

Your concept

I had many ideas for this assignment. When we saw the flight path visualizations in class, I was inspired to do something similar, focusing on maybe DXB and AUH airports. However, after looking through Kaggle, I didn’t find datasets that would really work for the ideas I had, and I didn’t have many idea on how to do a new kind of visualization. Instead, I decided to think about how I could include generative text and that’s how I came up with the idea I ended up doing! I love the Inside Out movie, so I decided to create a visual of the orbs that store her memories, and when the user presses on each orb, it displays that memory.

Embedded sketch

How this was made

The first thing I did was create the design for the orbs. At first, I was going to just import images for each color, however, I decided to explore the different features of p5.js and instead create them from scratch. I referred to a video by Patt Vira where she was actually creating a Gradient Screensaver, built from circles with gradient fill. I watched up till almost the half point of the video to understand how to create the gradient fill. I’ve included comments wherever I used code from her video. I customized the colors based on the colors of the emotions from the movie. At first, I had the colors randomized and were generated using a function. I was planning to repeat the same memories for multiple orbs since it wasn’t guaranteed that I’d have enough memories for the number of orbs generated from each color. After actually creating the csv file of the memories, I realized that there weren’t that many and decided that the number of orbs would be equivalent to the number of memories, and the color of each orb would match up with the emotions for each memory. To actually create this in code, I created an object that stored all the emotion names and the color for each one. Then, I had a function called when creating the orbs that would check what color each one should be based on the emotion it was assigned.

The other main bit of code in this is the interactivity of the user pressing on the orb and the text being displayed.  When creating the orbs, each orb is assigned a line in the csv file (an emotion and corresponding memory), so when the user selects a specific orb, it just shows whichever memory text was assigned to that orb. I also imported a font from Google Fonts to try to add my own touch to the text section.

A highlight of some code that you’re particularly proud of

// referred to yt vid: https://youtu.be/Mdt81-7-U18?si=Uzq8KlE-3FfifFLA
function drawOrb(orb) {
  let gradient = ctx.createRadialGradient(orb.x, orb.y, 0, orb.x, orb.y, orb.r);
  
  let rr = red(orb.c);
  let gg = green(orb.c);
  let bb = blue(orb.c);
  
  // make the center transpert and outer area solid
  gradient.addColorStop(0, `rgba(${rr}, ${gg}, ${bb}, 0)`);
  gradient.addColorStop(0.8, `rgba(${rr}, ${gg}, ${bb}, 1)`);
  
  // use gradient as fill for the circles
  ctx.fillStyle = gradient;

  noStroke();
  ellipse(orb.x, orb.y, orb.r * 2, orb.r * 2);
}

Despite using a video to do this section, I am still really proud that I explored something new to improve the aesthetics of my assignment!

Reflection and ideas for future work or improvements

Something I wanted to add, but didn’t have the time, was a glowing effect to kind of mimic how the orbs look in the movie. I think that’s a possible improvement that could make the sketch look more realistic to the inspiration.

Concept

This work  acts an oracle by generating wise sayings. Predefined times, elements, actions and destinations are stored in the program and they are randomly paired up to create the oracle. This work employs the concept of lists to store the times, elements, actions and destinations. Text in p5js concept was explored in this work by employing textAlign, textSize and textFont to create the desired output for the work.

A background animation was created for the program by creating translucent circle that randomly move around on the screening. This was done using class and arrays. To keep the design visually appealing, when a ball goes off the screen, it appears on the opposite side of the screen and and continues moving the same trajectory.

An oracles fades and a new one appears and this is done by changing the transparency of the text each frame. When the text becomes fully transparent, it is deleted and a new one is formed and displayed. When you click on the screen, the program can also change between light and dark mode using the callback function mouseClicked and an if statement

Code I’m proud of

for (let i=0; i<currentLines.length; i++) {
    text(currentLines[i], width/2, startY + (i*spacing));
  }
  
  // Fading 
  textAlpha += fadeSpeed;
  
  if (textAlpha < 0) {
    currentLines.length = 0;
    generateNewPoem();
    fadeSpeed = 2;
  }
  
  if (textAlpha > 400) {
    fadeSpeed = -2;
  }

This is the code that generates the oracle and causes the fading effect. A for loop is used to print out randomly generated text in a vertical format and the if statements gradually increase the opaqueness of the the text and then makes it transparent eventually disappear.

Embedded Sketch

How it was made

The texts in the various arrays that are randomly selected where generated with Chat GPT with the goal of creating a more natural and consistent text

Reflection

This was a good exercise to make use of my knowledge in text manipulation, arrays, classes and other concepts learnt in other lectures. This work can be improved by building on the background animations and changing the colors the text are printed in to create a more visually pleasing effect.

Concept

I wanted to make a generative text output inspired by one of my favorite childhood comfort food: alphabet soup. It’s a tomato soup where the pasta is made out of the letters (a-z). I wanted to recreate a soup bowl that would have letters floating around. In the sketch, it shows a white dinner plate with a reddish tomato soup filling, with 80 randomly generated lowercase letters slowly bouncing around inside the soup. The letters stay contained within the circular bowl, and when they hit the edge, it reverses direction just like real pasta letters drift and bump in a bowl of soup.

My Final Sketch!

Code I’m Proud Of

 // keep inside soup
if (dist(l.x, l.y, cx, cy) > radius) {
  l.speedX *= -1;
  l.speedY *= -1;
}

Before I had these lines, my letters were all just floating around the whole sketch and I needed a way to keep the letters within the soup circle. Instead of checking rectangular walls, I used the dist() function to measure how far each letter has drifted from the center of the soup. When that distance exceeds the soup’s radius, both speed values get flipped by multiplying by -1, sending the letter bouncing back inward. This keeps all 80 letters perfectly contained within the circular soup area at all times.

How This Was Made

I used a loop that runs 80 times to create 80 letter objects, each placed at a random position inside the soup circle using polar coordinates and it picks a random angle and distance from the center, then converts them into x and y coordinates with cos() and sin(). Each letter gets a random character using String.fromCharCode(), which converts numbers 97–122 into a through z (I learned this from w3schools), along with random speed values for both directions. All of this gets stored as objects in an array called letters[]. Every frame, each letter’s position is nudged by its speed values to create the floating movement, and dist() checks whether it has drifted too far from the center and if it has, both speeds are flipped by multiplying by -1, then it shows a bouncing movement of the letter back inward and contained within the soup circle. For the font, I played around with different fonts and I landed on Courier which was the closest I could find to the chunky, typewriter-style lettering you actually see on real alphabet pasta.

Reflection and Future Improvements

This project taught me how useful polar coordinates are for placing things inside a circle instead of just rectangular, and I got a lot more comfortable using object literals inside arrays as a lightweight way to store and manage multiple moving things at once. Next time, I’d love to add mouse interaction so clicking near a letter makes it spin or dissolve, add a spoon that follows the cursor and stirs letters out of the way, or occasionally have the letters briefly cluster into short words before drifting apart again, something like the artwork “Text Rain” that we looked at in class.

The reading shifted my perspective on designing from focusing more on the functionality of the product, which is the norm, to focusing on the user of the product or what we are designing. I realized that designing an  object or tool for the public requires you to have some consultations with other parties and we should invest more effort into how the user interacts with the product rather than the product design itself. The reading creates a concern though. Can this approach to focusing on the user’s interactions lead to a compromise in the quality  or functionality of the work produced and how do we find the right balance between functionality and interactivity.

Something that genuinely drives me crazy (and it’s not in the reading) are the old washing machines that were in dorm laundry rooms. Not even because they’re complicated, but because you literally cannot tell what they are doing. You press start, sometimes it locks, sometimes it doesn’t, sometimes it just stops and you don’t know if it’s broken or thinking. I’ve stood there many times not knowing if I should open it, wait, or restart it. And the worst part is everyone reacts differently, some people keep pressing buttons, some unplug it, some hit it (honestly valid).

But after reading Norman I realized the problem is not that the machine is complicated but it’s that it has no feedback and no signifiers. The interface doesn’t communicate what state the machine is in. Norman explains that good design should make the possible actions discoverable and understandable. But here you don’t know if is it washing? paused? locked error?

The machine technically works, but the interaction fails. The simplest improvement would actually not be adding more buttons but adding better communication. A small progress bar, a timer that updates, or even a message like “Door will unlock in 30 seconds” would fix almost all the confusion. Norman talks about how users shouldn’t need instructions for simple objects, and when they do it means the design is wrong  . A washing machine should not require guessing or trial and error.

This connects a lot to interactive media. When someone opens a sketch or website, they don’t read instructions first. They try to understand it immediately. So discoverability becomes really important. Norman calls this human-centered design, which is designing based on how people actually behave, not how we wish they behaved  .

I realized my own project actually needed these ideas too. For example, at first my visualization was confusing because nothing indicated when the music would start, how to make it stop, and even at the beginning it still takes a bit to load and you don’t know why (even though its because the image and sound is uploading). After thinking about Norman’s principles, the play button became a signifier: it communicates the action you should take. Also the movement of the dots works as feedback. When the music gets louder and the dots expand, the system is telling you your action (playing the song) had an effect.

In interactive media especially, feedback is essential, for example, as Norman explains, users keep pressing elevator buttons when they don’t receive feedback. That’s literally what happens in digital projects too, if nothing responds, users assume it’s broken. So animations, hover effects, and sound reactions are not just decoration, they are communication.

Another idea from the reading is conceptual models. People build a mental explanation of how something works. If the system behaves differently from what they expect, they get confused. My sketch actually depends on this a little I would say: people assume music causes motion, so when the dots pulse with sound, it feels intuitive. They don’t need instructions.

Overall, the reading made me realize interactive art still has to be usable. Even if something is artistic, the viewer should understand how to interact with it. Good design is not just aesthetics, it is communication between the system and the user.