Reading Response 7

The article “Physical Computing’s Greatest Hits (and misses)” offers an exploration of various classes of physical computing projects and the dynamics between implementation and engagement. The concept of “Meditation Helpers” caught my attention as someone interested in cognitive psychology and mindfulness. While these devices aim to guide users into a meditative state by measuring physiological indicators like heart rate and breath rate or stress through measuring sweat gland activity, I wonder about their effectiveness. Can technology truly facilitate mindfulness, or does it risk reducing meditation to a quantifiable metric? The reading prompted me to consider the role of technology in spiritual practices and whether it enhances or detracts from the essence of meditation. Another example that I found to be very innovative was Younghyun Chung’s “Digital Wheel Art”. I have always raised the question of accessibility in interactive installations. However, his project demonstrates that by utilizing technology to track and interpret bodily movements, individuals who may have limited mobility or dexterity can also engage in interactive experiences with greater ease and independence. Thus, physical computing can be leveraged to create inclusive and accessible solutions for individuals with disabilities. Another example of this is Sign Language gloves, which attempt to convert the motions of sign language into written or spoken words, which can help people who are deaf or hard of hearing to communicate easier with a hearing person.

Furthermore, the article prompted me to reconsider the essence of interactive art and its intrinsic connection to human emotions and experiences. The idea that interactive art should evoke feelings and thoughts rather than merely showcase technological prowess struck a chord with me. It reminded me that the true essence of art lies in its ability to stir emotions and provoke introspection, fostering a collaborative relationship between the artist and the audience. Overall, the article sparked a renewed curiosity in exploring the delicate balance between technical innovation and human connection in interactive art.

 

The article “Making Interactive Art” resonated with me deeply, particularly its emphasis on allowing the audience to interpret and engage with the work independently. It reminded me of my own experiences with interactive art installations, where the most impactful moments occurred when I was given the freedom to explore and interact without being told what to think or do. Like I mentioned earlier, art is truly interactive when there is open conversation between the artist and the viewer. In simple terms: show, don’t tell.

I appreciated the comparison the author drew between designing interactive art and directing actors in a performance. It highlighted the importance of providing the audience with tools and cues to guide their interaction while allowing room for individual interpretation and discovery. However, I found myself questioning whether there might be instances where some level of guidance or interpretation could enhance the audience’s experience without detracting from their autonomy. For example, some modern artworks look like random nonsense to me before I’m told the hidden meaning. 

Week 10: Pulse Beat

For this assignment, I wanted to recreate the human pulse / heartbeat. The blinking of the LEDs represents the ‘lub-dub’ sound of our heartbeat and the sound of the piezo buzzer represents our heart rate or pulse. When the button is pressed, the LEDs blink in a pattern synchronized with the buzzer. The potentiometer enables users to adjust the speed of the blinking pattern and the pitch of a piezo buzzer. So turning up the potentiometer symbolizes increasing the heart rate.

Video:

Schematic Diagram:

Arduino Code:

const int buttonPin = A2;          
const int potentiometerPin = A0;   
const int buzzerPin = 12;          
const int ledPin1 = 7;   //red         
const int ledPin2 = 8;   //green         

int buttonState = LOW; //digital input
int potValue = 0;  //analog input
int blinkSpeed = 500; //LED blink speed

void setup() {
  pinMode(buttonPin, INPUT);
  pinMode(buzzerPin, OUTPUT);
  pinMode(ledPin1, OUTPUT);
  pinMode(ledPin2, OUTPUT);
}

void loop() {
  // Read the value of the potentiometer and map it to blink speed range (100-1000 ms)
  potValue = analogRead(potentiometerPin);
  blinkSpeed = map(potValue, 0, 1023, 100, 1000);

  buttonState = digitalRead(buttonPin);
  if (buttonState == HIGH) {  //button pressed
    blinkPattern();
    // Play a tone with frequency based on blink speed
    int buzzerFrequency = map(blinkSpeed, 100, 1000, 500, 1500);
    tone(buzzerPin, buzzerFrequency);
    delay(50);  // Buzz for 100 milliseconds
    noTone(buzzerPin);  // Turn off the buzzer
  } else { //button released
    digitalWrite(ledPin1, LOW);
    digitalWrite(ledPin2, LOW);
    noTone(buzzerPin);
  }
}

void blinkPattern() {
  digitalWrite(ledPin1, HIGH);
  delay(blinkSpeed);
  digitalWrite(ledPin1, LOW);
  digitalWrite(ledPin2, HIGH);
  delay(blinkSpeed);
  digitalWrite(ledPin2, LOW);
}

