Category: F2023 – Aya

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.

 

Crawford thinks of interactivity the same way I measure consciousness. I believe rocks are conscious–just less conscious than we are. I describe consciousness as “witnessing.” Everything is witnessing each other. A rock is witnessing you just as you are witnessing it. And the more complex your way of “witnessing” is, the more conscious you are. Similarly, Crawford measures the interactivity of an exchange based on how complex it is. He says you achieve the highest level of interactivity whenever you have a good conversation. And I agree.

There have been people I tried over and over again to have good conversations with. And it never worked. Some of the best conversations of my life were with strangers on the street. I’ve thought hard and often about what makes a conversation good. And I’ve settled on the idea that it’s a mutual acknowledgment that you’re speaking from the same spiritual mycelium. A look in your eyes that says, “You feel as I feel. You speak from the same hiding place I speak.” And you can see in their eyes that they know how rare this is too. That they’re acknowledging what a relief it is to find that, having trudged for miles, they’ve finally stumbled across another fisherman at the bank of the same river. They’ve found you. One of my favorite Fitzgerald quotes goes: “Let your convictions be, not caves in which you hide, but hills upon which you stand.” And during a good conversation, you feel yourself dancing on that impossible hill.

All of this got me questioning, thinking about interactivity in Crawford’s terms, can media actually be interactive? As interactive as a good conversation? How can you interact with installations, with mere objects, as intricately and intimately as you do with your closest friends? But the thing is, I have been moved by interactive installations as profoundly as I have been moved by special conversations. And I concluded it’s because the artists of those particular installations poured themselves into what they had created. As if their art was a placeholder for them themselves. Some incarnation. By interacting with what they had made, I was touching their head, their thoughts, their visions, their dreams. That’s why we love the musicians we love. When we hear a particularly moving song, whether it’s by Kanye or Bob Dylan, it’s a strange kind of magic that happens when we realize that they know us down to the bone. We ask, “How do you know me when you have never met me?” And when we’re interacting with what someone has created, in a very important way, we’re interacting with them. Crawford said that opening a refrigerator door is an exchange with extremely low interactivity. But for the child who obsesses over opening and closing the refrigerator door over and over again, I believe, in their case, it is a highly interactive experience because they truly believe the refrigerator is alive.

Crawford goes into the differences between regular designers and interactive designers. Bruno Munari is one of the greatest designers of all time. I love a quote by him that goes: “There is no such thing as a personal style in a designer’s work.” Of course, no designer in the world can achieve this. But they try pretty damn hard. I believe the principle difference between regular designers and interactive designers is that the former’s objective is to put as little of themselves into their designs as possible. Interactive designers aim for the absolute, complete opposite. They demand: “See me.” And if what they made was good enough, you can acknowledge that you did.

But songs do this. Movies do this. And those weren’t interactive enough for Crawford. Maybe it’s only when installations seem to say: “Let me try to see you” that they meet the picture in his head. I got the sense that Crawford was relegating a lot of his understanding of the medium to the certainty of the future. I understand him very much in this aspect. I am never able to say what I am trying to say until the future says it for me. I’m no prophet.

In the first chapter of The Art of Interactive Design, Crawford attempts to define the word interactivity, which he feels is misunderstood due to its popularity. Instead of defining it in technical terms such as ‘input, process and output’, Crawford sees the more human side of interactivity: listening, thinking, speaking. For him, interactivity comes from reciprocal action between two actors, an action that, in his words, has blood in its veins, or one that imitates life. He draws a distinction between the degrees of interactivity, claiming that it is more like an ever-changing variable than a boolean property; there are high interactivities and low interactivities. For it to be classified as high interactivity, it should perform all three steps, namely listen, think and speak. If it fails in any one of these steps, it falls short and falls under the category of low interactivity. Crawford also differentiates between interactivity and reaction, arguing that mere reaction to forms of media such as books and films fall short of the true definition of interactivity since they do not carry out all of the three steps.

Crawford points out the different approaches to solving a problem by ‘user interface people’ and ‘interactive design people’, mentioning how the ‘user interface people’ seem to be concerned more with the objective side to the solution while the ‘interactive design people’ bring to the table an artistic way of solving the problem. Crawford attempts to unite the two peoples by suggesting that good interactivity design integrates form with functionality, and that they are far from being mutually exclusive.

Crawford is self-aware of how his definition might not resonate with everyone and acknowledges that he cannot claim to provide a definition that truly encompasses everything interactivity is about. His ideas prompted a reconsideration of what I define interactivity as. However, I do think that the degree of interactivity does not matter as much as the thought behind it – which, essentially, is an unspoken understanding between the artist and the beholder, a conversation that might never have been had if not for the interactive art. After all, why, as long as it listens, thinks and speaks, should one compartmentalize the degree of art at all?