Category: F2023 – Aya

 

In the initial chapter of Chris Crawford’s book, “The Art of Interactive Design,” titled “What Exactly is Interactivity?” the author delves into the concept of interactivity and attempts to provide a comprehensive definition.

Reading this text, I find myself nodding in agreement with the author’s perspective on the term “interactivity.” It’s evident that the author is critical of how the term is used and misused in contemporary discourse. The comparison of interactivity to a conversation, where two actors alternate between listening, thinking, and speaking, is thought-provoking. This made me question: How well does this metaphor hold up when we apply it to different contexts, especially in the digital realm where human-computer interactions can be vastly different from human-human conversations?

The author’s critique of the misuse and overuse of the term “interactivity” in various contexts, from marketing to technology, is a valid point. The example of a laundry detergent labeled as “specialized terminology” humorously illustrates this point and serves as a reminder of the potential for specialized language to lose its meaning.

The discussion about the subjectivity of interactivity is thought-provoking. The idea that interactivity might exist in the eye of the interactor raises questions about how we define and measure it, especially in various contexts where it might manifest differently.

The author’s exploration of what isn’t interactive, such as printed books and movies, challenges traditional definitions and prompts me to reconsider what truly constitutes interactivity. It’s a reminder that not all forms of communication or media can be classified as interactive.

The world grows most quiet during the Blue Hour, that sliver of time right before night. So short as to almost not have existed. During the Blue Hour, babies stop crying. So mothers gaze out their windows. Candles burn a bit dimmer. The Blue Hour is the world heaving one last sigh before going to sleep. I’ve always maintained that poets write from the Blue Hour of their brains.

I look for the Blue Hour in every movie. It’s in Moonlight. When Chiron’s staring into the ocean, it goes, “In the moonlight, black boys look blue.” It’s in The Act of Killing, a documentary about Indonesian genocide. I don’t think there’s a word in the English language to describe the action of sharply taking in a breath, out of breathlessness. The kind of breath that moves you into an almost-cry. It’s not a gasp. But whatever you call it, that’s what I did when I saw that blue picture. All the night birds taking flight. It’s in Wong Kar Wai’s In the Mood for Love. I’ve inserted a picture below:

It’s in Babel. I’ll never forget those two boys laughing against the wind on the mountain, before they knew their lives were over. The sound cut out with all the blue. Like the blue was in your head. In their heads. I noticed that Past Lives did the same thing with its own Blue Hour shot. Cut out all the sound. The Blue Hour is Eternal. It is quiet. It is sad. Profoundly so. I exist in the Blue Hour in the cave of my head and the trench of my heart. It’s the best time to smoke a cigarette. Hence my assignment. I wanted to capture the spirit:

https://editor.p5js.org/EloraTrotter/sketches/GX1kLdNr6

