Month: February 2024

In this reading, Chris Crawford presents interesting insights into what interactivity exactly means. I personally had not thought much about this, but this reading gave me a different perspective of looking at things. The idea of interactivity being qualitatively different from reactivity was interesting to me. It seems that there are certain things that are very hard to make interactive if they are kept as it is (such as a book).

The idea of how an interactivity designer is different from a user interface designer was also new to me. I really liked the analogy of form v/s function and how an interactivity designer focus on all three aspects of interactivity (listening, thinking and speaking). He also writes about graphic designing as being merely a subset of interactive designing.

I had never considered the challenges that interactivity designers would face in an industry where this is still an emerging field and, in a context, where interactivity designers are generally younger and less technically proficient.

Overall, this reading gave me a better understanding of what interactivity is and why it is important. The example that the author gave of a teacher being better than a mere book because of interactivity was very useful and helped me realize its importance. I hope to incorporate this way of thinking in designing future projects.

For this assignment, I wanted to create a geometric and interactive artwork using OOP and functions. I was inspired by this youtube video: https://www.youtube.com/watch?v=4lCD9B4Dlik

My idea was to have a grid of spinning dial controls. Each dial displays a different hue pulled from the colour spectrum and it gives the final piece an ombre effect. As you move your mouse across the grid, the dials swivel to follow along. It creates this really cool hypnotic effect!

I created a Dial class to represent each control. In the setup(), I iterate through a 2D array to place Dial instances in rows and columns. I calculated the number of rows and columns based on the canvas size to fully fill up the space.

Each Dial is coloured according to its position in the grid using HSB colour mode. This lets me pull nice saturated tones from around the colour wheel. I mapped the grid indices to hue, saturation and brightness values. This creates a smooth gradient of colours.

