Category: F2023 – Mang

Reading this article, what I picked up was this: “it took computer scientists a few decades to figure this out, but now you get to play around with it too.” At the beginning, the author states how computer vision used to be a domain exclusive to specialists, such as the military or law-enforcement. Then at the end, there’s the appendix with the sample processing code that even “novice programmers” could use to kick-start a computer vision project “in as little as an afternoon”. This is grounds for celebration because, by lowering the barrier to entry here, we have democratized the technologist community by a notch, and that opens up the scope for so much creativity that would not have such a limitless medium of expression otherwise. The article seems a little old, and newer technologies have entered the space since its time of writing, including as Google’s Teachable machine. It is fascinating how I can now train a ML model and make something like *Cheese* by Christian Möller (2003) in a few hours using Teachable, whereas Möller’s piece was a product of the joint effort of the artist and a whole research laboratory.

Another aspect of computer vision that made me think was the hand of humans, and all of our humane subjectivities, in the development of these algorithms. The author mentions that a computer processes a video stream differently than text, in that there are no principles for semiotic interpretation in place, and so computers need to be programmed to answer even the most rudimentary questions about the images it “sees”. Then, the algorithms are susceptible to absorbing the same implicit biases as their creators. For example, whether a computer thinks it’s looking at a “woman in traditional clothes” or “an exotic foreigner” will depend largely on how the programmers perceive the woman. Biases in AI and computer vision are now a popular topic in contemporary tech discourse, but I wonder how these concerns have evolved over the years, since the inception of computer vision in the 70s until now. Have programmers always been wary of negatively influencing their softwares, or are these 21st century fears? What can technologists do to ameliorate them?

Computer Vision for Artists and Designers was a fascinating read about the topic of Computer Vision, a concept that is constantly gaining more traction in our world, but that is not understood as much as it should be. Personally, I was already aware of the concept, but not deeply enough as the reading presented, especially when it comes to its history and evolution throughout the years. The examples provided were also amusing, especially the ones that were more focused on people, such as the “Suicide Box” by the Bureau of Inverse Technology and “Cheese” from Christian Möller. What is interesting to me is that computer vision can be used both for purely artistic reasons and for social reasons. For instance, Suicide Box creates several discussions about the ethics of utilizing suicide as an experiment, such as the implications of recording people taking their own lives while doing nothing to prevent it. Or with “Cheese”, an installation that tracks people’s smiles, and plays an alarm when the display of happiness falls below a certain threshold. To some, this could be just a silly experiment, but when you think about it, corporations could absolutely enforce some sort of similar system to their employees, displaying the powers that such a technology can offer in our society.

Additionally, it was also interesting to read about the technological advancements of computer vision in physical optimizations and in multimedia authoring tools. With the examples provided, such as the technique of retroreflective marking materials used for safety uniforms and the “Limbotime” game, it made it much easier to comprehend the practical uses of these methods, which motivated me to know more about them.

Concept:

I really like Caramel, the cat who lives at NYUAD’s campus. I think that being an NYUAD student is more enjoyable because of the chance to spend time with the campus cats. I’m a graphic designer, and I wanted to draw a picture of Caramel because it’s a lot of fun for me. I’m also interested in coding, and I want to use my coding skills to make my projects better and learn more about coding.

I got inspired to make a game called “Catsaway,” where Caramel can fly around our campus without bumping into the pointy palm tree corners. In “Catsaway,” Caramel can smoothly float through the soft, green palm leaves. All you have to do is press the spacebar to help Caramel enjoy a fun journey through the skies above our campus.

Sketches:

Why I am excited for CatsAway:

Cats Away can be helpful for CAMPUS KIDS to play:

In the reading “Computer Vision for Artists and Designers,” Levin introduces the computer vision, algorithms for implementation, and its creative potential. I particularly liked the project examples he provided to illustrate how computer vision can be applied in real-world scenarios; they were all so interesting to read about. One project, “Suicide Box,” stood out to me because it aims to address a social issue and privide an evidence, not just for entertainment (which was a bit different from what I was expecting from interactive projects). This project inspired me to consider how technology can be a tool for raising awareness and gathering evidence on important social issues through creative projects. It expanded my thinking on the project ideas I could work on in future assignments, emphasizing that the purpose and meaning behind our work is essential consideration, and it can be one that delivers an important message of social impact.

