Category: F2023 – Mang

Concept:
During class on Wednesday, one of the example datasets that was brought up in class was wind data as the professor played with the globe data visualization. When I saw the wind data, I immediately thought of drawing wind turbines that matched the wind speed data, and that’s what I ended up doing for this project.

Sketch:

While in the planning phase, I thought that this project would be just fun to look at and not a data-focused piece, but this had the unexpected result of being surprisingly insightful about wind speeds during the day. The wind is strongest during the day at about 14:00-17:00, and weakest around midnight to late morning.

Code: 
I was proud of my day/ night cycle code, as I thought it was clever. I drew a black box over the entire screen, and the opacity changes depending on the time of day so it is able to give off a feeling of ‘darkness’ during midnight hours, and it is fully transparent during the daytime.

// opacity of black screen over the screen to give illusion of day/night cycle
const darknessLevel = mapOfHourToDarkness[curHour - 1]
push()
fill(0, 0, 0, darknessLevel * 5)
square(0, 0, 400)
pop()

// complex math -- basically calculates the curSkyColor as an average of darkSky and brightSky, weighted towards darkSky based on the current darknessLevel
curSkyColor = p5.Vector.add(p5.Vector.mult(darkSkyColor, darknessLevel), p5.Vector.mult(brightSkyColor, 10 - darknessLevel)).div(10)

Improvements
There was more data in my .CSV file including wind direction, but I couldn’t think of a good way to implement but it would’ve been nice. I was also not able to find a free API for UAE wind data, and I had to manually scrape the data for a certain day. It would have been fun to be able to visualize the wind speeds of the current/previous day instead of being stuck on 27 Sept 2023.

This is the visualization of the data about the popularity of a set of popular songs in 2023. The red line stands for the number of times it was streamed, the green line stands for the number of Spotify playlists it was included, and the blue line stands for the number of Apple playlists it was included. I couldn’t find any WEBGL fonts, and it was almost impossible to detect which ball was clicked in WEBGL (at least for my Javascript abilities), so I couldn’t label the axis nor display information of the song when its representative ball was clicked.

The Design of Everyday Things, The Psychopathology of Everyday Things

While reading the text, so many real-life examples of me having trouble with the designs of the things came to my mind. Just taking the example of our campus, the heavy automatic doors in the entrance of the buildings, which open to one side only, or the design of the grass in front of the D2, which makes people bypass them instead of walking straight (although some people just step on the grass instead of bypassing it), or the lighting in the huge study rooms which turn off by itself if no movement is detected under some unlogically built detectors. By providing these examples, I am suggesting that I support the author’s position about the abundance of user-unfriendly everyday things. 

I would like to extend the author’s idea by claiming that the difficulty of understanding the design isn’t the only issue. The main issue is having a continuous uncomfortable experience while using the devices because of poor design. Once you understand how things work, it becomes easier to manage. However, if the thing is itself unfriendly, the difficulties with the utilization of the object continue. For instance, taking the same example of the study rooms, it might be hard in the beginning to understand how to open the door. For those who don’t know, the button on the wall (separated from the door) should be pressed in order to open the door. However, by doing the same thing over and over again, this aspect becomes like a habit so the people intuitively start pressing the button before opening the door. However, the issue of lamps turning off when the movement isn’t detected continues to make the uncomfortable experience in study rooms. Usually, the detectors of movements are placed at the entrance, so the lights will be turned on when the people enter. However, no one sits in front of the entrance door. Because of the lack of detectors on top of the chairs or putting them in random spots, the light turns off being unable to recognize that someone is really sitting in the room. This is the reason for terminating my presence in the study rooms. 

This reading really gave a feeling of satisfaction as if the author really raised the voice of all the users. As the author mentioned, the design of the objects should rely on common knowledge rather than logical explanations as people are the way they are, not the way the engineers expect them to be. Here raises the question of the range of the common knowledge. To what extent we can simplify things to common knowledge without sacrificing the functionality of things? For instance, is it better to have many functionalities in the washing machine with detailed instructions to them or is it better to limit the washing machine design to several buttons with the most obvious functions, so the instructions paper is not needed? 

