Category: F2026 – Mang

 

Overview

Honestly I have no idea where this idea came from. I’ve been scrolling a lot on Pinterest, and I saw a lot of these kinds of images, and also my mom just found recently our old Magic 8 Ball, so I thought why not combine the two?

I just wanted to create something fun as well. I have been having some pretty bad days, and making this not super serious helped a lot with my mood, and I really enjoyed coming up with all the responses for the Magic Ball. I also made some of my friends try it out once it was ready and they also really enjoyed it.

Process

Originally, I really wanted to make it look very cool, and make it 3D, but I saw that I can only draw a sphere in a WebGL mode, so I just stayed with circles and a triangle. I had to resize them a lot so that the text won’t be tiny, it is not that big like this either, but much better than originally.

I ALSO wanted it to have some magical background, BUT the preload function was not working here either. I have no idea what I did wrong, but it just wouldn’t work at all, so in the end I just stayed with this background.

The Code + a LOT of problems

Now, even though the code is short, I had the most amount of problems with it so far. The first thing I did, even before writing a CSV file was to draw the main object, so the Magic ball. This was really easy and I had some fun even by adding some shade to it:

function draw() {
  background(220);

  //the structure of the ball, drawing a bunch of circles, a triangle and the shadow to make it look fancier 
  fill('grey')
  noStroke();
  ellipse(300, 530, 500, 120);
  fill('black');
  circle(width / 2, height / 2, 500)
  fill('white');
  circle(width / 2, height /2, 400)
  fill('black');
  circle(width/2, height/2, 300);
  fill('white');
  triangle(300, 420, 200, 220, 400, 220);

After creating this, I strated on the actually challenging part of the code. This is how the start of the code looks like now:

let question; //inputfield
let submitQuestion; //button
let responses = []; //csv of possible responses
let currentResponse = ""; //store current response on the screen

//async_await, the code waits until the full CSV file is fully loaded, and only then continues and creates the canvas and everything below
async function setup() {

//try and catch, because I had SO many errors with loading the CSV, and could not figure out where it went wrong
  try {
    responses = await loadStrings('responses.csv');
  console.log('Loaded responses:', responses);
  } catch (error) {
    console.error('could not load', error);
  }
  
  createCanvas(600, 600);

Well it didn’t look like this always. After the drawings, I created a CSV file in p5.js for all the responses, and when I was done I made a preload function before setup, so I could preload that CSV. BUT. For some reason, I have no idea why, the text just wouldn’t appear. I tried to figure it out with a console.log, and it turns out that it was for some reason returning an empty array. I tried everything to make it work, I quadruple checked the came of the file, that my browser was allowing it to read it, I changed the loadStrings function to loadTable, but it just didn’t work. So, after some meditation to calm myself down, I asked ChatGPT, what I should do. It suggested to try the things I already tried, but it also mentioned the try and catch as well. I did learn some C# back in high school, and I remembered it slightly, but I decided to search it up just in case and try it out after. Previously, when I was searching for answers among the p5.js references, I also found the async_await function, so I combined the two together, AND IT WORKED. I was so happy, I didn’t dare touch it anymore.

The reason why I know it worked after, and only after that is because while I was waiting for the Javascript fairy to solve my problem, I made a little question field and a button for submission. Since the Magic Ball needs a question for it to answer, and for the user to be able to actually interact with it, I made this, directly below the previous code:

 //Create an input field to ask a question
  question = createInput('');
  question.attribute('placeholder', 'Ask a question from the Magic Ball!');
  question.position(170, 5);
  question.size(150, 30);

  submitQuestion = createButton('GOO!');
  submitQuestion.position(330, 5);
  submitQuestion.size(50, 36);
  
  //when the button is pressed it calls the giveAnswer function
  submitQuestion.mousePressed(giveResponse);
}

// if checks if there is any user input, and if there is it goes through the CSV file and choses a random response
function giveResponse(){
  let userQuestion = question.value().trim();

  if (userQuestion.length > 0) {
  currentResponse = random(responses);
  } 
}

The giveResponse function works with a simple if. I am not exactly sure of this is the most elegant way to do this, but it worked so I accepted it. As the last step to give my text a few attributes I added this in the draw function:

  //the reponses in the triangle
  fill('black');
  textStyle(BOLDITALIC);
  textAlign(CENTER, CENTER);
  textSize(12);
  text(currentResponse, 220, 230, 160, 120);
}