for (let i = 0; i < cols; i++) {
  for (let j = 0; j < rows; j++) {
    // Map the grid position to HSB color values
    let hue = map(i + j, 0, cols + rows, 0, 360);
    let saturation = map(i, 50, cols, 100, 100);
    let brightness = map(j, 50, rows, 100, 100);

    // Set the fill color based on mapped HSB values
    fill(hue, saturation, brightness);

    // Call the rotateDial method of the  Dial instance with the current mouse position
    dials[i][j].rotateDial(mouseX, mouseY);

In draw(), all that’s left is to animate the Dials. This simply involves calling each Dial’s rotateDial() method, passing in the mouse position. Some tweaking was needed to get the rotation speed and smoothness right.

While the core concept is simple – a grid of colourful spinning things – the end result is quite striking and mesmerising. As the mouse moves, these colourful triangles swirl around the grid in different patterns. The black background makes it stand out and I’m pleased with how well it turned out.
I’m considering ways to expand on the idea in the future, maybe adding interactivity to control the colour mapping or rotation speed. I’m open to suggestions for other fun tweaks!

 

The way the author defined the term “interactivity” caught my attention. To me, interactivity simply means interactions between two things or people. However, the author defined it in terms of a conversation where two actors actively take turn listening, thinking, and speaking. To further the definition, the author mentioned the role of subtasks (thinking, listening, speaking) in determining the quality of the interaction. Interactivity is not only about the interaction itself but also the subtasks that need to be well-performed to result in a high-quality interaction.

The author made an argument on what things are considered not interactive. I found myself agreeing with what the author defined as not interactive and an example given was a printed book. Although it speaks the words to the readers, it does not listen or think. In other words, the book and the reader do not alternately listen, speak, and think. In this way, the book is not interactive and hence cannot collaborate with humans, who are considered interactive.

To add on, an example of dancing as a non-interactive activity was a surprise. I thought dancing was interactive because dancers move according to the music. However, according to the author, dancing is not interactive because music is not an actor that can think and listen. It speaks the melodies and lyrics of the song but is not able to interchange with the dancer. Similarly, the movie is another subject that humans cannot interact with. Although I felt like I was exchanging ideas with the movies I watched, in fact, I was not interacting with the movies or the actors displayed in the movies.

Overall, the author’s definition of interactivity was fascinating. The author’s definition made me rethink what I consider interactive and hence how to develop good designs. While great designs can result between interactive and non-interactive actors, harmony between two interactive actors can also create designs of high quality and interest. With this reading, I will be trying to create designs that show the conversation of several interactive actors.

The product of this assignment is an extension of assignment 2: I wanted to further develop the code for bouncing ball by using class. The concept of this work is shooting star. Recently, the weather in Abu Dhabi has been so nice and I have been enjoying taking “sky-gaze”. Looking at the night sky and the stars, I thought I could use class to create several stars on P5.

This is the class named Star. Under this class, there is a constructor that determines the position and speed of the star. Also, there are three other instructions that guide the actions of the star (move, bounce, and show). I didn’t encounter any difficulty while constructing class and this process was easier than constructing the code under function draw.

class Star {
  constructor(x,y,xspeed,yspeed) {
    this.x = x;
    this.y = y;
    this.xspeed = xspeed;
    this.yspeed = yspeed;
  }

  move() {
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
  }

  bounce() {
    if (this.x > width || this.x < 0) {
      this.xspeed = this.xspeed * -1;
    }

    if (this.y > height || this.y < 0) {
      this.yspeed = this.yspeed * -1;
    }
  }

  show() {
    noStroke();
    fill('rgb(241,241,214)');
    ellipse(this.x, this.y, 15, 15);
  }
}

This is the section of code that I struggled with. Because I wasn’t familiar with some of the code such as interactive, new,  and push, I had to spend extra time to figure out how to use the code. However, once I grasped an understanding of the code by referencing class slide, I could use it to draw interactive stars.

function mousePressed(){
  
  //adding new star
  let interactiveStar = new Star(mouseX, mouseY, random(-5,5), random(-5,5));
  star.push(interactiveStar);

}

This is a portion of code that I am proud of. I learned how to animate objects in P5 using arrow keys by watching this video. The overall process of creating this code was easy but I had to go back and make global variables to be able to animate the object (rocket).

  //moving the rocket up and down
  if (keyIsPressed){
    if (keyCode == UP_ARROW){
      b--;
    } else if (keyCode == DOWN_ARROW){
      b++;
    }
  }
  
  //moving the rocket right and left
  if (keyIsPressed){
    if (keyCode == LEFT_ARROW){
      a--;
    } else if (keyCode == RIGHT_ARROW){
      a++;
    }
}

For improvement, I would like to actually create a star shaped shooting star and not use an ellipse. In this way, a shooting star would be more well-represented.

I resonate with the interaction that the author proposes. Interaction is a “cyclic process” in which two actors alternately listen, think, and speak; it’s a back-and-forth listening, thinking, and speaking process indeed. The key is more than one, irrefutably. But I entertain his idea that we should think of interactivity as a “variable with relative measures.” Sometimes, defining whether an object as either interactive or non-interactive seems reductive and regressive. Things are more than what they seem and they certainly belong in the grey area of interactivity definition. Aiming to discuss the degree of interactivity seems to be a legitimate approach.

The author thinks that movies are non-interactive. However, in today’s context, this is not true entirely anymore, given the rise of interactive content on streaming platforms such as Netflix, with shows or movies like Carmen Sandiego: To Steal Of Not To Steal, Black Mirror Bandersnatch, etc.. Sure, the end result is pretty much very pre-determined, these programs are scripted anyway, but the concept and operation of the interactivity is successfully implemented. Pretty soon in the future, there will be interactive movie made for VR glass devices such as the newly released Apple Vision Pro.

I also find the idea about the contention between user interface and interactivity design to be fascinating. User interface from what I understand is all about front-end and the interactivity design back-end. But I’ve never thought about the tense relation between the interactivity designers and the user interface designers who detest the intrusion of interactivity designers into their work. I’ve always thought that each of these two aspects cannot exist without the other!

This generative artwork is essentially me implementing the concepts of arrays and class that we learned. I was thinking of creating something fun and colorful and demonstrate a chaotic pattern that can be generated when a user press the mouse. And while scrolling through Openprocessing.org to look for inspirations, I stumbled upon a generative artwork called “Noise Turbulence Doodles” by Raven Kwok (https://openprocessing.org/sketch/143842).

The idea is that a circle generated from a mouse click is followed by a chain of automatically generated circles decreasing in size that scatter in random directions. I set the color spectrum for the circles to be a rainbow spectrum (referencing this p5js example by aferriss: https://editor.p5js.org/aferriss/sketches/Bys1YDQx7), with the root circle taking a random color every time the mouse is pressed or held. The longer the mouse is pressed at one position on the canvas, the more rainbow “spikes” are generated starting from the root. If the user moves the cursor around, they will scatter the root while creating the spikes as well.

The artwork generated looks like sea urchins or something spiky in 3D. This illusion is created by randomizing the distance between each circle that are generated in the chain from the root.

Using class and array:

let particle = new Particles(
      mouseX,
      mouseY,
      30,
      random(-5, 5),
      random(-5, 5)
    );
    //     add each circle generated after the root circle to the array
    circlelst.push(particle);

Creating a move class:

move() {
    //     the x-coordinate the circles increase according to the x-direction
    this.posX += this.directionX;
    //     the y-coordinate the circles increase according to the y-direction
    this.posY += this.directionY;
    //     the radius of the circles decrease by a random float from 0 to 1
    this.radius -= random(0, 1);
    //     draw the chain of circles
    if (this.radius > 0) {
      circle(this.posX, this.posY, this.radius);
    }
  }

Embedded sketch (Please press the mouse (either short press or long press) and move the cursor around to play with the effects):

This is very fun to make. The hardest part is to figure out how to generate the chain of circles that decrease in size as they are generated and how to trigger the circles to move in random direction consisting of x-direction and y-direction. It essentially required me to figure out how to work with arrays.

As for future work or improvements, I want to make the circles blend with one another smoothly to create a shape instead of separate circles. That way it can look even more hallucinatory.

The overall concept for this week’s assignment is that I wanted to portray what things look like in a closer look. The vibrating movements of various atoms and molecules based on the interactivity of the user is what i wanted to make. Based on mouse pressing and mouse dragging, there are different actions for each of them. If the mouse is pressed, a random shape subclass will be painted on the canvas, while if mouse is dragged, the background color, size changes and the shapes gain erratic movement. I used a parent class Shape and subclass for different shapes with move, display, and update methods. Although I encountered no visible problems, it was refreshing to make color and interactive artwork.

Shapes class Code:

class Shape {
  constructor(x, y, size, color) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
    this.offsetX = random(-1, 1);
    this.offsetY = random(-1, 1);
  }
  
  display() {
    // Abstract method 
  }
  
  update(x, y) {
    // Abstract method 
  }
  
  move(){
    // Abstract method 
  }
}
//star subclass
class Star extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(random(255), random(255), random(255), 100));
  }
  
  display() {
    fill(this.color);
    beginShape();
    for (let i = 0; i < 10; i++) {
      let angle = TWO_PI * i / 10;
      let r = this.size * (i % 2 === 0 ? 0.5 : 1);
      let x = this.x + cos(angle) * r;
      let y = this.y + sin(angle) * r;
      vertex(x, y);
    }
    endShape(CLOSE);
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//diamond subclass
class Diamond extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(random(255), random(255), random(255), 100));
  }
  
  display() {
    fill(this.color);
    beginShape();
    vertex(this.x, this.y - this.size / 2);
    vertex(this.x - this.size / 2, this.y);
    vertex(this.x, this.y + this.size / 2);
    vertex(this.x + this.size / 2, this.y);
    endShape(CLOSE);
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//atom subclass
class Atom extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(random(255), random(255), random(255), 100));
  }
  
  display() {
    fill(this.color);
    ellipse(this.x, this.y, this.size, this.size);
    fill(255);
    ellipse(this.x - this.size / 4, this.y - this.size / 4, this.size / 2, this.size / 2);
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//molecule subclass
class Molecule extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(random(255), random(255), random(255), 100));
  }
  
  display() {
    fill(this.color);
    ellipse(this.x, this.y, this.size, this.size);
    fill(255);
    ellipse(this.x - this.size / 4, this.y - this.size / 4, this.size / 2, this.size / 2);
    ellipse(this.x + this.size / 4, this.y + this.size / 4, this.size / 2, this.size / 2);
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//water molecule subclass
class WaterMolecule extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(0, 0, 255, 100)); // Blue color for water
  }
  
  display() {
    fill(this.color);
    ellipse(this.x, this.y - this.size / 4, this.size / 2, this.size / 2); // Oxygen atom
    fill(255);
    ellipse(this.x - this.size / 4, this.y + this.size / 4, this.size / 3, this.size / 3); // Hydrogen atom 1
    ellipse(this.x + this.size / 4, this.y + this.size / 4, this.size / 3, this.size / 3); // Hydrogen atom 2
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }
}