Before delving into the first chapter of Chris Crawford’s “The Art of Interactive Design”, my understanding of “interaction” was rather straightforward—I saw it as any form of engagement that elicited a response. However, learning about Crawford’s comprehensive criteria,  which highlight the significance of cyclically reciprocal actions such as active listening, speaking, and thinking, has expanded my viewpoint. His idea allows for evaluation of the depth of interactivity in different mediums, which challenged my previous idea that something either is interactive or not.

Another idea that caught my attention was that interactivity is in fact subjective. This thought makes complete sense, as different users have different expectations, levels of interest, motivation and personal preferences. For instance, someone who prefers a more passive form of engagement and somebody who strikes for a more immersive experience will most likely not find something like the YouTube algorithm interactive on the same level. Another factor I considered after the reading is that interactivity can be staged; in other words, it is not difficult to make something appear interactive when, in fact, it is not. This issue arises for several reasons. First, there is often a false overuse of the term “interactive”, leading to a dilution of its meaning. This aligns with the misconception with which Crawford opens the first chapter, highlighting the need for a more precise understanding and definition of true interactivity. Second, there seems to be a common tendency to mistake participation and reaction as true interaction. While these elements are integral to many interactive experiences, they lack the deep, cyclically reciprocal engagement that Crawford’s definition of interactivity highlights.

An example that comes to mind is gamification, which involves applying game-like elements, such as points, badges, leaderboards, and rewards, to non-game activities to make them more engaging and interactive. Such strategy is often used in various apps, for example, educational applications such as Duolingo. Duolingo gained its popularity since it was perceived as highly interactive due to the visual feedback and competitive elements, but that is more or less only the surface of the application. Upon closer examination, one may realize that the core learning experience remains passive and one-directional, with limited opportunities for genuine engagement, discussion, or deep understanding of the subject matter.

Chris Crawford’s approach to redefining interactivity challenged my previous understanding. Before reading his work, I had simplistically viewed “interaction” as any engagement that elicited a response. However, Crawford’s detailed criteria, emphasizing cyclically reciprocal actions like active listening, speaking, and thinking, expanded my perspective. It dawned on me that interactivity is not solely objective; it also involves subjective assessments of its degree. This revelation prompted me to reconsider instances I’d deemed interactive but didn’t align with Crawford’s definition. This reevaluation applies to the concept of participation as well. My initial interpretation had primarily focused on the term “interact,” which, as I realized, is distinct from “interactivity” and represents two surprisingly different notions.

To illustrate this point, consider social media platforms. We often think of them as interactive because users can like, comment on, and share posts. However, these platforms are primarily built around interfaces for content presentation and interaction with other users. The core design is about presenting information rather than fostering deep interactivity. Another example is YouTube. While viewers can like, comment, and subscribe, the core design revolves around presenting videos and ads. It offers interaction elements, but they don’t necessarily facilitate the deep, cyclically reciprocal engagement that Crawford’s definition of interactivity suggests. So, interactive design can indeed transcend traditional interface design, encompassing a wide range of digital experiences that may appear interactive on the surface but don’t fully align with the rich criteria Crawford outlines for true interactivity.

I greatly enjoyed the discourse on interactivity versus reactivity, and as someone who’s been trying to read a lot recently, the description the author gives on why books are not interactive was enlightening. An interactive object has to “listen, think, and speak”, and when you think about it, many forms of entertainment center around the object “speaking” to us, be it a TV or a book.

For a piece to be a good interactive piece, it has to strike a good balance between the three as pointed out by the author, and “trading off” one component to prioritize the other two weakens the whole project’s interactivity as a whole. However, personally I feel that for an interactive piece, I disagree with the author in that it doesn’t need to fulfill all three components to be a successful piece. For example, Chris Milk’s “The Treachery of Sanctuary” may not be the most interactive piece from the “listening” perspective, but it does “think, and speak” well enough to compensate for the relatively few actions that a viewer can take, saying a lot even if it isn’t listening that much ( for example, the first two screens where it doesn’t really matter what the viewer is doing ).