You can take a look at the code above. I’m very glad that I was able to implement loops, classes, and constructors. I wanted to increase the frame rate but P5Js kept crashing. With help from Professor Riad and the ever-reliable Coding Train (Youtube video linked here: https://www.youtube.com/watch?v=UcdigVaIYAk), I was able to fully understand what I was writing. I tried tweaking the the particles so that they became different sizes, or less opaque, but I scrapped all that in the end. Simplicity suited this piece, just like simplicity suits the Blue Hour. I would like to continue working on this piece because I have an unfinished vision of the smoke being huge Van Gogh-like swirls. But that’s a task for future Elora. Carpe the noctem. You learn.

Also- you know on second thought. I’d also like to learn how to integrate music and coding. One song that captures Blue Hour for me is “Midnight Blues” by Pavel Milyakov (Bryan Waterman rec). I’d like people to listen to that while viewing this.

The Art of Interactive Design

The chapter begins with an interesting argument on the term interactive. With the increased usage of the word in recent times, it becomes essential to understand what it means to be interactive. The writer has beautifully put forward his explanation of the term using the metaphor of a conversation. Breaking down interactivity into three major processes, the writer has compared it to the actions of listening, thinking, and reacting while having a conversation. The analogy of a conversation and the interactive process resonated with my understanding of the term.

He further stresses the importance of having two purposeful mediums to produce an interaction. He makes it very clear that if only one actor is present, it becomes more of a reaction than an interaction. The examples illustrated by the writer allowed me to grasp the difference between a reaction and an interaction.

While the writer agrees that some people would not approve of his classification of action as a mere reaction, he has elaborated on the subjectivity of the interactive process by introducing the concept of degree in interactivity. Hence, a passive interaction could be classified as an interaction at a low level.

To make his stance better understood, the writer goes on to discuss the different types of conversation you can have based on the person you are talking to and has used this explanation to classify activities such as reading and watching movies as non-interactive. Finally, he talks about graphic designing and the need to integrate interactivity into it.

The chapter was a thought-provoking read, and to a large extent, I agree with the writer on his definition of the interactive process.

Concept:

For this assignment, my goal was to depict a bunch of mini rockets (triangles) blasting off. This idea was mainly because, I wanted to practice using OOP, functions, and arrays in a very simplified manner. If you press down on your mouse, the rockets should shoot up, each at different times!

CODE I’M PROUD OF:

 

// applies thrust to rockets if the mouse is pressed
  if (mouseIsPressed) {
    for (let i = 0; i < rocketArray.length; i++) {
      rocketArray[i].thrust(20);
      //increases the thrust value if the mouse is pressed

I know it’s simple, but it seemed like a really cool idea to me.

REFLECTION:

I ran into a multitude of issues while trying to finally complete this assignment. The main issue that I came across, was that I kept creating infinite loops that made P5 keep crashing. It was really frustrating because for a while, I couldn’t figure out what was happening, but in the end, everything was sorted.

 

The discussion on the nature of interaction, breaking it down into input, processing, and output, provides a solid foundation for understanding the mechanics behind interactive experiences. This breakdown clarifies the essential components that designers must consider when crafting user interactions.

His emphasis on integrating storytelling and interactive design is intriguing. Storytelling has been a pivotal element in various forms of media, and exploring how it can be adapted for interactive experiences is fascinating indeed. The idea of narratives adapting to user choices and actions adds depth to the discussion, raising questions about the complexities and possibilities of interactive storytelling.

Concept:

So I wanted to create a 3D spiral that shows depth that is kind of interactive. This artwork is created using circles to form an after-effect that looks like a 3D spiral from far away. When the mouse is Clicked the movement of the circles reverses from the opposite axis creating a unique design. with the use of Perlin noises, smooth radii, and colors are created to make the design appealing to the eye.

Highlight:

Using OOP I had to think of a way to create a spiral without actually creating the spirals as objects. So I decided to use circles to do this. Initially, I got some bugs due to random radii not being smooth so I decided to use Perlin noise which fixed that problem. I also had a similar problem with the colors, which made the art weird.

Additionally, getting the right colors at the right times was another challenge I encountered even with the use of the Perlin noise, arrangement of the code caused bugs.

Finally the most challenging part for me was the spiral movement which I made use of the translate and the rotate functions as well as increment of the radius by a counter. with this counter and angle I was able to reverse the effect and ended up getting the design I wanted.
Extra video that helped

this.aa=map(noise(this.a),0,1,0,this.j);//getting smooth x-axis for the circles
  this.bb=map(noise(this.b),0,1,0,this.j);//y-axis
  this.i=this.aa;
  translate(mouseX,mouseY);//making the orijin the the mousex and mouse y points
  rotate(this.angle);//movement of the circle
  fill(this.x,this.y,this.z);//giving the colours to the circles
  circle(this.aa,this.bb,random(0,50));//creating circles 
  this.angle+=this.r;//incrementing the angle for circular motion
  this.x+=0.02;
  this.y+=0.02;
  this.z+=0.02;
  this.j+=0.1;

Final Work:

Reflection and Ideas for Future works:

With this I plan to make a design where the art work actually moves and is not just as a result of the pathways taken by the objects.

“The Art of Interactive Design, Chapter 1” by Chris Crawford digs into the complexities of interactive design, putting light on its particular problems and spirit. Crawford’s emphasis on interactivity as a two-way conversation between the user and the system struck a chord with me. He correctly points out that interactivity is about active involvement rather than passive consumption. This idea is consistent with my conviction that great interactive experiences should empower users by giving them the ability to make meaningful choices and feel a sense of agency. Crawford’s viewpoint emphasizes the importance of user-centric design, which prioritizes the user’s experience.

However, I couldn’t help but think about Crawford’s pretty harsh perspective on storytelling in interactive design. He contends that interactivity and storytelling are frequently at odds, and that an overemphasis on storytelling might damage a system’s interactive nature. While I understand his concerns about a potential collision, it makes me wonder about the chances of reaching a compromise. Is it possible to include storytelling aspects into interactive design without compromising its interactive essence? This friction between story and interactivity serves as a point of reflection and inquiry for me, challenging me to consider how these two components might coexist happily in design. Crawford’s observations have enhanced my understanding of the nuances of interactive design and the complexities involved in striking the proper balance.

Concept:

This generative artwork will consist of colorful bubbles that move randomly on the canvas, changing color and size as they go. Ive used Object-Oriented Programming (OOP) principles to create a Bubble class, each representing an individual bubble.

Description:

• I created a Bubble class to represent each bubble. The class has properties like x, y, diameter, col (color), speedX, and speedY for position, size, color, and movement.
• In the setup() function, Ive created 10 initial bubble objects and added them to the bubbles array.
• In the draw() function, Ive update and display each bubble in the canvas.
• When the mouse is pressed (mousePressed() function), a new bubble is created at the mouse position and added to the array.

Problems I ran into:

Creating a class and working with arrays was quite challenging for me as a beginner while I was developing the “Bubbles” project 

At first, the concept of Object-Oriented Programming was a bit overwhelming. I had to wrap my head around the idea that a class is like a blueprint for creating objects. It felt like creating a set of rules for what each bubble should look like and how it should behave.

Implementing methods within the class, such as move() and display(), was another hurdle. I had to understand how these methods would change the bubble’s properties and behaviors. It felt like writing a set of instructions for each bubble to follow.

Working with arrays was entirely new to me. Understanding how to create and manipulate arrays, like let bubbles = [];, was a fundamental but challenging concept to grasp.

Putting instances of the Bubble class into the bubbles array was confusing initially. I had to get the hang of adding objects dynamically to an array and keeping track of them.

Despite the initial challenges, I found that practice, patience, and referring to documentation and tutorials helped me overcome these difficulties gradually.

One part of the “Bouncing Bubbles” code that I’m particularly proud of is the move() method within the Bubble class.

move() {
    
    this.x += random(-this.speedX, this.speedX);
    this.y += random(-this.speedY, this.speedY);

    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }

 

I’m proud of this code for several reasons:

• Random Movement: The bubble’s movement is randomized. It adds an element of unpredictability and liveliness to the bubbles’ motion, making them feel more like bouncing objects rather than following a predictable path.
• Constraining within Canvas: I ensure that the bubble stays within the canvas by using the constrain() function. This prevents the bubbles from disappearing off the screen, which is crucial for maintaining a visually pleasing animation.

The concept of interactivity, as defined by Chris Crawford, resonates with me. In my view, interactivity involves an ongoing dialogue between the user and the medium, where both parties actively communicate, process information, and respond to each other. It’s a collaborative effort that draws inspiration from each other’s actions and words to create a compelling experience.

While caring for a plant can be considered an interactive experience in terms of attentively responding to its needs and enjoying the rewards of a thriving home, there is a counter-example to consider. Some argue that a plant only reacts to whatever substances are provided to it and does not necessarily interact with the caregiver beyond those basic responses. In this perspective, the plant is seen as a passive recipient rather than an active participant in the interaction.

This point highlights the challenges designers face when incorporating interactivity into their work. If the only meaningful interactions can be achieved with other intelligent life forms, it raises questions about whether designers should focus on interactivity or on creating deep connections and eliciting emotional reactions to their works. From this perspective, if a designer’s work is able to emotionally resonate with the audience and foster a deep connection, it may be more satisfactory than merely aiming for a certain level of interactivity that might ultimately detract from the intended purpose.

In summary, interactivity involves active dialogue and reciprocal engagement between the user and the medium. While caring for a plant may have limited interactivity, experiences such as having a pet exemplify the dynamic, engaging nature of true interactivity. However, when it comes to computer art, it raises intriguing questions about what it would truly mean to make such art interactive.

Should interactivity in computer art be limited to basic responses, or should it aim for a deeper connection that elicits emotional reactions from the audience? Can computer art truly engage users in a meaningful dialogue, or does it fall short in replicating the richness of interactions found in human-to-human or human-to-animal relationships? These questions challenge us to reconsider the essence of interactivity in the context of computer art and explore new possibilities for creating genuine interactive experiences through artistic mediums.

Ultimately, the definition and achievement of interactivity in computer art require thoughtful exploration and experimentation. It prompts us to question our assumptions about interactivity and consider how computer art can transcend its limitations to establish meaningful connections and engage users in profound dialogues that go beyond mere surface-level interactions.

Concept

Assignment 3 aims to utilize object-oriented programming to generate artwork. Following my work in Assignment 2, which already employed object-oriented programming, I decided to address the bug present in the previous code, which caused tiles to glitch, and introduce interactivity by allowing for tile rotation.

I determined that tile glitching resulted from the repetitive displacement and resetting of tiles. My next step was to establish a condition in which no action would occur, leaving the tile at rest. After tinkering with the code, I found the best way to resolve the glitch was to check if one of the cursor’s coordinates matched those of a tile, and if so, refrain from performing any translation.

Subsequently, I worked on enabling tile rotation when they were within a certain range of the cursor. The idea was to use the translate() and rotate() functions to make the mouse cursor coordinates the reference for rendering and rotation. My initial attempts were unsuccessful due to a lack of consideration for the order of operations in the code.

 

Highlight of Code

The highlight of my code lies in the draw function. I utilize a flag called this.event to assess whether the tile is within the specified distance of the cursor and employ a decision structure to determine how to display the tile. If it falls within the range, mouseX and mouseY serve as the reference points instead of the origin (0, 0). The tile is then rotated by an angle assigned when creating an object of the Tile class.

// render function for the tiles
  draw() {
    this.update();
    noStroke();
    fill(this.r, this.g, this. b, ALPHA);
    
    // decision structure to determine how tiles are rendered
    if (this.effect) {
      push();
      
      // makes coordinates of the cursor reference for drawing to canvas
      translate(mouseX, mouseY);
      rotate(this.rotate_angle);
      rect(this.x, this.y, this.breadth, this.length);
      
      pop();
      
      // setting coordinates of Tile to initial values with an offset
      this.x = this.xBeforeDisplacement + random(-60, 60);
      this.y = this.yBeforeDisplacement + random(-60, 60);
    }
    else {
      rect(this.x, this.y, this.breadth, this.length);
    }
  }

Reflection and Ideas for Future Work:

While I accomplished some of the tasks I set out to do, the end result did not meet my creative expectations, which is more a reflection of my creative challenges than issues with implementation. In future work, I intend to dedicate more time to creating pieces that aesthetically please me rather than focusing primarily on technical implementation.