Month: September 2024

Concept

Honestly, I’ve been hesitant to start working on this assignment, because words like ‘data visualization’, ‘statistics’ kind of scared me with their broadness and complexity. Therefore, I tried to at least find statistics, which followed my interests. And at this moment, I saw on my IG feed that the Friends series have debuted exactly 30 years ago, on September 22, 1994. So, I started searching for any kind of statistical data on Friends (as I am big fan of this series myself), and I found this website, which has collected data about all episodes of Friends. So the dataset contained information, on year, season, episode, title, summary, director and a rating. From that, I decided to present this information in Friends series style, so it would be actually generative text output project, where you would be randomly taken on one of the episodes info collection.

You can see my final sketch here:

Sketch

To arrive at this final point of sketch, it took me a great amount of time to work with the code line by line. You can press on screen to see data on different episodes.

Firstly, I found it difficult to generate multiple pieces from the same row. In the class, we considered situations, where there was randomly selected raw and corresponding column with an item was extracted. However, in my case, I needed to figure out on how to extract values from the same row, so the row wouldn’t be randomized differently for separate elements. For example, I can’t extract “year of production” value from random row and then put it with the “title” value from totally different row, cause they are not related. So, in my project the whole difficulty lied in fact that all elements were related and had to be extracted from the same row, meaning row should be randomized only once and this value kept for all.

Highlighted code

function preload(){
//creating a p5.table object for main data
strings = loadTable('friends.csv', 'csv', 'header'); 
}

//retrieving data from the table 
let numRows = strings.getRowCount();
//setting random number of a row of a table
rowrandom = int(random (numRows));

// in the next lines I will be retrieving different pieces of data from the same random row

//retrieving "year" from the data
year = strings.get (rowrandom, 0);
fill ('#d8ccda');
textSize (16);
textAlign (LEFT);
//presenting it on screen
text ("Year of production: "+ year, 100, 210);

In the code above, you can see how I solved my problem by randomizing number of rows in the table and then kept this value in a variable and applied throughout the code.

Moreover, I learned to use image () function, by uploading a TV screen image.

//retrieving rating of specific episode based on random row
rating = ratings.get(rowrandom, 0)
// mapping range of ratings to the range of font sizes using a variable sizetext
let sizetext = map (rating, min(float(numbers)), max(float(numbers)), 10,50)
//setting mapped text size
textSize(sizetext);
textAlign (CENTER);
fill ('#504579');
text (rating, 300, 550);

Another part of the code I’m proud of is the one above, because I used map() function to illustrate difference in ratings of the specific episodes through ranging text sizes of the rating numbers.

However, there are imperfections in the code due to poor arrangement of data. The dataset that I downloaded and converted to .csv, contained commas in the summary descriptions of the episodes and they were not separated by the “”, which led to confusion in the code, as the system identified text after comma as a next column. It can be seen that at some point of generation the text “Directed by…” starts to show greater amount of texts, which are not even related to director names. This is parts of the summary that got identified by the system as next column. However, there are also parts of .csv file, where “” are correctly placed.

Highlighted code

Overall, I am really enjoying my output. The thing I would like to work on is to correct the dataset to avoid errors. Moreover, I would like my project to be more responsive to the user, so I would like to add a function of guessing the correct season/director/year of the episode, so that it will turn to a fan quiz on Friends. I would also further work on the visuals, to add more stylistic elements resembling Friends aesthetic.

 

Concept

After working on my previous project which was related to my culture, I wanted to continue to incorporate Indonesia into my work. I was born in a city called Bogor in Indonesia, and the city is also known as Rain City, with how much it rains there. Thus, I was inspired to use weather data on rain in Bogor. However, I could only find dataset that wasn’t specific to Bogor, but a general data of rain in Indonesia. This is where I got my dataset from. The dataset has daily records of rainfall and the average temperature of the day from 2010 to 2020 from one station. The initial image I had in my mind was of a rainy scene; nice and simple. One raindrop representing the amount of rainfall in that one day, position from left to right, 2010 to 2020.

