Author: Ting-An Yang

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.