//Co2 subclass
class CarbonDioxideMolecule extends Shape {
  constructor(x, y) {
    super(x, y, random(20, 100), color(255, 0, 0, 100)); // Red color for carbon dioxide
  }
  
  display() {
    fill(this.color);
    ellipse(this.x, this.y - this.size / 4, this.size / 2, this.size / 2); // Carbon atom
    fill(255);
    ellipse(this.x - this.size / 3, this.y + this.size / 4, this.size / 3, this.size / 3); // Oxygen atom 1
    ellipse(this.x + this.size / 3, this.y + this.size / 4, this.size / 3, this.size / 3); // Oxygen atom 
  }
  
  update(x, y) {
    let d = dist(this.x, this.y, x, y);
    this.size = map(d, 0, width, 20, 100);
  }
  
  move() {
    // Vibrate the molecule in place
    this.x += random(-1, 1);
    this.y += random(-1, 1);
  }

}

 

To a certain extent I agree with the definition of interactivity: a cyclic process in which two actors alternatively listen, think and speak. There should definitely be threads of actions that take input (listen), process it (think) and speak (output), however I believe that it does not have to limit to two ‘actors’, nor does it have to be in strictly alternative order. For instance, when someone interacts with a website, it may seem like there are two actors, but if you divide the website entity to two parts, the frontend and the backend, the interaction would be between three entities. In this sense, interactivity could contain multiple entities. Furthermore, I believe that there needs to be some sort of correlation between the threads. In other words, the output of one actor must be directly or indirectly be taken as an input for the other actor. Otherwise, there would be no relation between the two actors.