Overall, I am happy with the outcome. I was relieved to see it finally work because I was trying everything (debugging, restarting circuit, etc.) for 4 hours before I realized my 5V wasn’t connected in properly.

I further want to create more audio-visual displays using LEDs and the piezo buzzer.

Week 9: Chin Up (Unusual switch)

For this assignment, I wanted to create an unusual switch that didn’t use my arms or legs. I thought about different body parts and the next best part for me was my chin. I was then thinking of different conductors to complete the circuit and while I was eating at Indian By Nature, I realized I could use the aluminum foil.

The rest of the circuit was straightforward to create. The switch is created by having two pieces of paper that pop up from each other, to which I stuck some aluminum foil on either side, under which each jumper wire is inserted.

Video:

 

Overall, I am happy with the outcome. It’s nice to see the LED light up after being uncertain if it was going to work or not. Whenever I was struggling in between to get things to stay in place and work, all I had to say to myself was chin up!:)

I would like to further improve my project by adding different “pedals” for different body parts and connect them to separate LEDs.

Reading Response 6

Don Norman’s exploration of the relationship between emotion and design in “Emotion & Design: Attractive things work better” offers intriguing insights into the intersection of aesthetics and usability in human-centered design. One aspect that resonates with me is Norman’s argument that attractive design not only enhances the visual appeal of products but also influences users’ emotional responses and overall experience. I’ve personally found myself drawn to products or interfaces that exhibit visually pleasing aesthetics, whether it’s the sleek design of a smartphone or the intuitive layout of a website. Attractive design has the power to foster a deeper connection between users and technology.

However, often overly complex or ornate designs detract from usability rather than enhancing it. It’s personally why I prefer Samsung products over Apple (controversial opinion I know). Additionally, Norman’s emphasis on the emotional impact of design raises questions about the role of cultural or social differences in shaping users’ aesthetic preferences. For older people or people not familiar with technology in general, they prefer simplicity and usability over aesthetic. For children, what we call “modern and chic” design, to them it’s boring and not aesthetic.  Overall, the article prompts me to reconsider the importance of balancing form and function in design and to prioritize user-centric approaches that prioritize both practicality and emotional engagement.

 

Margaret Hamilton’s story in “Her Code Got Humans on the Moon” resonates deeply, serving as a poignant reminder of the pioneering spirit and resilience of women in STEM fields. Her groundbreaking contributions to the Apollo space program not only shattered gender norms but also redefined the boundaries of what was achievable in the realm of technology. Hamilton’s ability to navigate the challenges of being a working mother in the 1960s while spearheading revolutionary advancements in software engineering is nothing short of inspiring to me. Her determination to challenge societal norms and carve out her place in a predominantly male-dominated field resonates profoundly with my own experiences of striving to be valued in a field like computer science.

The reading thus prompted me to reflect on the persistent gender disparities that continue to plague the tech industry today. There is also reluctance to acknowledge the contributions of women in STEM. It’s common for women’s credit being overshadowed by men such as in the case of Rosalind Franklin or Ada Lovelace. Similarly, people only remember Neil Armstrong and Buzz Aldrin, but rarely Hamilton’s pivotal role in making the mission even possible. As I reflect on her journey, I am reminded of the importance of forging ahead despite the barriers we face, and striving to leave my own mark on the ever-evolving landscape of technology.

Midterm Project: Catch ’em

Game:

Link to fullscreen: https://editor.p5js.org/aneekap/full/En7_lTESA

Overall Concept of the Project:
CATCH ‘EM is a catching game with two levels but with a twist. Inspired by two of my favorite shows, Demon Slayer and Avatar: The Last Airbender, in this game, the player needs to catch the “good guys” and avoid the “bad guy” to survive. Elements fall from the top of the screen randomly, and the player controls a basket at the bottom to catch the falling elements. The goal is to accumulate points by catching enough good guys before the timer runs out. The game incorporates changing themes and increasing difficulty as the player progresses. Additionally, power-ups appear occasionally, providing the player with special abilities such as temporary immunity to the villain.

Working :
The game utilizes OOP to create subclasses of the Element class with varying features. The game grid is defined by invisible tiles, allowing precise positioning of falling elements. Elements move vertically in tile increments, and collision detection occurs when their coordinates align with the basket’s position, triggering consequences. The game employs frame-based updates to control element speeds. Levels are managed through conditional checks on scores. The player controls a basket moves horizontally using left and right arrow keys to catch the elements.