The piece if code I am the most proud of, however remains that little try and catch part, just because of the absolute misery it gave me.

And finally, here is the full code:

let question; //inputfield
let submitQuestion; //button
let responses = []; //csv of possible responses
let currentResponse = ""; //store current response on the screen

//async_await, the code waits until the full CSV file is fully loaded, and only then continues and creates the canvas and everything below
async function setup() {

//try and catch, because I had SO many errors with loading the CSV, and could not figure out where it went wrong
  try {
    responses = await loadStrings('responses.csv');
  console.log('Loaded responses:', responses);
  } catch (error) {
    console.error('could not load', error);
  }
  
  createCanvas(600, 600);
 
  //Create an input field to ask a question
  question = createInput('');
  question.attribute('placeholder', 'Ask a question from the Magic Ball!');
  question.position(170, 5);
  question.size(150, 30);

  submitQuestion = createButton('GOO!');
  submitQuestion.position(330, 5);
  submitQuestion.size(50, 36);
  
  //when the button is pressed it calls the giveAnswer function
  submitQuestion.mousePressed(giveResponse);
}

// if checks if there is any user input, and if there is it goes through the CSV file and choses a random response
function giveResponse(){
  let userQuestion = question.value().trim();

  if (userQuestion.length > 0) {
  currentResponse = random(responses);
  } 
}

function draw() {
  background(220);

  //the structure of the ball, drawing a bunch of circles, a triangle and the shadow to make it look fancier 
  fill('grey')
  noStroke();
  ellipse(300, 530, 500, 120);
  fill('black');
  circle(width / 2, height / 2, 500)
  fill('white');
  circle(width / 2, height /2, 400)
  fill('black');
  circle(width/2, height/2, 300);
  fill('white');
  triangle(300, 420, 200, 220, 400, 220);

  //the reponses in the triangle
  fill('black');
  textStyle(BOLDITALIC);
  textAlign(CENTER, CENTER);
  textSize(12);
  text(currentResponse, 220, 230, 160, 120);
}

 

For the future

I feel like I learnt a lot from this assignment, for some reason even more than from any previous one. I feel like I know a little more about how I have more ways to start a certain problem, but also that I am able to ask AI for help without asking it to solve it for me. Even though it was hard, I am proud to have finished it. In the future, I would love to make a more refined ball as well, but non of the images were loading in the preload function, so I ended up drawing it myself.

Resources

I took these as base for the responses:
https://magic-8ball.com/magic-8-ball-answers/

Creating the button and the question field:
https://p5js.org/reference/p5/createInput

https://editor.p5js.org/Samizdat/sketches/eUsieMk6j

The async_await function, after the preload() was not working:

https://p5js.org/reference/p5/setup/

https://p5js.org/reference/p5/async_await/

Text style:

https://p5js.org/reference/p5/textStyle/

Some help to debug the problem:

I asked ChatGPT to help me figure out what the problem was, after the preload() function kept returning my array as empty, and it suggested the try and catch solution, so I did some research on that:

https://www.w3schools.com/js/js_errors.asp

https://www.geeksforgeeks.org/javascript/javascript-errors-throw-and-try-to-catch/

The final code was written by me, the AI only helped in terms of suggetsing me this solution.

 

 

 

I was surprised at just how many parts of design I was not considering! The reading makes so many things a lot clearer. Logically, I know that machines can be difficult to use, and that there is a learning curve when it comes to them. But for so long, I had just dismissed difficult to work with machines as something humans just had to deal with. Professionals are more likely to understand how to use certain machines, and older people may not understand how to use newer technologies. That’s understandable, and feel like simple facts of life, some people are just not capable of understanding machines. But of course, that shouldn’t be true! Machines should be designed with user experience in mind, engineers should not be dismissing people’s confusion.

I am curious about what the line is though. At what point should humans understand machines and devices. If we follow this logic, should I not know how to fix my devices if they break? Does it not make sense for me to have the tools available in order to not be reliant on anybody else when it comes to my own devices? Should I leave repairs such as this to the professionals? There’s just a ton to consider when it comes to how much we do and should understand about devices.