Highlight

I was very proud of myself for thinking about making a class object to make it easier for me to create multiple rain droplets. I also incorporated the map function to determine the size, coolness (which is based on the average temperature; the warmer it was the more green the raindrops look , and the colder it was the more blue), and the speed of the raindrops falling was also determined by the size (mapped from the rainfall data).

 // size, color, speed
size = map(float(rain[i]), rainMin, rainMax, 0, 20);
cool = map(float(temp[i]), tempMin, tempMax, 255, 80);
speed = map(size, 0, 20, 3, 10)

// adding droplets
droplet = new Droplet(posX, posY, size, cool, speed);
droplets.push(droplet)
droplets[i].show();
droplets[i].fall();

Sketch

Reflection

I thought this project was very simple, and I would love to challenge myself further with adding texts, perhaps generative texts, to this piece to make it more interactive and interesting.

Two of the most important characteristics of good design are discoverability and understanding. Discoverability: Is it possible to even figure out what actions are possible and where and how to per- form them? Understanding: What does it all mean? How is the product supposed to be used? What do all the different controls and settings mean?

– Norman Don

Pliers vs scissors. I don’t know if this applies to all pliers, but the one my dad has works in a way that is opposite to how a scissor works; when you close the two handle, the corresponding ends would close too in a scissor to cut, but with my dad’s pliers you have to separate the handle so that the corresponding ends close, so it always confused me whenever I had to use his pliers. I think the functionality of a design also depends on who the design is intentioned for, because for my dad, that plier works just fine because he uses it regularly or has experience in using it. Whereas, for me, I seldom use it and I use scissors more often compared to pliers (for different reasons, but in general); so it makes sense why I would find it confusing.

This idea of intended user also reminds me of Apple’s Senior Mode, where the app’s interface is modified to be more accessible to older/senior users. It would showcase the specific apps, most used ones perhaps, and would display them in big blocks on the home screen for easier access. In this way, I would also like to incorporate accessibility in my future interactive media works.

Reading Don Normans writing left me more aware of how designs of everyday objects really affects our experiences and emotions. His concept of “Norman doors” particularly resonated with me. I have in many occasions been embarrassed by something simple just as opening a door due to poor designed handles or unclear instructions like the doors in D2. Its frustrating how a door can become a source of confusion and even anxiety even when it is a very basic object.  This explanation by Norman made me realise how much I take for granted the simplicity of well-designed objects and how design fails can turn simple interactions into stressful experiences. It was an eye opened for me as a future engineer on the role of design and importance of user-centred designs.

One of the things that I really frustrates me in my everyday life that Norman doesn’t fully talk about is how confusing digital interfaces are. Our phones, for example. The settings menu  always feel like a maze to me. Important options are always hidden under many other menus which makes it hard for me to find what I need quickly. It might be a personal issue but we can agree that the settings application is always frustrating.  I do understand that most digital interfaces don’t always have clear signs or clues, like Normans concept of affordances and signifiers, like physical objects. I believe that these interfaces can be improved and made better by looking into the principles of discoverability and feedback that Norman discusses. His ideas can also be applied in interactive media while designing interactive experiences by ensuring that users understand what actions they can take and how the actions affect the environment.

 

Sketch: 

Concept: 

The concept for this sketch came from my roommate and I’s  constant struggle each morning to decide what to wear for the next day. What I decided to produce was an random outfit generator that takes a list of hats, shirts, jackets, pants and shoes, and corresponding colors for each item that I had, in a form of an csv, and produces random results, yielding a different outfit.

Code Highlight: 

 

