Author: Ting-An Yang

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.

Concept:

• The idea for this assignment is to replicate the look of sound waves as they would appear in computer applications: comprised of multiple parallel vertical lines that fluctuate in length to reflect changes in volume. While it is currently beyond the scope of my coding capabilities to create something that actually responds to external sound input, it would nonetheless be a good opportunity for me to practice using for() loops to generate repetition as well as randomized elements.

Highlight:

• I am proud of having utilized the random() function within the for() loop in order to generate rectangles that are in fixed positions but have randomized lengths that change every time the frame refreshes, replicating the look and movement of a sound wave.

for(let x=0;x <= width; x +=15){
  noStroke();
  fill(random(0,50),random(150,200),random(30,255));
  rectMode(CENTER);
  rect(x,200,10,random(20,200));
}

Sketch:

Future improvements:

• The point of sound waves being depicted as such in computer programs is to reflect the volume of the sounds being recorded. In the future, it would be interesting to have the lines respond to various inputs such as clicking, cursor hovering, and sound.

Concept:

• As someone with limited coding experience, a highly simplified self portrait was the best choice for me to familiarize myself with the fundamentals of p5.js. I decided on utilizing blocks of color to illustrate my face in an artistic style reminiscent of the Animal Crossing games.

Highlights:

• I am proud of myself for managing to use two colored arcs to depict my middle-part bangs, which I had a little trouble coding as I was initially confused about how to flip the arc on the right horizontally.

//bangs
fill('#310707');
arc(70, 120, 260, 120, 0, HALF_PI);
arc(330,120, 260, 120, HALF_PI, PI);

Sketch:

Ideas for future improvements:

• While my portrait for this assignment effectively communicates the image of a face, it is a very simplified one that barely represents my likeness. If I were to make another portrait, I would like to experiment with layering more complex shapes with varying levels of opacity as a means of shading and coloring as you normally would while drawing on paper.
• I would also add more elements — be it a moving cloud,  a flying bird or an abstract flurry of colors — to the backdrop to create a livelier composition.