The reading had me thinking about certain designs I may struggle to use or find myself continuously frustrated with, and something that came to mind was sinks. I always felt that sinks are, for some reason, the one thing hotel bathrooms cannot get right (hotel bathrooms as a whole are designed badly, but I am specifically referring to sinks now). Which is crazy to me, considering there are so many sinks out there that work perfectly fine. What some hotels do however is they decide to make their sink have a fancier design. This usually means changing the sink’s faucet to look more fancy and ‘clean’, or by changing the bowl that collects the water (see the picture below). This ends up creating a few problems, the one I am used to encountering is when a sink’s faucet is too far back for the bowl. So the water is only falling in the very back of the bowl, and you have to stretch your arms over the unreasonably big bowl that serves no purpose other than to block your way. Additionally, some sinks have the bowl be on the table rather than embedded into it. This not only makes the sink uncomfortable to use, but it also puts the soap at an awkward place. Now you can’t place the soap near where the faucet is, it has to be put at the side, which means anytime you need to use it, you will naturally be getting water onto other part of the table.

I don’t think the design for sinks needs to be that crazy. If hotels really did want sinks to look fancy, then they should just change the countertop and maybe the color of the faucet, but leave the actual sink alone. Any designs to improve on the look only harms the design.

When it comes to interactive media, the main thing to think about is obviously, the interactions with technology, so it makes sense to focus on the connection between humans and how to make technology more accessible to them. If you want to create something that people can interact with, they need to know exactly how to interact with it. First of all, human-centered design (HCD) should be a priority, if the entire point is for people to interact with it, then we need to keep the people in question in mind. Additionally, if people are not able to figure out the design, then that ruins the experience of using the design. No matter how cool it is, if people deems it too annoying to try out, they will be less likely to care for it. A good way to do this is by introducing signifiers to designs, just to make the overall experience of using them much simpler. All other principles he mentions are also important in the general sense, things like affordances, mapping, signifiers, feedback, etc. all should just be a normal part of the design process, especially when it comes to interactive media.

Reading Reflection

This is the first time I have came across literature on design, and it is refreshing to read about design principles which ground artistic choices in a project. I believe technology itself is both a mode and barrier to communication; a barrier because human connection is supposed to be real, felt, and not interrupted, and a mode because of its ability to reach so many across the world just through sophisticated internet systems.  Norman discusses this as well with how machines are rule based and rigid, but humans are flexible and develop relationships over understanding. The principles of discoverability and understanding are great design principles to begin with. Especially with code, I believe a well-commented code can actually get across the developer’s thinking process, and also makes the codebase a place for others to collaborate. I believe a well-commented code adds up to the discoverability of the code, such as what feature attributes to what code line specifically. I think this is a major part where it co-relates to interactive media.

I also find it interesting how Human Centered Design is called a philosophy and not an area of focus. I think this argument isn’t developed enough in the reading, as the reading refers to this as a philosophy but the rest are referred to as areas of focus.

Something that drives me crazy is delivery riders trying to find buildings on campus. Almost every time I order food the rider calls me because they are lost somewhere on the Highline. All the residences look the same from outside and the names are not visible from the road. There are basically no signifiers for them, so they go in circles until someone comes down to get the food. A map at each entrance (a stair leading from the ground floor or every road connection to the high line) that is laid out the same way the buildings actually are so the map and the real space match. It is such a small thing but it wastes time for both the rider and the student, and by Norman’s logic it is not the rider’s fault at all, it is the design.

For interactive media, feedback is the principle I keep coming back to. If a user clicks on something in a sketch and nothing happens right away, they just keep clicking, same as people pressing the elevator button over and over. A color change or a small sound is enough to tell them the program got their input. The user should also know what to click or press without me explaining it; a button has to look like a button. Mapping is the easy one in a sketch since moving the mouse up can move something up on the screen and nobody has to think twice. The system image part stayed with me the most though. The user can never ask me what I meant while they are using my project. Whatever is on the screen is all they get.

Coding Assignment