More specifically, the game operates within a structured grid system defined by the number of rows and columns. Each element, whether it be a hero, villain, or power-up, is represented by an object that inherits from the Element class. These objects are initialized with random starting positions along the columns of the grid. The update method of the Element class ensures a downward motion, simulating the falling effect. The catch method detects whether an element is caught by the player’s basket.

The code I wanted to highlight is how the gameplay works for each level. I used arrays for the different classes to create the elements at each level and used framecount to control the number of elements on the screen to avoid overcrowding.

display() {
    if (SCORE >= 3 && SLIDE == 2) {
      SCORE = 0;
      this.villains = [];
      this.powerups = [];
      this.heroes1 = [];
      SLIDE = 3;
      TIMESTART = millis();
    }

    if (SLIDE == 3) {
      image(inst2, 0, 0, width, height);
    }

    if (SCORE >= 5 && SLIDE == 4) {
      SCORE = 0;
      this.villains = [];
      this.powerups = [];
      this.heroes2 = [];
      SLIDE = 5;
    }

    if (SLIDE == 5) {
      WIN = true;
      this.Play = false;
    }

    // LEVEL 1
    if (SLIDE == 2) {
      image(bg1, 0, 0, this.w, this.h);

      if (frameCount % 3 == 0) {
        this.heroes1.push(new Heroes1());
      }
      for (let hero of this.heroes1) {
        hero.display();
        if (hero.y >= height + 40) {
          // Removes character once it exits the screen
          this.heroes1.splice(this.heroes1.indexOf(hero), 1);
        }
      }
      if (frameCount % 5 == 0) {
        this.villains.push(new Villain(1));
      }
      for (let villain of this.villains) {
        villain.display();
        if (villain.y >= height + 40) {
          this.villains.splice(this.villains.indexOf(villain), 1);
        }
      }

      if (this.powerups.length < 2) {
        this.powerups.push(new PowerUp(1));
      }
      for (let powerup of this.powerups) {
        powerup.display();
        if (powerup.y >= height + 40) {
          this.powerups.splice(this.powerups.indexOf(powerup), 1);
        }
      }

      textSize(30);
      text("LEVEL 1", width / 2 - 60, 45);
      textSize(25);
      text("Aim: 3", width - 100, 80);
      textSize(25);
      text("SCORE: " + SCORE, width - 120, 45);

      let COUNTDOWN = 20 - (millis() - TIMESTART) / 1000;
      if (COUNTDOWN <= 0) {
        this.Play = false;
      }
      text("Time: " + floor(COUNTDOWN), 20, 45);

      this.basket.display();
      this.basket.update();
    }

    // LEVEL 2
    if (SLIDE == 4) {
      image(bg2, 0, 0, this.w, this.h);

      if (frameCount % 2 == 0) {
        this.heroes2.push(new Heroes2());
      }
      for (let hero of this.heroes2) {
        hero.display();
        if (hero.y >= height + 40) {
          this.heroes2.splice(this.heroes2.indexOf(hero), 1);
        }
      }

      if (frameCount % 4 == 0) {
        this.villains.push(new Villain(2));
      }
      for (let villain of this.villains) {
        villain.display();
        if (villain.y >= height + 40) {
          this.villains.splice(this.villains.indexOf(villain), 1);
        }
      }

      if (this.powerups.length < 2) {
        this.powerups.push(new PowerUp(2));
      }
      for (let powerup of this.powerups) {
        powerup.display();
        if (powerup.y >= height + 40) {
          this.powerups.splice(this.powerups.indexOf(powerup), 1);
        }
      }

      textSize(32);
      text("LEVEL 2", width / 2 - 75, 45);
      fill(0, 0, 0);
      textSize(30);
      text("Aim: 5", width - 100, 80);
      textSize(25);
      text("SCORE: " + SCORE, width - 120, 45);

      fill(255, 255, 255);
      let COUNTDOWN = 15 - (millis() - TIMESTART) / 1000;
      if (COUNTDOWN <= 0) {
        this.Play = false;
      }
      text("Time: " + floor(COUNTDOWN), 20, 45);

      this.basket.display();
      this.basket.update();
    }
  }

I took the graphics from the web and cropped them accordingly.

 

The background music was taken from YouTube and was taken from the Original Soundtrack of the shows.

Level 1: https://www.youtube.com/watch?v=HcvK20wWQDw

Level 2: https://www.youtube.com/watch?v=OqJec3–RXc

 