I agree with Levin’s idea for the reliability of computer vision and its ongoing development. He mentions the challenge that computer vision is “opaque,” meaning it requires explicit programming to distinguish objects based on factors like contrast, color, motion, and brightness. This emphasizes the need for continued efforts to enhance accuracy in machine vision. The reading also made me reflect on the limitations of current AI-generated visuals, which often lack accuracy. For example, chatGPT is quite good at solving math problems and writing essays/texts. However, if we ask it to provide us with code for an aesthetic image, the result would be just a few lines of different colors on the canvas. Of course, it needs more details to design something like that, but my idea is that AI still lacks the ability to recognize images and generate various types of images accurately. Not only chatGPT, also other image generating AI often generate logically wrong images. It raised the question of how working on machine vision and using it to improve AI-generated visuals could be a promising avenue for advancing computer development.

When I thought about text, I naturally pictured something with many writings. I felt like the continuous popping up of texts seem very similar to overthinking and graffiti. I decided to link these two concepts (overthinking and graffiti) and create a design that shows how continuous thinking of positives and negatives end up blurring what was originally there, just like a wall covered with graffitis.

Below is my work. The intention was to show how different thoughts, both negative and positive, fill up our mind so quickly. I wanted to deliver the message that at some point, we just have to stop thinking and turn off our minds. To show that, I make the screen black and show “stop overthinking” after a certain number of counts.

The code I want to highlight is where I use even and odd numbers to decide the colour of the text I’m displaying. Of course, it’s not something fancy, but it’s just a way I used to make deciding colours more simple. For this, I just had to make sure that positive and negative words are in order in my array.

while (i < 6) {
      if (i % 2 == 0)
         fill(0, 102, 153);
      else
        fill(205, 92, 92);
      text(messages[i], random(-10, 600), random(125, 600));
      i = i + 1;
}

 

The reading, from the very start, drew me in with the example of the door. C2 of our campus has 2 doors on the sides (not the automatic doors in the very center) and I remember a friend who always pushed the wrong side of the door and so “nothing happened.” As a side note, she never figured it out (and rather gave up on using the doors) until she graduated last term.

It was interesting that design can have effect on people’s daily lives because I actually always thought designs are affected by human thoughts and behaviours. Looking at art and design as a way of showcasing how people think, I considered them as a one way thing, where people give inspiration to designs. For me, it was a very new way think that design has impact on people, and people give (or should give) feedback- impacting the design- and the (new) design impacting people, and on and on.

It does throw a question, however, in terms of how the feedbacks would be collected. I think normal users of designs still mostly focus on the aesthetics of designs more than the easy utility of it. (For instance, if something’s beautiful, we tend to think that its job is done as it is, even when it can be easier to use, or more effective serving its purpose.) So, I think the first step to being able to effectively gather feedback and provide some sort of guideline to designers would be the recognition of necessary standards of designs.

For this assignment, I drew inspiration from a previous project where text elements orbited around a central point. I aimed to create an illustration resembling a solar system, complete with data on the distance and mass of each planet. My goal was to have the planets rotate around the sun at controlled speeds. However, I encountered challenges that proved to be more complex than I initially anticipated.

I successfully implemented a data view in the console section, but I faced difficulty in displaying the data directly within the visual output. My primary areas for improvement include finding a solution to display data in the visual output and refining the motion of the objects to accurately simulate the planetary orbits. And the part of the code I am particularly proud of is given below. This is something I learned newly by doing this project.

console.log(`Name: ${name}, Mass: ${mass}`);

 

I appreciated the way the author narrowed down the essential characteristics of good design to discoverability and understanding. While these are undoubtedly crucial, there are many other vital characteristics to consider, such as a clear purpose, simplicity, balance, consistency, clarity, and efficiency, among others.

When the author addressed complex designs and emphasized the quality of interaction, I wholeheartedly agreed. I believe that simplicity and complexity both have their beauty. A device or design that offers complexity can be just as captivating as a simple one because the process of discovering and learning its potential is a unique form of beauty. Each new revelation makes the user perceive the device as outstanding.

Reading about the challenges stemming from the lack of human-machine interaction highlighted the gravity of this problem. It underscored the importance of addressing these issues in design. Yes its a crucial concept in design, but the author made us understand the impacts it could create by giving examples. 

The concept of Human-Centered Design (HCD) fascinated me when the author emphasized the need for designers to focus on potential errors during the design process. I believe this is a critical consideration that every designer should keep in mind because it significantly impacts the end-user experience.

