Author: Ting-An Yang

Concept

It came to me while I was playing on my guitar as a way to destress after hours of failing to think of ideas for an usual switch: why not use the guitar as a switch? The strings of the guitar are made of steel and can therefore act as conductors. All I had to do was to find a way to incorporate it into a circuit so that an LED light switches on with every strum of the guitar.

In retrospect, I realize that I was, in fact, using my hands despite the assignment instruction being to create an unusual switch that does not require the use of one’s hands. I was too preoccupied with trying to make my switch as unconventional as possible and accidentally neglected this instruction. Still, I am proud of coming up with the idea to incorporate my interest in guitars into my assignment.

I took the same circuit from our class exercise for digital input and removed the button, replacing it with the guitar and the guitar pick. I covered my guitar pick with aluminum foil to make it conductive and then taped it to a wire. As for the guitar itself, my initial idea was to tape a wire to the bottom E string; however, it proved to be not ideal as this meant that the LED will only light up if I strum this one specific string and not for the other five. I ended up taping the wire to a larger sheet of aluminum foil and then taping the sheet to the bridge of the guitar, which is a metal part that acts as a saddle for all six strings.

The code is also fundamentally the same as our in-class exercise, but instead of switching off when the circuit is complete, the LED light switches on.

void loop() {
  int buttonState = digitalRead(A2);

  if (buttonState == HIGH){
    digitalWrite(13, HIGH);
  } else {
    digitalWrite(13, LOW);
  }

}

Setup:

Github link

Demonstration

 

Reflection

There are many elements in this assignment that I would like to improve upon if I had more time. For example, the aluminum foil I wrapped around my guitar pick kept shifting despite the tape, the parts around the tip wore off and exposed the plastic pick after some strumming; using metal guitar picks would easily solve the problem, but I unfortunately do not have one. Another option would be to fashion a guitar pick out of multiple layers of aluminum foil.

It would also be interesting to expand on the functions of this device to help guitar players be on tempo. Since the LED lights up with every strum, adding a small speaker to the circuit that acts as a metronome; guitar players can listen to the tempo and look at the LED light to make sure it is also blinking on tempo, in case it is difficult for them to hear the subtle differences.

Her Code Got Humans on the Moon

Reading about Margaret Hamilton’s incredible life and career was eye-opening; I was not aware that a woman played such a central role in the United State’s Space Race efforts, not was I aware that “software engineering” was already a thing back then in the 1960s (albeit in its early stages). I feel like there are no words that can begin to describe just how impressive it was for her to juggle motherhood and her career in an era with layers of glass ceilings for a woman to break through (especially in engineering), all while setting the foundations of a discipline that is so integral to modern life. The unfathomable amount of responsibility assigned to Hamilton and her ability to set up all those crucial programs and troubleshoot while under immense pressure really put things into perspective for me. Whatever struggles I have with the more technical aspects of this course are nothing compared to hers, and her story gives me more drive and inspiration to take on my fears in coding and physical computing.

Emotion and Design: Attractive Things Work Better

Donald A. Norman makes a compelling argument about the balance between practicality and visual aesthetics that I absolutely agree with. Just the right amount of consideration for each is dependent on the context and purpose of the design; tools that are to be used in serious, concentrated efforts should of course be straightforward in design, but there are great benefits to be gained from adding style to the tools and activities we engage with in everyday life. We are naturally enticed by attractive things, and when using things that look good our “behavior seems to go along more smoothly, more easily, and better” (Norman). We derive joy from using aesthetically pleasing tools, but only if usability has not been compromised for visual style. Video game interfaces very well exemplify the need for this balance: visually, they must be appealing and in line with the style of the game, but they must also be easy to navigate as to not hinder gameplay and turn players away. I think the UI design of the Persona series (attached below) are the prime examples of good visual and interactive design:

Concept

HBO’s Game of Thrones has countless iconic scenes that have been forever ingrained in the memory of 21st century pop culture, but arguably one of the most iconic and significant is the fall that crippled Bran Stark and set off the ripple of scandals that made the series’s plot as complicated as it is. While I obviously do not condone acts of violence against minors, I found the scene quite funny because of how absurd everything was: a 10 year old child who somehow managed to climb up the exterior of a tower accidentally witnesses an incestuous affair and then gets thrown out of a window.