I decided to make a room simulation by using the data of the CO2 and temperature from an office room. I used the Occupancy Detection dataset from Kaggle, where they taken in different motion readings from the day including the CO2, temperature, and timing of the day. I map a graph directly below the simulated “room” to give us an idea of the CO2 levels of the room as the time of the day changes. I have also made a window which changes color as the time of the day changes, and then the color of the room changes as CO2 levels get higher or lower (Red for high CO2 and blue for lower).

Code I am proud of

The part I’m most proud of is getting the room to change color with the CO2 level. Each frame I take the current minute’s reading and use map() to turn it into a number between 0 and 1, where 400 ppm (roughly outdoor air) is 0 and 1400 ppm is 1. I wrap it in constrain() so a reading above 1400 can’t push the value past 1 and break the color. That number then goes into lerpColor(), which blends between a calm blue and a warm red, so the room slowly shifts from blue to red as the air gets stuffier over the day.

What I like about this is that one line of math carries the whole idea of the project. You don’t need to read the numbers to know the air is getting worse, you can just see the room turning red. It also made the lag really visible. People arrive around 7:36 but the room doesn’t turn noticeably red until after 9, because CO2 takes time to build up.

let r = rows[idx];

  // ROOM: floor color follows CO2 (blue = fresh, red = stuffy)
  let t = constrain(map(r.co2, 400, 1400, 0, 1), 0, 1);
  fill(lerpColor(color(120, 180, 230), color(230, 90, 80), t));
  stroke(60);
  strokeWeight(4);
  rect(100, 40, 600, 260);

How this was made

I started with importing the datatest.txt and cleaning it. There were a few errors with empty lines which I got rid off. To be particular, there was one less column header compared to the number of columns in the file, and when I was parsing each line to get each column value into the array, I ran into an error. There was an empty row, so I had to look for such things in the dataset too. Then I looked at the names of the headers, and assigned variables to each one.

Since the headers were shifted by one, I couldn’t rely on the names, so I read each value by its column number instead. I only kept the rows from February 3 because it’s a full day, midnight to midnight, which gave me 1440 readings, one for every minute. When I printed the first line of data, I noticed the file starts at 14:19 on February 2, so that day was incomplete. The file also stops partway through February 4, which left February 3 as the only full day, so I kept just that one. I saved each minute as an object with its time, temperature, light, CO2 and occupancy so the rest of the code would be easier to read.

After that I built the visual in layers. First the room, with the floor color changing from blue to red as CO2 goes up. Then the window, which gets brighter with the light reading, and two people who show up at the desks when the room is occupied. Under the room I drew a line graph of CO2 for the whole day, with a dashed line at 800 ppm since that’s around where ventilation usually kicks in. Last, I added the timeline so the day plays on its own, and you can hover over the canvas to scrub to any minute.

Embedded Sketch

Reflection and Improvement

I would want to make this simulation for dataset2 too, which was in the kaggle dataset. Those readings were taken with a closed room and therefore CO2 builds faster compared to this where it is slower. I would also love a 3d model of the room with actual sunlight changing as the day changes and the sunlight coming in from the window. I would probably make a comparison between the both.

 

A few lines into this paper and all I could think of were the Campus Center doors. They are my “Norman doors” (1): always knocking me over to the side or even shutting on me when I pull the handle (of these supposedly automatic doors). I am 3 semesters in, and I have seemingly not understood how to use these doors despite their outrageous yellow signs. I used to think this was just me being scatterbrained. However, Norman’s opening chapter somehow redirected my self-blame back onto their design. By claiming, “I push doors that are meant to be pulled, pull doors that should be pushed, and walk into doors that neither pull nor push, but slide” (1), Norman helped me feel a strange kind of relief. What I did not expect was how technical the rest of the chapter would get about why doors fail. I understood his viewpoint that everyday objects are supposed to be simple to understand and mundane to use. For instance, he notes, “With complex devices, discoverability and understanding require the aid of manuals or personal instruction. We accept this if the device is indeed complex, but it should be unnecessary for simple things” (2).