function generateOutfit() {
  let categories = ["Hat 🧢", "Shirt 👕", "Jacket 🧥", "Pants 👖", "Shoes 👟"];    //array for each article of clothing
  for (let c = 0; c < categories.length; c++) {  //loop through each category
    let category = categories[c]; //current category
    let colorOptions = [];        //array that color options for current category
    //loops through each row in clothesData to find the matching category
    for (let i = 0; i < clothesData.getRowCount(); i++) {
      //find a match for category based on first column in current row
      if (clothesData.getString(i, 0) === category) {
      //once the category of the table and the corresponding category matches, the colors in the same row are stored in the coloroptions array. 
        let row = clothesData.getRow(i).arr.slice(1);
        for (let j = 0; j < row.length; j++) {
          if (row[j] !== "") {
            colorOptions.push(row[j]);
          }
        }
        break;    //exit the loop once the matching category is found
      }
    }
    //randomly assign one of the color attributes to the corresponding category
    outfit[category] = random(colorOptions);
  }
}

This was the main function that was utilized within the sketch. the function is in charge of generating a random color option for each article of clothing. I first created an array called categories, which had the names of each category of clothing, which corresponds to the same name within each row in the csv file. Following this is a triple nested loop. The first loop loops through the categories array. and then creates an empty array called colorOptions, which would store the color options for each category.  The second loop loops through each row of the csv file. If the first string of the row matches with the same category in the categories array, an array: row, would be created, which would store each of the color options found within that row in the csv file, without the first item, which is the category. Then the third loop loops through the length of the row, if there is a string available, we push the item within the array to the coloOptions array. We exit the third loop once  the category is finished. Once all the categories are done, a random color option is chosen, and applied to the category of clothing.

Future Improvements:

As this is intended to be a tool, I hope to further improve this project through photos of the actual items I own, in order to visualize what the items would look like together. I would also want to add a toggle switch for each article of clothing, so I could for example, choose whether I want to wear a hat or jacket or not.

Concept

My inspiration for this weeks project was my love for music. I often spend a lot of time listening to music daily so after a hard time trying to figure out what data I could represent it popped in my mind that I could easily rank my top artists and their number of streams. I was also fascinated by how one can represent any random data in visually appealing way rather than the boring graphs and charts that are usually used. This made me eager to try and represent the music data in a way that is desirable and fun.

Code

Hover above the bubbles to find your popular artist and their number of streams.

Code Highlight

// Set color from red to blue based on position in the sorted array
    this.color = lerpColor(
      color(255, 0, 0, 150),
      color(0, 0, 255, 150),
      index / total
    ); // Gradient from red to blue

I was really proud of how I was able to make my project look more appealing. I had the idea of mixing colours in a pattern that can show the rankings but I did not know how I could do it. After doing some research I came across the lerpColor function which basically enables you to smoothly blend two colors based on some factor. I used it to transition from blue to red with index/total determining the blend. The artists with higher streams appear more red and those with lower are blue.

Reflections/Future improvements
I am proud of what I was able to come up with and how I was able to represent data in p5. Working on this was really useful in helping me understand how to load data and read files using p5. It also exposed me to how powerful p5 can be. For the future I would really love to include music in the work. It would be fun to have each artists best song play when the user clicks to check their data. Other than that I am impressed and proud at my progress.

Norman’s article was a great read, and he definitely captured my attention by being so frustrated over “Norman Doors,” which is something I only started to relate to once I got onto campus here. The automated doors in C2 were not automated at all just last year, despite its big bold yellow and black efforts to flex its automation. Further into last school year, it began to actually automate, and so did D2’s. Only, D2’s doors are so poorly designed that I end up using all of my strength to fight with the door’s pressure, and at times, the door would be open and would close on me as I’m walking through it. Don’t underestimate how strong that thing is!!