Challenges Faced and Areas for Improvement:
The hardest part was having an organized structure of classes and reducing redundancy by using inheritance wherever possible. The other challenge was having so many elements on the screen at once and ensuring it didn’t glitch by deleting elements correctly. I was also not able to make a full-screen mode since the images and tiles were getting stretched and did not work as well.
An area for improvement is ensuring that elements don’t overlap. Since elements are generated randomly, preventing them from overlapping proved difficult. I would also like to add more levels/modes.

Overall, I am happy with the outcome and it was a fun project to work on.

Reading Response 5: Computer Vision for Artists and Designers

This article provided a fascinating exploration of the evolution of computer vision technology and its integration into the realm of artistic expression. Among the showcased artworks, “Standards and Double Standards” by Rafael Lozano-Hemmer particularly intrigued me due to its metaphorical approach to incorporating computer vision. What captivates me about this piece is its ability to evoke complex narratives and reflections on societal dynamics through a seemingly simple and tangible interaction. The choice of belts and their rotation adds a layer of symbolism, raising questions about control, authority, and the implications of automated surveillance. 

This artwork also reminded me of an immersive installation I experienced on Lulu Island in January, “Pulse Island” by the same artist. It featured stations with PPG pulse sensors that detected the participant’s heart rate, surrounded by an array of over 4,000 Edison lightbulbs. Consequently, the lightbulbs around that area glimmer to the rhythm of the heartbeat as the speakers echo the heartbeat. As people add a new recording of their heartbeat, the oldest recording in the group is replaced, creating a Memento Mori. By capturing and recording this physiological data, it felt like the artwork was engaging in a subtle form of surveillance of the participants’ vital signs.

It is also important to look at the ethical considerations surrounding the use of computer vision. I was recently invited to an event with industry experts where we discussed ethical considerations of AI and it prompted me to reflect on the following. One primary ethical concern highlighted is the potential misuse or unintended consequences of technology originally designed for creative and benign purposes. The shift from artistic experimentation to potential mass surveillance raises questions about the responsibility of creators and the broader ethical framework within which these technologies operate. Another controversial issue in computer vision is bias and fairness. Surveillance Algorithms can exhibit biases based on the data they are trained on. This bias can lead to discriminatory outcomes, influencing areas such as hiring, law enforcement, and financial services. Moreover, there are several privacy concerns associated with surveillance technologies. The integration of computer vision in art installations blurs the boundaries between observation and intrusion. For example, I wasn’t aware that our heart rates were being stored in a database for a while before I participated in the installation.

Assignment 5: Midterm Progress

For my Midterm Project, I wanted to create a simple yet fun and interactive game that you could play on the go. I decided to create “Catch It!”, a catch game where elements fall from the top and the player needs to move the basket to avoid bombs and collect enough elements before the time ends to move onto the next level.


(Reference)

My game would consist of elements falling from the top of the screen randomly at different positions. There would be a basket present at the bottom which is controlled by left and right keys. Every element that is caught by the basket gives points to the user. However, if a bomb is falling, the user should move to another position and try to avoid it. There will be a time limit for every level. If the user gains enough points within the time limit, they move on to the next level. The difficulty increases with each level. The speed of falling elements will increase, the frequency of bombs will increase, and the time given will decrease. Furthermore, once in a while, a special power-up element will fall, which if you are able to catch will make you immune to 1 bomb. For each level, the player gets to choose a theme.

I implemented a prototype just to test the falling and collision detection, the most crucial parts of the game. The screen is divided into rows and columns forming tiles. The element would fall tile by tile down the screen from a random column and will either be caught by the basket or miss the basket and go out of the screen. Once the element goes off-screen, it respawns at the top.

Here is what my sketch looks like so far:

Reading Response 4: The Design of Everyday Things

Upon delving into “The Psychopathology of Everyday Things,” I found Don Norman’s exploration of design principles and challenges to be thought-provoking and relevant. The idea that technological advancements, while promising increased benefits, also introduce more complexities and challenges in usability, is a stark reality in today’s rapidly evolving tech landscape. This made me think of the evolution of smartphones, which our generation was the last to experience. Initially, phones were simple – calls, texts, and perhaps a basic camera (remembering my flip phone). However, we now have smartphones that can do almost everything but are accompanied by a myriad of complexities. Consider the addition of facial recognition, Bluetooth, and a multitude of applications on our smartphones. While these features enhance functionality, they often lead to confusion and frustration– such as the times I’m fumbling through settings and menus on my smartphone, realizing that the very advancements intended to make life easier can, at times, make it more challenging.

 