He develops a fuller framework to make his case (affordances, signifiers, mapping, feedback, and conceptual models), all in service of what he calls “human-centered design” (5): the idea that design should accommodate people rather than the reverse. While I can relate affordances and signifiers to where the Campus doors fail, I want to push back on how tidy Norman makes this framework sound. His framework is almost too persuasive. It retroactively explains every ‘badly designed’ object I have ever used. I keep wondering whether this is the sign of a genuinely good theory, or just a very flexible vocabulary that can be draped over any complaint. His refrigerator story, for example, proves my point. While he seems to be right that the two controls suggest a false mental model, he also admits that even knowing the correct model did not let him operate the fridge properly. This is because the design gave him no way to act on that knowledge. This is the part I find more interesting. Correct understanding and actual usability can come apart entirely. I personally do not think Norman fully resolves that gap. He just treats it as another design failure to be fixed with better mapping.

Nonetheless, I believe that what he discusses is important. When it comes to my work (my generated artworks up to week 3), he made me realize that, so far, I have not been using signifiers. As a result, the user might not discover the full function of the interactivity I tried to incorporate. Without my written documentation, a user might not know that, for example, my first p5 sketch allowed for a change in character as the mouse is dragged. From now on, I will keep this in mind and try to put this into practice as I progress in the course.

 

To start with, the reading, especially the examples of the sink in the hotel and the pull-push doors, made me think of a personal example, actually. We have a sink at home in the bathroom, and whoever visits us for the first time, they are always so confused by it, because you have to turn the faucet to the side, not up, to turn it on. (Figure 1) Now, it is on the side and not the top, but other than that nothing really indicates how it should be used. My family and I only know it because we have been living there for years, and I always get surprised when someone asks for help with it, but now that I think of it, it really lacks a good signifier.

For something else that really bothers me with products other than the things mentioned is probably when they overexplain something relatively easy-to-understand function, at the cost of describing something that ACTUALLY needs some description. In the past, whenever I tried to connect a wireless device to my phone or laptop I always had to look it up online how to actually connect it, because each of them has different methods to do so. The reason why I always have to go online is that in the instruction manual, they were too busy talking about how the button with the “plus” signal increases volume and how the one with the “minus” decreases. I understand that this also needs to be said in case someone is having their first time, but I feel like some designers are literally feeding all the information to me. These instruction manuals sometimes make me feel so stupid, and sometimes I think I am the actual designer and maker of the product and know everything about it. I have rarely come across a digital product that gives me proper infomration about the actualy usage of the product and doesn’t talk about the designer, their family and how this is the best product in the world for at least three pages.

To maybe make it more HCD I feel like all these informations could be put to a way more visible place. For example,  I sometimes see products that have a little instruction manual on the box itself, so even before buying it I can see and decide if a product like this what I actually need. I knwo that today, everything can be just looked up on the internet, but I don’t think that should replace proper documentation on the product itself.

For IM, I feel like whenever I had to design a website for example, the most common feedback was that “So what do I do now?”.  On the web, especially, where you can do SO many things, click your right, left mouse buttons, go up, down, enter, I feel like designing a UI that is either explained how it is dedicated to use, or it can be easily figured out by the user while using. It is easier to lose interest in a website that you can find hundreds of in 5 seconds on the very same device you already have, than a product that you had to spend a lot of money for, waited for delivery, and now finally is in your hands. I feel like for this reason, designing a website, a game or anything like that is even more important to take into consideration the role of affordances and signifiers, as the author mentions. They need to comunicate what can be done (like, if I click my right mouse button, will anything happen, or am I just wasting my time) and how that can be done. I think a good example of that was the menu for the restaurants. Using symbols can help, as they are not bound by language, colours (as usually red indicates wrong and green correct) or anything that can be understood by a large amount of people.

One part of the reading that stood out to me was the distinction between interaction and reaction. It says, “Interaction and reaction are apples and oranges, horses of different colors, tigers of different stripes.” This made me think about how easy it is to mistake a system reacting to the user for a system actually being interactive.

A strongly interactive system, to me, is something that is open to interpretation and interaction in a way where the user is truly connected to the system through an action-reaction ecosystem. The user’s actions should have some meaning within the system, rather than simply triggering a response that could have happened regardless of what they did.

In my current sketches, I only let the user control the local state of the sketch using mouse clicks and drags. The sketch reacts to what the user does, but after reading this, I think there is more I could do to make that interaction meaningful. I could make a sketch that expects a more explicit answer or question from the user and responds back to them in a meaningful way.