I figured that I would eternalize this scene in a more lighthearted way by creating a simple game in which multiple Brans will fall and the player, with their mouse, has to catch the boy by moving a pile of hay as a cushion for him to fall on. At the same time, players will also have to avoid catching the severed head of Bran’s father Ned Stark. Each game lasts 45 seconds; for every Bran saved, the score increases by one, and for every Ned head caught, the score decreases by one.

Highlights:

I illustrated most of the visual assets for the game in Procreate on iPad, employing a more cartoonish art style that I felt was fitting for the simplicity of the game despite the gritty aesthetic of Game of Thrones.

– Background: I tried to keep the whole image simple and not too crowded with details as to not affect the visibility of the falling Brans and Ned heads.
– Bran Stark

– Hay cushion

• Ned Stark’s severed head

In terms of gameplay, Ned’s falling heads were not part of the initial concept. However, after a few play-throughs it became apparent that having saving bran as the sole objective proved to be quite dull, so I decided to introduce obstacles in the form of Ned’s heads. While the mechanisms for Ned’s heads were almost identical to the falling Brans’, I think it’s an important addition as it adds to the stakes and makes the gameplay a bit more interesting.

As for the code, there wasn’t anything particularly challenging, but I am proud of having incorporated a countdown timer that resets with every new game; I used this video by flanniganable as a reference for the timer and added additional parameters to have it reset automatically.

let startTime; //track when the game starts
let timeLimit = 45; //countdown timer duration
let countdown;
let gameState = "start";

function drawGame() {
  //start 45 second countdown
  let currentTime = int((millis() - startTime) / 1000);
  countdown = timeLimit - currentTime;
  
  //end game after time is up 
  if (countdown < 0) {
    gameState = "end";
  }

  //display score and countdown in real time
  fill(0);
  textFont("times new roman");
  text("Score:" + score, 500, 60);
  text("Time:" + countdown, 500, 80);
}

function restartGame() {
  //reset countdown and Brans and Neds
  score = 0;
  startTime = millis();
  timeLimit = 45;
  countdown = timeLimit;
  gameState = "start";
}

function keyPressed() {
  if (gameState == "start") {
    // Start the game
    startTime = millis();
    gameState = "playing";
  } else if (gameState == "end") {
    restartGame();
  }
  // preventing the key press from being counted again
  return false;
}

Finished Game:

Areas for Improvement:

• The gameplay becomes repetitive and there is very little replay value as of now; expanding on the game with increasingly difficult levels and power-ups as incentives would greatly add to the replay value.
• I was not able to add fullscreen display for the game, as I had already illustrated the background image before we learned about fullscreen in class. Enabling fullscreen would allow players to see the falling Brans more clearly.

Concept:

HBO’s Game of Thrones has countless iconic scenes that have been forever ingrained in the memory of 21st century pop culture, but arguably one of the most iconic and significant is the fall that crippled Bran Stark and set off the ripple of scandals that made the series’s plot as complicated as it is. While I obviously do not condone acts of violence against minors, I found the scene quite funny because of how absurd everything was: a 10 year old child who somehow managed to climb up the exterior of a tower accidentally witnesses an incestuous affair and then gets thrown out of a window. I figured that I would eternalize this scene in a more lighthearted way by creating a simple game in which multiple Brans will fall and the player, with their mouse, has to catch the boy by moving a pile of hay as a cushion for him to fall on. Each game will last 60 seconds, and players must save as many Brans as they can — and prevent the chaos that is about to spread throughout Westeros.

A rough sketch of what the game will look like.

Project Components:

• OOP: Bran Stark will be a class. Bran’s sprite and the parameters for his falling movement will be set in this class.
• Image: Using Procreate, I will illustrate a simple background image that depicts the tower from which Bran fell + grassy ground + pebbles. The sprite for Bran will also be illustrated by yours truly (in a desperate attempt to make up for amateur coding with good artistic direction).
• Sound: I plan to have the show’s opening theme, composed by Ramin Djawadi, play as soon as the game loads; it will stop when the timer runs out and restart along with the game.
• Text: The starting screen will show the game’s title in the same font as the show’s title card. The countdown and score will also be displayed.
• Shape: I will draw simple shapes to serve as buttons for starting/restarting the game.

Code Progress:

• So far, I have a rough sketch of red ellipses (placeholder for Bran) that fall at varying speeds and a yellow rectangle (placeholder for hay cushion) with a fixed y position that moves horizontally with the player’s mouse. Both of these are classes of their own.
• The Game of Thrones main title theme starts playing when the game loads.
• The checkCollision() function checks if a Bran has came into contact with the hay cushion; if so, the score increases by 1 and that specific Bran is removed while a new Bran spawns at the top.

• let brans = [];
  let hay;
  let numberOfBran = 3; //number of Brans to be on screen at the same time
  let score = 0;
  let music;
  
  function preload() {
    music = loadSound("GOT Main Title.mp3");
  }
  function setup() {
    createCanvas(600, 400);
    for (let i = 0; i < numberOfBran; i++) {
      brans[i] = new Bran();
    }
    hay = new Hay();
    music.play();
  }
  
  function draw() {
    background("rgb(180,226,218)");
    //display Bran and hay cushion
    hay.display();
    for (let i = 0; i < brans.length; i++) {
      brans[i].display();
      brans[i].move();
      
      //increase score and reset Bran after collision
      if (checkCollision(brans[i], hay)) {
        score += 1;
        brans[i].reset();
      }
    }
    fill(0);
    text("Score:" + score, 500, 80);
  }
  
  //check for collision between Bran and hay cushion
  function checkCollision(bran, hay) {
    let d = dist(bran.x, bran.y, mouseX + 35, hay.y + 15); 
    return d < bran.diameter / 2;
  }
  
  class Bran {
    constructor() {
      this.x = random(50, 550);
      this.y = 0;
      this.speed = 3 + random(0, 7);
      this.diameter = 50;
    }
  
    display() {
      fill("rgb(216,78,78)");
      ellipse(this.x, this.y, this.diameter);
    }
  
    move() {
      this.y += this.speed;
      //re-generate Brans at top of screen when Brans fall off screen at the bottom
      if (this.y - this.diameter / 2 > canvas.height) {
        this.reset();
      }
    }
  
    reset() {
      this.x = random(50, 550);
      this.y = 0;
    }
  }
  
  class Hay {
    constructor() {
      this.x = mouseX;
      this.y = 330;
    }
  
    display() {
      fill("#FCD179");
      rect(mouseX, this.y, 70, 30);
    }
  }

• Challenges:
• Setting a countdown for the game would be a challenge for me, as I have never tried incorporating one into my projects prior to this one.
• I will also need to figure out an algorithm that prevents the randomly generated positions of the falling Brans from overlapping.

 

As much as we may try, computer vision has yet to be able to emulate the human vision; what a computer “sees” are “critically dependent on certain unique assumptions about the real-world video scene it is expected to analyze” (Levin). And as we work towards optimizing computer vision — especially in terms of enhancing facial recognition and such — I do believe that regulations do need to be put in place so that these technologies are not appropriated by the wrong hands, with issues such as surveillance and the potential invasion of privacy being so widely debated. The Suicide Box referenced in the text feels especially macabre and ethically questionable, since the project relies on tracking the movement of unsuspecting, suicidal people who are at their most vulnerable moment. Conversations about the ethics of computer vision being implemented in such manners are difficult but necessary in this rapidly evolving technological landscape.