These automated doors lack discoverability, where they have such slow and random responses to your actions that it ends up overcomplicating such a simple concept. The doors won’t start to open until you’ve been standing there awkwardly for 5 seconds, and once you start to reach out your arm to manually open the door, that’s when it suddenly decides to get moving. It could be improved by having a faster response rate, and by actually opening when someone “waves to open.” Just like Norman’s story about his friend with the swinging doors, the doors’ discoverability failed and was unnecessarily complex. This, as Norman mentioned, applies to a lot of modern day technology that has too many functions and controls for you to remember, and they’re usually meant as advertisement to show off that this one device can do this many things… even if some of those functions are never played out even once. This reminds me a lot of the piece we read last week on interactivity, where companies slap on “interactive” onto their products to grab customer attention. Similar concept applies here with all of these supposedly everyday friendly machines’ different functions.

Something that drives me crazy is the elevator in A2C. One of the elevators is “locked” for maintenance to go down to the basement, but NYUAD students can still use it if they swipe their card. However, I’ve fallen victim to many cases of elevator confusion. I swipe my card, the elevator goes from B2 to 2 (ground floor for dorms), and I walk in, only for the elevator to go back down to B2. Then, some maintenance people click on 2. Rather than stopping at 2 for maintenance, it suddenly decides to follow my choice to go up to the seventh floor, now inconveniencing the worker. Something so simple ends up being extremely frustrating, and it becomes all the more nerve wracking when it becomes the determining factor over whether you’ll be late or on time to a class or a meeting. It could be improved with some signifiers that indicates floor priority so both parties can know what’s coming ahead. There should also be better signifiers on swiping your card to unlock the elevator, since some buildings have a poster while others don’t. I didn’t know I could do that until well into my first semester of Freshman year. Feedback would also be helpful, where some visual (colors) or auditory feedback could be given to indicate where the elevator is properly responding to your swipe, or if it will just ignore you. The whole problem could also be resolved by adding more elevators!

Norman’s principles of design can be applied to Interactive Media by making the designs of our project discoverable and accessible. In order to achieve this, we should follow human-centered-design, an approach that prioritizes human needs, capabilities, and behavior first, then is designed to match and accommodate those needs, capabilities, and ways of behaving. With strong understandings of psychology and technology as well as good machine to person communication, it would be easier to create an actual good design that performs well when it’s functioning as it should, but also knows how to perform well when it faces inevitable problems and issues. But while doing this for Interactive Media, it’s important to create a balance between the design navigation, the simplicity of how the project actually functions, and the aesthetics. Too much of one or all things can easily get very overwhelming for the user especially when it comes to IM projects that are supposed to be lighthearted and fun. By making designs simple and straightforward, with any affordances, signifiers, and/or feedback when necessary, it’ll be easier for the user to understand what to do and why they must do so. This focus on machine-user communication will makes things a lot more comprehensible

Concept:

Since January 2024, there has been over 50 school shootings in the US, with the four most recent ones being just two days before this post was made, all on September 21, 2024. The frequency of school shootings in the US is devastatingly overlooked, and I wanted to make a piece that could raise awareness on how insanely young a lot of these shooters are. “Know the Numbers” is a generative text output that randomizes statistics from a CSV file that consists of all school shootings in the US from 1990 until September 4, 2024. The link to the Washington Post’s CSV file can be found here. To view these shocking statistics, simply click anywhere on the canvas with your mouse.

Originally, I wanted to do a data visualization to emphasize the regions with the most shootings, but I realized that could easily be found with a quick Google search. Something that wasn’t as common was close up statistics of these shootings, which is what I wanted to do, but I didn’t know how to display it. I scrolled through other students’ works to get a feel of how they did this assignment, and Ahmad’s project looked like a good foundation for my idea, so I took inspiration from his work. I ended up creating this piece that emphasizes the age of these shooters. Some say unknown to keep up with the real statistics. There will also be some where the kills, injuries, and casualties are zero and the age of the shooter might even be unknown. These represent gunshots that went off in a school setting that fortunately didn’t harm anyone.

I wanted to add a dripping blood border to the top edge of the canvas to emphasize the gun violence. I tried to code some blood drips from this YouTube tutorial by Barney Codes, but it ended up being too difficult and it wasn’t static nor was it grouped together, so I decided to keep the poster simple.

