Author: Tinh Ngo

In my opinion, a strongly interactive system should effectively incorporate all three aspects the author mentions in The Art of Interactive Design: listening, thinking, and speaking. I think that video games are a good example of an interactive system, hence to illustrate these characteristics, I will use a recent game I played, It Takes Two.

Regarding listening, It Takes Two, like many storytelling games, implements this by “listening” to the user’s input. In other words, the game adapts its narrative based on what the participants choose or want to experience. It Takes Two tells the story of a couple on the verge of breaking up, who are brought back together by their daughter-a very relatable story that touches on the theme of family.

The second aspect is thinking, which, in my view, is not always the best metaphor for interactivity when applied to machines. The concept of thinking is vague, and we usually associate it exclusively with humans. Despite that, I interpret “thinking” as the system’s ability to process information, or the mechanisms the designer employs to create meaning. In games, I see thinking as the game mechanics. For example, It Takes Two requires tasks to be completed by two players, which demonstrates how the system accepts input and processes it.

The last aspect is speaking. It Takes Two uses the adventure through the couple’s old possessions to retell their past, implementing “speaking” by showing how the interaction unfolds. This aspect prompts the user to react to the machine.

When discussing interactive design, I think most people tend to focus on the speaking aspect-the demonstration-more than on the other two factors. However, for an interaction to be well-executed, all three aspects need to work in harmony. I often fall into the trap of focusing solely on demonstration. In future projects, I want to focus on incorporating more meaningful interaction mechanisms and exploring how they can better convey the story.

Idea

For this assignment, I was inspired by how fireflies blink synchronously in the night. At first look, it might seem like they are just flashing their light randomly, but they are actually communicating with each other through the blinking.

I thought this was very ingenious of them, so I want to replicate this into coding. My idea is having a main firefly interacting with other fireflies. Whenever the main firefly (cursor) is near any other fireflies, they will start talking (blinking!) with each other.

Implementation

To execute my idea, I use two class – one for the main firefly and one for the rest of the swarm. I use the class Swarm as a subclass of Firefly to reduce repetitive coding, using some shared variables (eg. glowing, size, x, y) and overwrite the move function for the difference in the movement between the main firefly and the swarm.

First, let’s talk about the main firefly. I took reference from delayed mouse following code by kjhollen (https://editor.p5js.org/kjhollen/sketches/rJItdyEt-). For the continuous glowing light, I increase and reduce the size of the shadow to create effects of glowing as in the code below

glowing(){ //blinking of firefly light
    //if the glow size is bigger than 40, set glow to false and decrease size
    if (this.size>40){
      this.glow = false;
    }
    
    //if size is negative, set glow to true and increase the size
    
    if (this.size < 0){
      this.glow = true;
    }
    
    if (this.glow == true){
      this.size += 1;
    }else if (this.glow == false){
      this.size -= 1; 
    } 

  }

For the Swarm, most remain similar. The main difference is the swarm only glow when the cursor is near, to which I implement this code to check the condition

blinking(){
  // blink if main firefly is within 100 distance
  let distance = ((this.x - mouseX)**2 + (this.y - mouseY)**2)**(1/2);
  
  if(distance < 100){
    this.on = true;
  }else{
    this.on = false;
  }
}

I use an array to keep track of all (40) fireflies on the screen:

let fireflies = []; //list of all fireflies
 
function setup() {
  createCanvas(400, 400);
  colorMode(HSB,360,100,100,100);
  
  let x = 50;
  let y = 50;
  
  //create 40 fireflies with random positions
  for(i= 0; i<40; i++){
    fireflies.push(new Swarm(x,y));
    x = random(300);
    y = random(300);
  }
  
}

 

Final Piece

Reflection

For this assignment, I am happy with how my vision turned out like what I imagined. The fireflies glow together creates an eye-pleasing composition and interesting piece in my opinion. However, I would like to improve on the glowing pattern – the blink still happens randomly without a clear pattern. In addition, I would also like to try different representation of fireflies to further replicate the experience.

One of the key takeaways for me from Casey Reas’ talk is the importance of a ruleset in creating beauty from randomness. I was impressed by the amount of time and effort Reas and his team dedicated to experimenting with shapes – they created more than 1,000 compositions to explore patterns (11:20) . They observed and connected the pieces, then determined which rules to apply to restrict randomness and create stronger compositions.

The idea of developing concepts on paper before writing code also stood out to me. I think the notion of “play” is more effectively expressed through physical materials first, and then translated into code. This approach helps prevent getting sidetracked by implementation details and allows for more focus on the idea itself.

However, I do question the meaning of relinquishing control when creating art. Artists usually have specific intentions – such as what tools to use or how to arrange shapes. Without a ruleset, I feel that randomness can obscure the meaning of a piece. In creating my own art, I want to maintain control over what is in the picture, but I can incorporate randomness by allowing a range of inputs. For example, instead of using a single fixed shape, I could introduce an array of shapes and leave the selection to chance. In general, I think randomness is an intriguing element I would like to attempt at integrating into user interaction.

For inspiration, I found some online references with patterns created by combining similar shapes. Most of these combinations resulted in forms that resembled flowers.

Flower Pattern

I drew a connection between using a shape multiple times to draw a pattern and using loop in p5js. My idea is using the same shape, with elements of randomness to create a different flower every time the user interacts with the canvas.

Challenge

When creating this piece, what I found particularly challenging was using the rotate() function to position the petals around the center (the mouse cursor). However, the rotate() function in p5.js only allows rotation around the origin (0,0), so I had to use translate() to change the origin to the mouse cursor’s position. This quick fix created a problem later when I wanted the flowers to remain permanently on the canvas instead of disappearing every time the mouse was released.

For drawing the flowers, I created two functions: one to draw flowers with squares and one with ellipses. They are similar in essence except for the change in shapes used to draw.

function squareFlower(x,y,size,fcolor){
  //repeat drawing the square with the rotation of angle until the 360 degree is full
  for(let i =0; i<(360/angle); i++){
    rotate(angle);
    stroke(fcolor[0], fcolor[1],fcolor[2]);
    fill(fcolor[0], fcolor[1],fcolor[2],fcolor[3]);
    rect(x,y,size);
  }
}

Finally, I included random attributes like shape, petal size, and angle of rotation to create different flowers. I also adjusted the opacity of the shapes to create a more interesting composition. To make it look more like flowers, I implemented an increase in shape size over time when the mouse is pressed, creating a blooming effect.

Final Sketch

Reflection

After finishing the sketch, I tried to make the flower appear permanently on the screen instead of disappearing, but I couldn’t because the flowers are drawn based on their rotation around the origin (which changes for each flower). When I revisit this in the future, I want to change the drawing of the flowers from using the built-in rotate() function to using math to calculate the new coordinates. This will allow the flowers to be drawn independently of the origin’s location. Another issue is that some shapes in the flowers are overlapping, which I think stems from the calculation of the rotation angle. I will also try to improve this calculation in future sketches.