This reading had one quote that extremely stood out to me and it was as follows “It is the duty of machines and those who design them to understand people. It is not our duty to understand the arbitrary, meaningless dictates of machines”, I have to admit I used to be one of those people the author describes in the reading that think that design is pretty straightforward and is pretty much based on logical decisions. I didn’t think that there is a human behavioral aspect to it. But it makes sense that designers should be able to understand human behaviors to tailor their products to be most comfortable for users, and not the other way around.

I must say, I had my fair share of frustration using laundry machines here on campus, each machine has a different set of features and It’s really hard for me to memorize every single functionality so I tend to choose a random setting each time. The amount of times I’ve thought to myself if only I was smarter to interpret what the signs mean without having to google the manual every time I’m doing laundry are countless. Therefore, Laundry days are almost always so emotionally overwhelming for me and so dreadful. The laundry machines are only one example of complex machines that tend to make me blame myself for being stupid and not competent enough, that’s why I resonate so much with what the author is saying that designers must understand that design is not just about delivering a working product but also about understanding how easy/hard this product will be for the general public and not to fellow engineers/specialized personnel.

However I cannot deny that multiple questions pop up in my mind about the feasibility of intertwining technology and psychology together for enhanced design. I wonder how combining both fields would affect each other. What sorts of compromises have to be made for Human Centered Design to take place? I know that it’s not about choosing one or the other but rather about integrating behavioral sciences within design, but without doubt there will be consequences. How can designers work on simplifying individual complex functionalities without affecting their overall product functionality, because I believe that having to come up with something logical is easier and more straightforward than having to think about all aspects of the human brain and decision making while designing a product that meets certain criteria. I often think that designers are bound by the rules and criteria set to them to make their product as efficient as possible on a budget, so it makes me wonder how taking human centered design into consideration affects all that.

The concept:

For this project I decided early on that I wanted to do something related to Formula 1 racing, because I have been so interested in racing and race cars since I was very young. I went on Kaggle.com and found so many F1 datasets. I couldn’t decide what to do with them though. I initially wanted to do a visualization of the lap times over time (1950-2023), but the trends weren’t very interesting so I decided to focus on where the drivers are from instead. The whole concept of my project is to show you a visual representation of the countries F1 drivers are from. When you first run my program, you get a screen of two F1 cars racing towards the finish line, each round they have varying speeds though. When you click on the screen, you see the main screen where a map is displayed with red pins on the countries where F1 drivers are from. When you hover over a pin, it displays the country name and the total number of drivers who have raced in F1 from this country over the years. 

A highlight I’m proud of:

One thing I am really proud of is how I got the pins to work in a way so that when they are hovered, the stats are shown above. I used OOP to define the stats class which displays both the pin on the country (I had to create a csv file with the exact locations manually though) and the text displayed when the pin is hovered over. 

class stats { //pins placed on the countries' location and stats displayed
  constructor(countryCode, x, y, countryCount) {
    this.countryCode = countryCode;
    this.x = x;
    this.y = y;
    this.diameter = 3; // Initial circle diameter
    this.isHovered = false; //boolean variable to know whether the pin is hovered or not
    this.hoveredDiameter = 20;//diameter of the circle when hovered on
    this.countryCount = countryCount;
  }

  display() {
    noStroke();
    fill(255, 0, 0);
    ellipse(this.x, this.y, this.isHovered ? this.hoveredDiameter : this.diameter); // Adjust size when hovered accordingly
    
    if (this.isHovered) {//display the stats above when pin is hovered
      fill(220);
      textSize(22);
      textAlign(CENTER, CENTER);
      text(str(this.countryCount), width - 70 , 15);
      text(str(this.countryCode),width/2 - 50 , 15)

    }
    
  } 
  
  checkMouseHover() {
    // Calculate the distance between mouse and pin center
    let distance = dist(mouseX, mouseY, this.x, this.y);

    // Check if the mouse is within 2 pts of the pin 
    this.isHovered = distance < (this.diameter / 2) + 2;
  }
   
}

 

Reflection and ideas for future work or improvements:

I really enjoyed working on this project because it allowed me to explore new concepts and challenge myself to make it as close to what I had in mind as possible. One thing I really wanted to do though, but I couldn’t get the hang of was to create a smooth transition between the opening screen and the main screen. What I had in mind was to code it so that it would show the opening screen first and when the cars cross the finish line, there would be confetti all over the screen and transition into the main screen, where users can hover over the pins and display the country stats. This is the one extra thing I would’ve loved to include in my code. 

References:

Car and Map clipart: https://www.clipartmax.com/