The Piece:

Highlight:

The piece of code I’m proud of is ironically one that wasn’t much use to my piece. For the other sections (number of kills, number of casualties, etc) I managed to combine the CSV data with a message, for example, the CSV data on casualties is “16,” but I was able to add “there were” and “casualties” before and after the data was displayed. However, the age was the only one that didn’t work, and I couldn’t figure out the reason why, so on Google Sheets, I manually added “the shooter was #-years-old” in place of just the age, for over 400 rows of data. This way, I would’ve still been able to include context text with the statistic even though the code doesn’t work. I kept looking, and I eventually found out what I did wrong, which was a silly spelling mistake. So I’m proud of my patience and determination in showing these age numbers, otherwise, I would’ve just scrapped the ages. I’m also proud of myself for still trying to find out what was wrong so that I could learn from my mistake.

let numRows = shooting.getRowCount();
let age = shooting.getColumn('shooter_age');
let state = shooting.getColumn('state');
let year = shooting.getColumn('year')
let kills = shooting.getColumn('killed')
let injuries = shooting.getColumn('injured')
let casualties = shooting.getColumn('casualties')

print(age[statistic - 1]);
push();
textSize(53);
fill(233, 210, 18);
text(str(age[statistic - 1]), width/2, height/2 + 210);
pop();

Reflection/Future Improvements:

This project was eye-opening even for me. I already knew how terrible these statistics were, but as I was manually adding text to the ages, I saw the age of every shooter on that list. It was already devastating that the vast majority of shooters were young teens, but the most jaw-dropping were the single digit numbers. The youngest school shooter was just 6-years-old, which is absolutely insane to me. Not to mention, there were three 6-year-old shooters, not just one. I hope others will find this project as informative as I did, because I definitely learned a lot more from it. The project itself was relatively easy because it was text. I know that if I stuck with data visualization, it would’ve been a lot harder for me to complete.

For future improvements, I would like to somehow adjust the grammar to match the statistic. For example, if there’s one causality, it would say “there were one causalities” because it is a fixed text. I would also like to add the blood drip edge that I originally wanted. In general, I’d want to make it pop more so that people would know exactly what it’s about once they see it, without reading anything yet.

Reflection on The Design of Everyday Things, Chapter 1

As a kid, I would agree with the author and say the thing that drives me crazy is the glass doors, that are not at all seen at all, and I kept bumping into them, nearly injuring myself. Another design that is not settled with me is the design of the bed legs. In my room at home, I keep hitting my toe with the bed leg every time I cross the bed. I feel like they are placed too much in the corner, and it is inconvenient for people, since designers didn’t think about how the object would exist in the living space and would not cause any difficulties in passing near it. I think the way to improve is to move the bed legs a bit closer, so there would be more space between the edge of the bed and floor, so when the foot is placed somewhere near, it doesn’t clash with the bed leg. Another thing I don’t really understand is why menu’s do not have photos of the dishes, cause it makes people spend more time on choosing the meal, and I guess this problem is easier to solve by just adding real pictures. 

I think the way to introduce principles from the book to our IM projects and to the sphere fully is to create more signifiers, and consequently affordances in our designs. For me, right now my works mostly are appealing to my ideation and artistic thought, while they actually have to consider primarily communication between the user and the design. I think because of limits in my technical abilities, I am not able to consider the issues of affordable design for now. But the way to work on them in the future, is to introduce previews for the code, such as a small introduction about the project and what can you do with it, like lines “Press the key”. Moreover, I think to make the design more understandable for the user, is to create dynamic designs, which in some way will show how design works. And there are also simple things like buttons, keys, scales, that make design approachable. But, I agree with the author on a point that the more functions a design possesses and the more technological it gets, the more complex it becomes to maintain an affordable and easy flow design of a product.