A question I had was that I struggled to understand how an object would “think”. I understood it in the context of a conversation between two people, but I don’t really get it from the perspective of something like an art piece. In my opinion, the “think” part of an interactive object does not matter too much, and the most important parts is “listening” and then “speaking” back an appropriate reply, though “thinking” is likely needed to construct a good reply. Is the “thinking” for a piece then simply how the UI/robot/art constructs a reply to a user’s interaction with the piece?

The author’s humble introduction, where he admitted that none of us truly have a crystal-clear understanding of what interactivity is, immediately resonated with me. It’s a sentiment many of us can relate to – we often have a sense of what certain concepts mean, but articulating a precise definition can be difficult to find.

The idea of using the conversation between Fredegund and Gomer as an example to define interactivity was a pleasant surprise. It underscored the importance of key elements in any interactive exchange: listening, thinking, and speaking. It made me realize that without these components, a conversation can hardly be considered truly interactive; instead, it becomes a one-way process, lacking the depth and richness of true interaction.

The analogy of actors and a branch of a tree further clarified the concept. I’ve always believed that interactions are a two-way street, and when I engage with someone new, I often observe how they perceive the interactive process. Do they view it as a collaborative effort, like the intertwining branches of a tree, or is it merely a one-sided performance?

Prior to reading the article, I was uncertain about what qualified as interactive and what did not. The depiction of interactivity into different levels provided me with a valuable framework for understanding and categorizing interactive experiences.

However, it was the author’s explanation about the importance of listening that truly resonated with me. Each sentence in that section felt relatable. We’ve all encountered individuals who do not truly listen, and the negative vibe they emanate in such interactions is noticeable. Conversely, engaging with someone who not only listens but comprehends and engages with our thoughts is an immensely positive experience.

In conclusion, the article shed light on the multifaceted nature of interactivity and the crucial role of listening, thinking, and speaking in fostering meaningful interactions. It provided clarity on what constitutes true interactivity and offered a humorous take on subjective perspectives. Ultimately, it reminded me that genuine interactions are a delicate balance of engagement, empathy, and active participation.

Concept:

For this assignment, I wanted to portray train tracks. I don’t know what it is about trains, but I have been fond of them ever since I was a little girl.  I decided to combine the concept of OOP and arrays with my love for trains to create the piece. I used two classes to define the train cars and the tracks and used arrays to store the instances created. The speed of the trains is randomized to have a visually pleasing image of trains moving in different directions at different speeds.

When the mouse is clicked, the screen is paused for 1 second and then the trains start moving again. I also added another functionality so that when a key is pressed the day changes into night.

A highlight I’m proud of:

I am proud of the way I got to make the trains move in alternating directions by creating a variable that stores either 1 or -1 and depending on the value, the direction of motion is set.