Another aspect that piqued my interest was the sentence “The refrigerator does interact with a user but it does so at a low level” . When it comes to measuring the level of interactivity, besides the three requirements, the time it takes for the interactivity to occur could be an important parameter to measure. There could be many micro-interactions simultaneously happening in a short time, which could be argued as a high level interaction. While on the other hand, there could be complex interactivity but the time it takes spans a long period, therefore lowering its level of interactivity. The word interactivity spans large area in our society, and depending on how it is used in various contexts, the definition changes.

Interactivity, to me, is the intimate, hands-on interaction with tools, systems, or experiences that change according to your input. It’s about engaging in a conversation with technology such that your actions produce significant, real-time results. This definition places a strong emphasis on having a hands-on, interactive engagement with the digital world in which you interact with technology or media as a conversation rather than just as a means of consumption. Your inputs are met with responsive and developing feedback.

The Significance of Interactivity

Creating responsive, captivating, and—above all—conversational experiences is what makes an experience interactive. It goes beyond simply having buttons to click and menus to navigate. Crawford’s concept, which describes true interaction as a cycle of speaking, hearing, and thinking between the user and the system, forces us to reconsider what true interaction actually entails. The significance of creating systems that can actually “understand” and “respond” to user inputs in a meaningful way is increased by this concept.

Putting Real Interactivity Into Practice

Developers and designers need to give communication flow top priority in their work if they want to achieve meaningful interactivity. This entails developing systems that are able to intelligently analyze user input, deliver pertinent, contextual feedback, and receive input from users. It’s about building an ecosystem in which the system thoughtfully responds to each action taken by the user, encouraging dialogue and a sense of community.

The Future of Interactive Media

Future-oriented, the possibilities for interaction appear endless. Advances in artificial intelligence, machine learning, and natural language processing may allow for ever more sophisticated and customized user conversations in the upcoming generation of interactive systems. Imagine interactive systems that can anticipate our wants and gradually adjust to our preferences in addition to obeying our directions.

Interesting questions

How can designers make sure that consumers are still having meaningful conversations with interactive systems?
How does empathy fit into the process of creating interactive experiences?
How can we keep the human factor in interactive design as AI gets more advanced?