It should also involve me, as the developer, communicating a message or feeling that is open to interpretation. The user should be able to affect the sketch while also forming their own interpretation of what the sketch is trying to communicate. That feels closer to the kind of interaction described in the reading, rather than simply making a sketch that reacts to inputs.

I find the concept of interactivity pretty interesting. The author of the book chapter made it very clear that he despises how the meaning of the word has been skewed recently, and I agree with him. The thing is though, at what point is something just my reaction vs at what point am I actually interacting with the thing? I’m wondering because I believe the writer is correct in his assumption that a lot times when people refer to interactivity, they actually mean normal reactions. However, are interactions and reactions not connected in that sense? Reaction is a form of engaging with something you see, not at the level of actual interactivity the author is seemingly looking for, but still, you are engaging with the material in some matter.

When it comes to movies are you just reacting or are you interacting with the creator. If it is just your reaction, then, does that inherently mean there wasn’t a degree of interactivity even through the reaction ? Again, I am not saying the writer is wrong in what he claims, but I just can’t help but wonder what’s the line between reactions and interaction. Does interaction have to entail the characters in the story should hear you when going in a scary house? Is part of the interactivity not your own reaction? Looking beyond the characters of the screen, could we not say there was a level of interactivity when it came to audience and the creator’s hope in bringing in causing your anger and fear to happen?

When I think of strongly interactive systems, I tend to think of systems in which your input can actively change what is happening in a piece of media. Additionally, I think a good way to improve user interaction in my p5 sketches is by having the use play into the piece. Maybe by giving them something to click or by having their addition change the piece in some way.

In my opinion, I would classify the characteristics of a strongly interactive system as one that requires “two actors,” as Crawford mentioned. Interaction is not something as surface level as a book or a movie that you watch or listen to, but something that reacts to you and requires a back and forth interaction between the user and the system. What surprised me while reading was finding out that things I thought were interactive, such as dancing, opening a fridge door, and watching a play, were actually either not interactive or had a very low degree of interactivity. A strongly interactive system should be able to listen to the user’s actions, process them, and respond accordingly. I also agree with Crawford’s idea that interactivity exists on a scale, as simply responding to an action does not necessarily make something highly interactive.

Looking back at my p5 sketches, I think I could improve their level of interactivity by making the user’s actions have more of an effect on what happens within the sketch. For example, in my generative desert night sky, clicking currently generates a new arrangement of stars with different positions, sizes, speeds, and colors. Although the sketch responds to the user, the response is still quite limited because clicking always produces a similar result. To make it more interactive, I could allow different user actions to affect different parts of the artwork, such as having the movement of the mouse change the direction of the stars or allowing the user to affect the appearance of the sky. I think this would create more of the conversation Crawford describes. I would want to improve the degree of user interaction by not only implementing interactive functions and concepts where the user would be able to interact with the artwork or code, but also working harder on the function and form of the design. As I learned while reading, interactive design isn’t only about making an interface look good or function correctly, but considering both aspects to design the entire experience of interacting with something.

 

 

 

This book chapter really opened my eyes in terms of how deep the idea of interactivity can really go. Before reading it, I think my definition of interactivity would simply include anything that reacts or changes based on an input from a user. However, now I think looking at interactivity through a scale makes much more sense. Aside from properly incorporating the listening, thinking, and speaking principles addressed by Chris Crawford, I think a strongly interactive system should respond to the different inputs provided by the user and be able to take them into consideration for future interactions, making the interactivity less of a ‘call and response’ and more of a continuous ‘conversation’. This changes the user’s role to an active participant in the interaction rather than just a passive presence giving commands. Ultimately, making it more of a live feedback loop.

For improving the degree of interaction for future p5 sketches, I think I’d want to focus on moving past merely having mouse-clicked interaction or having the sketch change with each interaction. I’d want to incorporate different ways for the user to interact with the sketch, like moving the mouse around the screen to change the color or speed of something. Additionally,  I’ve seen a video of a ball that has some kind of gravity on it, so when the user clicks, the ball drops and bounces under the effect of gravity, eventually stopping. I’m not sure how advanced that would be to create or if it’s something we’ll cover eventually in class, but I think having a work where maybe the user can kind of physics system that allows the ball to react differently depending on how it was tossed. Overall, making the work more interactive.