move(direction) {

  if(direction == 1){
      this.x = this.x + this.xspeed * this.xdirection;
      this.y = this.y + this.yspeed * this.ydirection;
  }else{if(direction == -1){
          this.x = this.x - this.xspeed * this.xdirection;
          this.y = this.y + this.yspeed * this.ydirection;
  }
    
  }

Reflection and ideas for future work or improvements:

For future work, i would like to work on creatively coming up with more visually and aesthetically pleasing art works. I would also like to include more advanced interactivity elements within my artwork.

Reference:

setTimeout() functionality: https://www.w3schools.com/jsref/met_win_settimeout.asp

 

 

 

Generative City Artwork 

My concept: I was really inspired by the work “Patchwork City 65” by Marilyn Henrion (fig 1), which depicts the development of urbanization. The ever-growing urban landscape is a familiar phenomenon for the majority of us because the migration from rural areas to urban places has skyrocketed last 20 years, significantly affecting the demographics of the countries. In order to accommodate the citizens and the immigrants, the countries are building more and more civil constructions of different levels. I wanted to make a ‘timelapse’ kind of thing, presenting the growth of the urban landscape. 

Fig 1.“Patchwork City 65” by Marilyn Henrion

A highlight of the code I am proud of is the code for creating one building at a time and moving it randomly by the X and Z axis in the specified range. Considering the fact that the box which is the 3D object is initially positioned in the center of the canvas and the specific dimensions cannot be given directly for them, I was struggling to move the boxes. Every new box was created at the same point. Because of this, I tried to implement the translation learned in class and the movement has created. 

function draw() {
  orbitControl();

//setting the limits of the range the buildings can be created on the X and Z axis. 
  let randomX = random(-60, 60);
  let randomZ = random(-50, 50);

// creating one building at a time and moving it randomly by the X and Z axis. 
  for (let i=0; i<1; i++){
   translate(randomX, 0, randomZ);
    buildings[i] = new Building(); 
    buildings[i].show();
  }
}

Embedded sketch 

FINAL WORK

Reflection and ideas for future work or improvements: I was trying to make the city develop in a parabolic function so that the highest buildings would be constructed in the center, giving a nice image of the city. However, the parabolic function worked oppositely, meaning that the vertex became the lowest point in the center. So all the high buildings were created from two sides with the low buildings in the center of the canvas. The example of the sketch is attached below. Although I tried to make the function inversely proportional by dividing one by the parabolic function, the outcome wasn’t successful either because the extreme heights in the center were ruining the overall image. Hence, I would like to try to work with the giving the limits on the outcomes of the functions more to achieve the initial idea. 

FAILED ATTEMPT (THE PREVIOUS SKETCH IS FINAL, NOT THIS)

What exactly is interactivity? This is a question that I asked myself when I first decided to pursue Interactive media as a minor. At one point, I thought that interactivity is anything that is dynamic, then I learned that interactivity doesn’t necessarily mean dynamic. It took me some time to realize that interactivity is a complex definition that is commonly misunderstood. 

Taking the Mona Lisa as an example, I have always thought that the Mona Lisa is an interactive painting, inviting people to go around trying to see her eyes moving, but now that I think of it, it shouldn’t be considered an interactive painting, in fact the example of the tree branch the author gave is very similar to the example of the Mona Lisa, it constitutes a reaction not an interaction. I now realize that I have confused the concept of reactivity and interactivity most of my life.

The author invites readers to consider the following question: Is interactivity subjective? I believe that to some extent you can argue that interactivity is indeed subjective, depending on the quality of both the processing power that generates the action, and the response action itself. However, I believe that there is a limit to what we can call interactive. If there is no processing power and action whatsoever, like the example of the rock then this cannot be labeled as an interactive object. After thinking this through for quite some time, I realized that I agree with the author that interactivity can and should be scaled to levels to be able to compare different types of interactivity.

I was intrigued by the argument the author raised of whether a book is considered interactive or just reactive. I asked myself what I consider a book is. I guess you can say that I have never actually thought that books are interactive. I have always thought that a book is subjective, no two people can or will interpret it the same way. No matter how detailed a book is, it leaves some room for each person’s imagination to fill, but that does not mean that it is interactive, I would say that it is just a matter of different reactions and not different answers as the author puts it.

Lastly, the example of the movie given in the reading reminds me of a movie I watched, or putting it in a more accurate way, I experienced, a while back. The movie is Black Mirror: Bandersnatch on Netflix. Throughout the movie, Netflix pauses and asks you which decision you want the main character to make and depending on what you choose, you go through a different track of the movie. The decisions range from “should the main character take this job” to “should the main character kill this person”. It is reported that there are 5 main endings to the movie but there are trillions of different tracks you can follow in the movie making each experience unique. I believe that this “movie” makes the argument that movies are not interactive stronger. I would rank this movie high on the interactivity scale because it offers endless answers and invites users to keep trying over and over to see how many different endings they could reach.