Category: F2024 – Aya

In my opinion, after reading the chapter, interactivity can be characterized as responsiveness and ability of the system to give a reaction in relation to the reaction given by the user (so when we say that movies are not interactive, it means that there is only reaction from the user and it is not processed by the movie itself). However, as was written in the chapter, I don’t know to what extent the features of conversation between two people are applicable as a basis of interaction features between an object and a user, because the quality will definitely differ. But, I do certainly agree that there are different levels of interaction, and their quality depends on how invested both of the actors are.  

I think the world today is more knowledgeable about interactivity, stemming from the fact that many companies try to make their products interactive. When I read about “If the movie were interactive, you might see our heroine pause and say”, it reminded me of how Netflix introduced interactive series on their platform, where viewers themselves decide what kind of action the character should do next. And the same thing actually is introduced in the books, where a reader, based on their choice, switches to specific pages to continue reading their chosen storyline. I think even though the interactivity of such products can be marked as low, it is still present there. 

Reflecting on the ideas, I thought about using buttons, as a form of interaction in my p5 sketches. Moreover, since I am the one who usually picks the style of the visual, maybe I can try making the user choose the color palette and style that they want to see as well. In that way, sketches will reflect choices the user makes.

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.

Concept

I aimed to build on my previous assignment by creating flowers using the lollipop example from class and crafting a bee inspired by the bouncing ball technique. Having already created a tree, I wanted to continue developing this theme.

Sketch

press to add bees

I chose the color of flowers to be this pink/magenta shade because there use to be a similar flower that would bloom very high we could never pick them as kids.

Highlight
My original bee looked like this. I couldn’t figure out how to get the bee to look like how I originally wanted it to. But then I remembered that I could -/+  this.x/this.y and it worked. I’m happy with the current bee especially since looking back, this one just looks weird.

show() {
  // bee's wing
  fill("#D5EBEE");
  stroke("#EBFAFC");
  ellipse(this.x - 3, this.y - 15, 15, 23);
  ellipse(this.x + 6, this.y - 15, 17, 24);

  // bee's body
  stroke("#E7D534");
  strokeWeight(3);
  fill("#FFEB3B");
  ellipse(this.x, this.y, 40, 30);
  
  // bee's stripes
  fill("rgb(15,15,15)");
  noStroke();
  ellipse(this.x, this.y, 3, 30);
  ellipse(this.x - 8, this.y, 3, 25);
  ellipse(this.x + 8, this.y, 3, 25);
  ellipse(this.x + 15, this.y, 3, 20);

  // bees' eye
  stroke(0);
  point(this.x - 15, this.y - 2);
}

I got the petals to rotate from Fasya Rahmadhani ‘s rotating strawberries.

Reflection

Overall I’m happy with the final piece. I did want to add the push/pop function to add/remove bee’s but they ended up just following each other. When I added the bee after the flowers the flowers shifted, I used chat gbt to figure out what went wrong, I ended up needing to add push(); and Pop(); to restore the transformation and style to isolate them from translate() and rotate().

For future improvements I wish to make It way more interactive. like adding (which I added after professor’s comments)or removing bees but also using the mouse pressed and key pressed function for visual changes.

 

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

I believe that interactivity comes from the use of our senses. Sight, touch, hearing, smell, and even balance. While not every interactive system needs to involve all of these senses, it must engage at least one. I agree with the idea that anything can be interactive because we can interact with everything around us. However, what’s crucial is distinguishing the level of interactivity (as he mentioned) whether it’s high, moderate, or low, since different forms of interaction have different impacts. 

When the author claimed that printed books aren’t interactive because they can’t “speak,” I would argue that interactivity can also be one-sided. For instance, I am reading this author’s views, which may or may not influence or challenge my own thinking. The author created the book, and I am engaging with it—how can that not be considered a form of interaction? The experience of reading may not be a conversation, but it’s an intellectual exchange, a dialogue between the creator’s ideas and the reader’s mind. 

Regarding Improving User Interaction in p5 Sketches I think allowing users more control over the artwork itself, such as changing colors, adding or removing elements, etc, could make the experience feel more personal and engaging. And offering users guidance on how to interact with the sketch, such as through on-screen prompts or hints, would help them understand how to navigate and manipulate the artwork more effectively. Also, adding sounds or auditory information. Though I haven’t seen any examples of that so I don’t know if It is possible. 

When I changed my major from Biology to Interactive Media, I didn’t fully understand what interactivity really meant. Reading Chapter 3 of The Art of Interactive Design by Chris Crawford helped me make a clear distinction between interactivity and related concepts like reaction, participation, and design. Crawford defines true interactivity as a cyclical process where two actors alternately give input, process it, and provide output, much like a conversation.

Before reading, I assumed that systems allowing user participation, such as clicking buttons, were interactive. However, Crawford’s explanation made me realize that true interactivity requires meaningful feedback. Unlike simple reactions, which are one-way responses, interactive systems respond to the user’s input in ways that adapt and engage, creating a dynamic loop.