In terms of interactive media arts, however, I do believe that computer vision and tracking can greatly enhance immersive experiences. Once again speaking in terms of video games (because I really do love games), the eye-tracking mechanism of Skybound Games’s Before Your Eyes is an example of great computer vision implementation that came to my mind. The game is centered around the story of a boy who revisits memories of his life while preparing for the afterlife (this is a very rough synopsis, as to not spoil the game). The gameplay tracks the player’s eyes, and players blink to interact with in-game elements and advance the plot. The game’s lengthy but crucial cutscenes prove to be challenging for players to watch without blinking and accidentally skipping to the next scene. While this may seem like an unwise choice of gameplay on the developer’s part, I eventually realized how creative it was for a game dealing with themes of grief to utilize eye-tracking to capture the bittersweet feelings of wanting to hold on to fleeting moments in life but feeling yourself unintentionally letting them slip away. Before Your Eyes is proof that computer vision, when implemented creatively, also has the potential to enhance the emotional value of a project.

Concept:

• Time management and planning are two of the most important skills a college student should have. However, I often find myself torn between needing to finish my assignments and wanting to take a step back and just relax. It is during these moments when I desperately wish for someone/something else to decide for me my plans for the day. Therefore, I decided to make a magic 8 ball that decides for what you should do, who you should do it with, where you should do it, and until when should you do it at the click of the mouse. The program will be based on the generative text exercise we did in class.

Highlight:

• While I didn’t do anything too innovative for this project, I am proud of having incorporated elements that I’ve incorporated in my past projects. For example, I utilized the dist() function within the mousePressed() function to determine if the user clicked on the 8 ball, just as I did to determine whether players clicked on the orbs for last week’s assignment.

//click 8 ball for new day plan
function mousePressed() {
  if (dist(mouseX, mouseY, width / 2, 320) < 40) {
    loop();
  }
}

Sketch:

Click on the magic 8 ball!

Future Improvements:

• In the future, it would be interesting to expand the list of words to be randomized in the generative sentence so that there is more variation. I would also like to explore more efficient ways to split the words, perhaps with a loop.

Don Norman opens his book by talking about “Norman doors” — doors that are unjustifiably confusing to operate. These doors often do not have clear indicators for operation, lacking in the principle of “discoverability” that is so crucial to design. What immediately came to mind as I was reading this were NYUAD’s very own Norman doors located at the entrance of C2.

These doors have been the very bane of my existence ever since I first arrived on campus back in August 2023. Stickers plastered on their glass planes label them as automatic doors, yet they seldom sense approaching figures and only ever open after 5 seconds have already passed and I have already made the motion to grab the handles and yank the heavy doors open myself. And when the doors do open, they awkwardly thrust outwards, knocking into people who have already taken a step closer in hopes of triggering the sensor.

I think the problem with the design of C2 doors is not the lack of discoverability, but the opposite: the bright yellow “Automatic Door” stickers and the long vertical handles are inherently contradicting instructions. It becomes unclear whether these doors are truly automatic or manual, and the stiff outwards swing of the opening doors is also not ideal, as people entering often have to step back. In short, there are many problems with design of C2’s doors, and it would make much more sense to install automatic sliding glass doors as they are much more intuitive and efficient for those who do not have time to stop and examine how to operate a door.

Concept:

• As someone who occasionally plays first-person shooter games and is admittedly very bad at them, Aimlabs is a great tool for honing my aiming skills with a mouse. The most common mode of training in Aimlabs involves clicking on a number of orbs that are suspended mid-air; with each well-placed click, the targeted orb disappears and a new one appears in another position. Since I haven’t incorporated any interactive elements in my previous assignments, I decided to challenge myself by roughly recreating Aimlabs in p5js.

Highlight:

• A challenge I faced during this project involved setting up the mousePressed() function so that orbs are replaced with new ones when clicked on. Since the coordinates of the orbs are randomized in the Orb class, I was unsure how to reference their current coordinates in the main sketch while trying to calculate the distance between the mouse and the center of the orb at the time of the click. I ultimately set up a clickPos() function within the Orb class that checks if the distance of the mouse from the orb center is less than the orb’s radius. Then, I simply referenced clickPos() within the if statement of the mousePressed function in the main sketch.

let orbs = [];

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 5; i++) {
    orbs[i] = new Orb();
  }
}