I believe that technology should enhance, not complicate, our lives. Thus I agree that as we embrace innovation, designers must prioritize user experience and human-centred design to ensure that technological progress truly benefits users. For example, the shift from traditional wired earphones to wireless counterparts provided a significant leap in user convenience. Wireless earphones, like Apple’s AirPods, offer users unparalleled freedom of movement and freedom from tangled cords. However, it introduced new challenges, such as using touch gestures, which might not always be intuitive. Moreover, since the two buds are not connected, it was very easy to misplace them.

To strike a balance between innovation and user-friendliness, designers should adopt a user-centric approach. Conducting extensive user testing and feedback sessions can provide invaluable insights into which features are genuinely beneficial and how users prefer to interact with them. Prioritizing essential functions and ensuring that they are easily accessible, perhaps through intuitive gestures or a clear menu hierarchy, may help prevent users from feeling inundated. For example, the ‘Find My AirPods’ feature was added to address the challenge of potential loss. Overall, achieving equilibrium involves understanding that not every technological advancement needs to be incorporated if it compromises usability.

Assignment 4: Cards For Humanity

For this assignment, I wanted to create a generative text output. I was thinking of games that play with words and phrases and I immediately thought of Cards Against Humanity. So I wanted to create a PG version that just uses playful humor and thus called it “Cards For Humanity”:)

The way my game is played is that the user first clicks on the deck of black cards and reads the prompt. Then, they will click on the deck of white cards and read the comical response. They can then click the button below to try multiple rounds. It is based on the party game below:
The part of my code that I want to highlight shows how I fit the varying text within the card. Since I didn’t want to limit the length of the text or the size of the font, I could only make the text fit by separating it into different lines. Words are added to the same line until it exceeds the max length.

function drawSelectedCard(x, y, cardText, isBlack) {
  fill(isBlack ? 0 : 255); //checks if card is from black deck and assigns color
  rect(x, y, cardWidth, cardHeight, 10);

  fill(isBlack ? 255 : 0); //text color opposite to card

  // Split the card text into lines to fit within the card
  let lines = splitLines(cardText, 70); //Maximum characters per line set to 70

  // Display each line of text within the card
  for (let i = 0; i < lines.length; i++) {
    text(lines[i], x + cardWidth / 2, y + cardHeight / 2 - (lines.length - 1) * 10 + i * 20); //vertical centering
  }
}

function splitLines(text, maxLength) {
  let words = text.split(' '); //split text into array of words
  let lines = [];
  let currentLine = '';

  for (let i = 0; i < words.length; i++) {
    if (textWidth(currentLine + words[i]) <= maxLength) { //checks if adding the current word to the current line exceeds the maximum length
      currentLine += words[i] + ' '; }
    else {
      //if the max length is exceeded, push the current line to the array and start a new line
      lines.push(currentLine);
      currentLine = words[i] + ' ';
    }
  }

  lines.push(currentLine); //push the last line to the array
  return lines; 
}

Overall, I am happy with the output. I would like to work further on this by adding more amusing prompts and responses. I would also like to improve the game by letting the user choose the best response from their set of already-selected white cards, like the actual game. Lastly, I could organize my code better by using OOP and making the cards objects.

Reading response 2: The Art of Interactive Design

Even though we are studying “Interactive Media”, I didn’t ponder much about how interactivity should be defined until I read this article. Crawford’s definition, framing it as a cyclic process where two actors alternately listen, think, and speak, seemed interesting but not all-encompassing. His skepticism about labeling everything as interactive, especially in the context of books or movies, got me thinking. It nudged me to consider a spectrum of interactivity rather than a black-and-white definition.

Low interactivity, for me, could be akin to interacting with a traffic light. While it responds to user input (pressing the button to cross the street), the interaction is limited to a predefined set of responses (changing the signal). Medium interactivity might resemble using a smartphone. While navigating through apps, users can input commands, receive feedback, and customize settings. The smartphone’s interface allows for a degree of personalization and responsiveness to user actions, but it still operates within the confines of preprogrammed functionalities. High interactivity can be exemplified by AI LLM chatbots since their capacity to comprehend intricate language inputs, showcase contextual understanding, respond coherently, and even generate creative content reflects a higher level of engagement. They can generate human-like text and personalized responses yet still lack the consciousness of a human being. However, it is starting to get borderline difficult to differentiate their responses from genuine understanding with bots like Character.ai.

Furthermore, Crawford’s distinction between user interface design and interactivity design struck a chord. It made me reflect on projects where the interface might be visually appealing but lacks the holistic experience that interactivity design aims to achieve. It aligns with my belief that interactive design should engage users not just visually but also cognitively. True interactivity is like a dance of ideas, not a one-way street.