This new understanding has changed how I approach design, as I now realize the importance of creating systems that actively respond to user input in meaningful ways. Crawford’s insights will guide me in future projects, pushing me to design experiences that are truly interactive, with a focus on creating dynamic, engaging feedback loops between the user and the system.

“Form follows (?) function”

Chris Crawford provides valuable insights into the nature of using and misusing the word “interactivity” referring to both physical and digital spaces, without avoiding his subjective evaluation of such instances. In the context of studying Interactive Media, full understanding of what such media really mean is crucial. I agree with Crawford that interactivity should be regarded as a spectrum, yet I believe that there are certain characteristics defining strong interactive systems at least in the digital space. “Form follows function”, a long ago established design principle, can be followed (at least to an extent) – the designer should not overcomplicate the user’s experience, making the function unclear in a pursuit of a more unconventional form. Although I do not think that this principle must be implemented without exceptions, at this stage of my coding experience I lean towards making interaction with my works more straightforward for the user. Unplanned and random additions should not be forbidden, as we have already learned, but it is important to maintain a balance. 

“The rule of three” proposed by Crawford in this chapter will be a helpful guideline for me while designing a truly interactive work. However, I want to experiment in my p5.js projects with expanding the degree of interactivity, not limiting the system to inputs and outputs but adding more steps of interpretation. This could involve implementation of that very randomness, development of a complex algorithm that considers a variety of scenarios, or something even more thought-provoking.

Listen (input) – Think  (process) – Speak (output)

One thing that Chris Crawford mentioned at the end really enlightens me: have the right form for the right function. Despite that user interface design and interactivity design are two different things, their should be an inseparable link in between. For my week 2 assignment, I added an if statement to trigger the background changes whenever the mouse moves to a specific area.  This is a last-minute changes to the generative work I have already done with the pure intention of increasing interactivity. Looking back to it, I realize that it breaks the balance between the wave in the foreground and the single-tone background. Although the degree of interactivity seems to rise, the important code I wanted to highlight is interrupted. 

The above reflection brings me to the second point i’d like to discuss: what determines the degree of interactivity, listening, thinking, or speaking? Though Crawford uses book and movies as examples of forms that have low interactivity, I remember reading books that direct you to different sections of the page based on the choices you made for the protagonist. In 2018, Netflix also launched its first interactive film Bandersnatch on their streaming platform with more to come in the following year. These innovations create a conversation between the audience and the actors. However, do these innovations turn the medium into something they are not? Do these books and movies become a game? What more can be done to increase the interactivity of these mediums while not ruining their fundamentals?  

Whenever I have a conversation with somebody not studying Interactive Media, I’ve never been able to explain the term “interactive” in a way that does justice to what it really means. It almost got me thinking that maybe there is no good definition, but rather just an understanding you develop once you’ve been exposed to the field. In this regard, reading “The Art of Interactive Design” by Chris Crawford was an eye-opening experience. I really liked how he broke down interactivity into three parts (listening, thinking and speaking), while also giving the example of a good human conversation to make sense of this meaning.

Crawford’s emphasis on degrees of interactivity, rather than just “interactive” or “not interactive,” really gave me a lot to think about. It reminded me of past projects where I thought I had created something highly interactive, only to watch users quickly lose interest. Now I’m wondering if I unintentionally created the equivalent of a “refrigerator light game” – technically interactive, but lacking depth. This reading also gave me ideas for improving my p5.js sketches, like using better algorithms to create more dynamic responses to user actions. But it also leaves me with the question: How much “thinking” does a system need to do before it feels truly interactive to users? Can we ever create digital interactions that match the richness of human conversation? In the end, can a system be truly interactive if it lacks purpose or understanding of the interaction, or is the perception of interaction by the user enough? These are questions I’ll be thinking about as I approach my next project, aiming to create something that goes beyond simple input-output and engages users in a more meaningful way.

Casey Reas’ view on the role of randomness largely resonates with me – I have valued the loss of order in artworks before, but I have not thought in depth about the possibilities that this provides to creators from different backgrounds. Thinking about randomness generated by computer, I have always regarded it “pseudo-random”, knowing that there are still specific algorithms that guide the output. In this sense, the quote from “The digital computer as a creative medium” by Michael Noll was eye-opening to me: “… full exploitation of those unique talents for controlled randomness and detailed algorithms can result in an entirely new medium”. This conclusion is not an obvious one, and this is what makes coding so fascinating to me – there are so many aspects under the control of the developer, that chance brings uniqueness to an outcome that could supposedly be predicted.

The interconnectedness of randomness and control is still confusing to me, and I believe that there should be a balance defined by everyone by themselves, not a universal one. In my works, I wish to include elements that go out of orderly more often, developing algorithms that follow a logic resulting in an unforeseen outcome, but do not become pure improvisations. Letting something go out of control is scary, but I have learned that uncertainty can bring beauty to the final result.