function draw() {
  background(0);
  print(mouseX + "," + mouseY);
  noStroke();
  fill(90);
  quad(0, 0, 400, 0, 340, 100, 60, 100);
  fill(160);
  rect(60, 100, 280, 230);
  fill(130);
  quad(0, 0, 60, 100, 60, 330, 0, 400);
  quad(340, 100, 400, 0, 400, 400, 340, 330);
  fill(195);
  quad(60, 330, 340, 330, 400, 400, 0, 400);

  for (let i = 0; i < orbs.length; i++) {
    orbs[i].display();
  }
}

function mousePressed() {
  for (let i = 0; i < orbs.length; i++) {
    if (orbs[i].clickPos()) {
      orbs[i] = new Orb();
    }
  }
}


class Orb {
  constructor() {
    this.x = random(50, 350);
    this.y = random(50, 350);
    this.diameter = 70;
    this.color = color("rgb(167,226,241)");
  }

  display() {
    fill(this.color);
    stroke('#2CA9C9');
    strokeWeight(3);
    ellipse(this.x, this.y, this.diameter);
  }
  
  clickPos(){
    let d = dist(mouseX, mouseY, this.x, this.y);
    return d < this.diameter/2;
  }
}

Sketch:

Try clicking on the blue orbs!

Reflection and Future Improvements:

• Overall, I’m proud of myself for managing to incorporate an interactive element despite how intimidating it felt at first as a beginner. However, this project isn’t the most accurate when compared to the actual Aimlabs. In my sketch, the orbs are static while the cursor is free to move around to click on the orbs. In Aimlabs, however, the cursor is fixed on the center of the screen as a crosshair; while the crosshair remains static on screen, the orbs move in relation to the movement of the crosshair even though they are supposedly static as well. In the future, it would be interesting to recreate this so that the program feels three-dimensional and more immersive.

While it may be obvious that anything “interactive” should involve two parties that engage with each other with inputs and outputs, I found the article’s discussion of the varying degrees of interactivity to be very interesting. The most accepted definition for interactivity also happens to be too broad, generous to a degree where one can define the act of using a refrigerator as an interactive activity despite there being no meaningful outcomes; a high-level interaction should go beyond programmed responses.

Video games are obvious examples for interactivity, but there is one game that I think truly exemplifies the author’s expectations for high-level interaction — Alien: Isolation. The author argues that for an interaction to be high-level, “both actors…must perform all three steps [of] listening, thinking, and speaking…well” (Crawford 7). The impeccable programming of Alien: Isolation makes it a game that “thinks” and reacts to player input in increasingly dynamic ways. In the game, the player has to run and hide from the xenomorph, which runs on artificial intelligence that learns from  the player’s tactics and then adjusts its strategy so that the player cannot reuse the same tricks and gameplay remains unpredictable. This very well exemplifies the “iteractive process” of a high-level interaction in which both the player and the AI of the xenomorph have to learn and evolve together. While it is far beyond the scope of my current coding capabilities to create a highly intelligent program like the xenomorph of Alien: Isolation, I think the element of surprise and unpredictability is something I can think about when designing user interactions in my p5 sketches.

References:

18 things we learned about Alien: Isolation last night

https://intro.nyuadim.com/wp-content/uploads/2020/08/theArtOfInteractiveDesign.pdf

One thing that I, as an art history major, really enjoyed about Casey Reas’s talk on chance operations is the way he connected the topic to the Dada movement in art, referencing the desire of artists to break away from the pre-World War I  conventions of logic and reason. However, as Reas proposes applying the same elements of randomness through generative computer algorithms to create art, I couldn’t help but begin to question its compatibility with my understanding of what constitutes art.

To me, art is something birthed by human deliberation; it encompasses the story, the soul of the artist. When we leave it to chance operations to work and create independently of the intents of the human artist, can we still consider it a meaningful, artistic creation? But just as Jackson Pollock was the one waving his brushes with much force for the paint droplets to create random patterns, the programmer is the one who sets up and sends the computer programs into motion in the first place, allowing these chance operations to create the unexpected. These pieces are not possible without the programmer setting the parameters, and while I do not have a definitive answer about whether this makes them real artists or not, I think it’s nonetheless interesting to see how the role of an artist evolves over time.