Category: F2024 – Mang

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.

Concept

Imagine a universe where two planets exist on the same orbit. For many years, I’ve been working on fictional stories, and I wanted to bring one of these concepts to life using p5.js for this assignment. The idea emerged a while ago, and although it was inspired by sci-fi media, I can’t say I’m directly mimicking anyone else’s work. The concept for this project is to make the two planets move 180 degrees apart, as if they are locked in orbit, to prevent them from crashing into each other (I’m aware that real planets don’t behave like this). This is how the project began. During the planning stage, I used Adobe Photoshop to composite some images, which helped me visualize how I would approach the project.

The Procedure

First, I began by creating functions to generate the stars. I didn’t want the stars to move, but they needed to be positioned randomly. The following code snippet demonstrates how I randomly generated the stars and created another function to store their positions.

// Function to generate stars and store their positions, size, and color
function generateStars(numStars) {
  for (let i = 0; i < numStars; i++) {
    let x = random(0, width);  // Random x position
    let y = random(0, height);  // Random y position
    let size = random(1, 3); // Random size
    
    // Colors for stars (magenta, blue, yellow, and white)
    let colr = [color('magenta'), color('blue'), color('yellow'), color(255)];
    
    // Store each star's position, size, and color
    starPositions.push({
      x: x,
      y: y,
      size: size,
      colr: random(colr)
    });
  }
}

// Function to draw stars from stored positions
function drawStars() {
  for (let i = 0; i < starPositions.length; i++) {
    let star = starPositions[i];
    
    stroke(star.colr);  // Set color for each star
    strokeWeight(star.size); // Set size for each star
    point(star.x, star.y);   // Draw the star
  }
}

In this project, I used various functions, including one to detect comet collisions with planets and another for collisions with the sun. The comets were created using a class and stored in a dynamic array, making memory management simpler compared to other programming languages. The project involved a lot of mathematical concepts, especially for the comet class, and I drew inspiration from p5.js projects and AI-assisted planning. I experimented through trial and error to execute certain parts.

Code I’m most proud of:

The code I’m most proud of is the Planet class, which brings the entire concept to life using trigonometry. By applying cosine and sine functions to measure angles, I was able to make the planets behave as intended. This idea came from Google searches. Here’s a snippet of my Planet class:

class Planet {
  constructor(size, colr, strokecolor) {
    this.size = size;
    this.colr = color(colr);  // Fill color
    this.strokecolor = strokecolor;  // Outline color
    this.x = 0;  // X position (calculated later)
    this.y = 0;  // Y position (calculated later)
    
  }

  // Update the planet's position based on the angle and radius
  update(angle, radius) {
    this.x = width / 2 + cos(angle) * radius;  // X position
    this.y = height / 2 + sin(angle) * radius; // Y position
  }

  // Show the planet
  show() {
    stroke(this.strokecolor);  // Outline color
    strokeWeight(2)
    fill(this.colr);  // Fill color
    ellipse(this.x, this.y, this.size);  // Draw the planet
  }
}

In my draw function, I used the following code, utilizing the principles of Object Oriented Programming to bring this idea to fruition.

// Update and draw the planets
 planet1.update(angle, radius);
 planet1.show();
 
 planet2.update(angle + PI, radius);  // The PI angle ensures planets are always opposite each other
 planet2.show();
 
 // Increment the angle for continuous rotation
 angle += 0.01;

 

The Final Project:

 

Reflection:

For this project, I was a bit ambitious when I first started. I prioritized realism over functionality to give the viewer a great experience. However, I learned that this wasn’t necessary and settled for a simpler approach using Object-Oriented Programming. After reading The Art of Interactive Design, I realized my final project lacked key elements of interactivity, like even a simple mouse click. In my defense, I removed interactivity because, in the storyline, humans don’t have the power to move objects in space. However, I would improve the project by adding music, moving stars, mouse-click-generated comets, and perhaps better visuals. I faced challenges in ensuring the planets always rotated 180 degrees apart, but after solving this, I was amazed at what code can achieve. I’m excited to see what it can do with more advanced graphics in the future. For now, this is it.

 

Chris Crawford’s explanation of interactivity as a conversation between two actors really made me think differently about interactive systems. Before reading this, I thought any program that responded to user input was “interactive.” But Crawford’s idea that true interactivity needs both sides to listen, think, and speak challenged my assumptions.

Example of the refrigerator light made me laugh, but it also got me thinking – how much “thinking” does a system need to do to be truly interactive? I started looking at apps and websites I use daily in a new light. Many of them just react to clicks without really processing or responding thoughtfully. Are they really interactive by Crawford’s definition?

I found myself agreeing with Crawford’s point that good interactivity needs both actors to do all three steps – listen, think, speak – well. Based on those ideas I think the key characteristics of a strongly interactive system are: good listening, thoughtful processing, and clear communication. Those characteristics reminded me of frustrating customer service chatbots that clearly don’t understand what I’m saying. Even if they respond quickly, the interaction feels hollow because the “listening” and “thinking” parts are weak.

This reading has me wondering how I can make my own p5 sketches more deeply interactive. Instead of just reacting to mouse clicks, how can I build in more “thinking” to create a back-and-forth with the user? Maybe I could track user behavior over time to generate more thoughtful responses. Crawford’s ideas have inspired me to push beyond surface-level interactivity in my work.

Concept
For this project, I wanted to create something that felt alive and ever-changing. I’ve always been fascinated by fireworks and how they burst into these beautiful, fleeting patterns. So, I thought, why not bring that magic to the screen? That’s how I came up with this particle system where colorful dots zoom around and then explode into tiny fragments. It’s like having a never-ending fireworks show right on your computer!  The overall concept is to create a dynamic, self-sustaining system of particles that move, expire, and regenerate. Each particle has its own lifecycle, moving across the screen before exploding into smaller particles. This creates a constantly evolving visual experience that’s mesmerizing to watch.

Code snippet
The part of the code I’m most excited about is the explosion effect. It was tricky to get right, but when it finally worked, it felt amazing. Here’s the snippet with comments:

explode() {
  this.alive = false;
  for (let i = 0; i < 20; i++) {
    // Create 20 small particles for explosion effect
    this.explosionParticles.push({
      x: this.x,
      y: this.y,
      // Random x, y velocity and random size 
      vx: random(-2, 2),
      vy: random(-2, 2),
      size: random(1, 5),
    });
  }
}

This bit of code is where the magic happens. When a particle’s time is up, it bursts into 20 smaller particles, each with its own direction and size. It’s simple, but it creates this really cool effect of explosion.

Challenges
Getting the explosion effect to look good was probably the biggest challenge. At first, the explosions looked too uniform and boring. I had to play around with the random velocities and sizes to make them more interesting. Another tricky part was managing the lifecycle of particles and their explosions. I had to be careful about when to remove particles from the system to avoid memory leaks.

Sketch

Reflection and ideas for future improvements
Reflecting on this project, I have to admit it was really challenging from the get-go. Coming up with a creative idea was a struggle, as it often is for me. I spent a lot of time just staring at a blank screen, trying to think of something interesting and visually pleasant. Even after I finally settled on the exploding particles concept, making it look good was another hurdle. At first, it just looked like a bunch of circles moving randomly around the screen – nothing special. I had to really push myself to refine the visuals and add the explosion effect to make it more engaging.

Looking ahead, I’d like to explore and create more different explosion patterns. Maybe some particles could spiral out, or form shapes like hearts or stars when they explode.

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.

After reading the excerpt from Chris Crawford’s “The Art of Interactive Design” I am excited to explore my own personal definition  of what interactivity is and how I can apply it to what we create in class. I think I would also use the three categories Crawford gave us to determine whether or not something is interactive. Listening, speaking, and thinking seem to be the standard for ‘quality interaction’ so I believe we should also apply them in our design process. I think the listening part might be the most difficult to implement because I’m not exactly sure how that would be done creatively.

To improve the user interaction in my P5 sketches I think even just consciously asking myself, is this program listening, thinking speaking, will show results in one way or another. However, to go further, I think I’d like to let my imagination go a bit further and consider what I’d enjoy interacting with. So far, I have been limiting myself to rather simple projects because I was afraid of the more daunting aspects of implementation. Using these three key standards I think even implementing my ideas will be easier because I can ask myself, well how do I do this? Ok, if the program is ‘thinking’ about what the user wants, maybe I can code a few options for the program to choose from based on user input and what it hears.

Similar to what Reas seemed to be advocating for, I think Crawford wants us to think a bit more abstractly. Whether or not something is interactive might be a harder question to answer than what one might expect and can be debatable in many different contexts.

 

Chris Crawford provided, in my opinion, a great explanation for what people think interactivity is, and how it should look like in real. Although some might find the author’s claims surprising, I, personally, always had pretty much the same thoughts on the matter of interactivity. I am not sure when Chris Crawford wrote this, but it seems that the word “interactivity” is still quite often overused and, perhaps, even misused or confused with the words react or participate.

The thing that I see differently though, is I believe we should clearly separate the interactivity with people and the interactivity with machines. While the former should obviously “listen, think and speak”, the latter can be limited to “taking in and responding”, and maybe add “processing” in between. The strongly interactive system, as I see it, would include all three of these features, and would obviously allow us, users, to influence the outcome. Nowadays, with the rise of Generative AI, interactivity with machines is moving on to a completely different and advanced level, and the goal of people working in the interactivity design industry is to keep up with the fast pace of new technologies to be able to integrate them into the work they create for users.

Another idea from the reading that I liked is of mixing the “art” and the “code” people as it can indeed enhance the experience we get from using the technologies. It is important to have a diverse set of skills and knowledge, and back-end programmers who can also understand the goals of graphic/UX/UI designers (and vice-versa) can significantly improve the level of work. It is interesting to see such a mix even in our class – people who were majoring in Computer Science or other technical (and direct) disciplines throughout the whole time in the university come to Interactive Media class to learn about art.

As I have mentioned in the conclusion of my Assignment 3 blog post, my goal for the next assignments will be to add interactivity to what I create. Of course, I will not be able to do it on an advanced level yet, but I certainly want my work to give a certain response – audio and visual. For my midterm, I am considering creating a game, which is an example of interactivity, at least by my own definition of this word.

 

There are two key questions that arise after reading Chapter 1 of ‘The Art of Interactive Design’. The first is: What are the characteristics of a strongly interactive system? For the second question, stay with me until the end of this response to find out; I promise it will be worth it. Before addressing these, I’d like to share my analysis of Chapter 1 and my thoughts after completing it.

Although the book was first published in 2002, its concepts remain relevant in 2024. I fully agree with the author’s argument that technology buzzwords are often overused and misunderstood. At the time of the book’s writing, “interactivity” was the buzzword in question. When we examine this closely, it becomes clear that this is largely driven by the capitalistic nature of the tech industry. Buzzwords are used because they help sell products, even if their meanings are diluted. This is equally true today with terms like “innovation” and “AI,” which are frequently misapplied to make a profit, often without a deep understanding of their implications.

This chapter offered insightful ideas, and I was particularly drawn to the concept of viewing interactivity as a conversation between two actors, where listening, speaking, and thinking all play critical roles in designing an interactive experience. The author’s approach is notable in that he shifts the definition of interactivity from a simple yes-or-no concept to a hierarchical structure, allowing us to assess interactivity from a subjective perspective. I personally agree that interactivity is subjective, given the diversity of the world’s population. What may be considered highly interactive in one part of the world might be seen as only moderately or minimally interactive elsewhere. The author strengthens his argument by clarifying what is not interactive, such as mere reaction or participation, and provides strong examples that are difficult to refute.

While the author’s arguments might seem somewhat biased towards interactive design, I find myself in agreement with most of them. He argues that a true interactive designer incorporates all three key elements—listening, speaking, and thinking—while a user interface designer typically excludes the thinking aspect, reducing interactivity. Many technologies that we use today, such as Spotify, smartphones, and gaming consoles, lack all three aspects of interactivity. For instance, while Siri can listen and speak, it doesn’t truly “think” independently yet. Despite this, humans continue to interact with these technologies frequently! This raises the question of whether these technologies were designed by user interface designers or whether these designers have somehow adopted the three key elements of interactivity. It also prompts a deeper examination of the author’s critique of designers who may have less expertise in the arts and humanities but are still creating interactive systems.

Now, the question you’ve been waiting for: What ideas do I have for improving user interaction in my p5 sketches? After reading this chapter, I plan to focus on integrating the elements of listening and speaking to make my sketches more interactive. Once I have mastered these two aspects, I will work on incorporating the third element—thinking. This will undoubtedly be a challenge, as figuring out how to make a p5 sketch “think” is no small task. However, it will be an exciting journey to explore how this can lead to truly interactive creations.

Crawford’s paper was remarkable in re-shaping my understanding of what makes something interactive, and how to approach the definition of the very term

At first, I also agreed with his statement about seeing as a conversation between two entities. This reminded me of one of my literature classes, where we discussed reading a paper is like the author trying to have a conversation with us. However, as I am writing this, and after reading the paper, perhaps I was mistaken to agree with this argument, as a conversation requires some degree of back-and-forth, which is something that papers and books do not do. Unless you consider it from a technical sense – if you are reading a book from a Kindle, where there are tons of buttons and opportunities to interact with the book e.g You can highlight any word, and it will look up the definition for you. That is seen as interactive, but reading from a physical paper does not allow users to have that sort of reaction.

This prompted me to question – what is the distinction between a reaction and an interaction? Which the author conveniently brings up at the right time. He brings up the situation of a tree branch falling, and the way he responds – that response does not prompt the fallen branch to suddenly get up and start flying around – it is still still. This example helped me to understand the difference. Once the user reacts to the prompt or situation, the other entity must react and continue as per the user’s actions and word.

What also deepened my understanding of interactivity is Crawford’s example of the Nintendo Fridges. He argues earlier that interactivity should be entertainment, but there are nuances to this statement. He explains that though adults may find a fridge to be mundane, children would like, as they can “play” with its lights by closing and opening the door. He explains that the fridge is still interactive, albeit uniquely. I learnt that interactivity has different grades: High, moderate, low, and none. An item like a fridge has low interactivity, but reading from a Kindle has a high interactivity. I found Cicero’s statement on the notion of interactivity very appealing. I discovered the notion of “imitation” in the interactive sense — I learnt that reading is an activity that imitate the idea of interactivity — as our emotional capacity is exercised there, thus alluding to the idea of interactivity, it not truly interactive. Additionally, Cicero believes “Fuller nourishment comes from the living voice.” – Another (biological) entity provides you with the intimacy that deepens your correspondences and actions with someone or something. Which made me think about the difference between interactive technical projects, and interactive human projects.

When Crawford moves on to performance, it helped me to understand how important the role of an audience is. I discovered that the larger the audience might be, the more challenging it might be to interact with them. In the theatrical world, it takes a large cast to be able to execute this – as you would have to break the fourth wall in order to deem a play as interactive. This instantly reminded me of interactive still lives. It is when an actor or the cast pose as part of an environment, allowing the audience to manipulate the scenery using their body. For example, if the scenery is a forest, then one actor may pose as a tree — and the audience ‘walks’ through this forest (keeping in mind this is a still life therefore the actors don’t move), and they play around with their environment. The audience would shape scenery by moving around the arms of an actor to make the tree appear wider, or perhaps, making them lay on the ground to show that is has fallen. That is an example of interactivity in performance, which Crawford argues barely exist.

He also argues at the end that “good interactive design integrates form with function”, which I sort of struggled to grasp as I did not understand what he exactly meant by form as it was sort of slapped on at the end, but I assume that he means that those who are in charge of interactivity must step out of convention to make a good interactive design.

My goal for Assignment 3 was to combine the knowledge about loops, OOP, and arrays with the idea of controlled randomness while still using basic shapes (the art of simplicity :)). At first, my main plan was to try to replicate one of the most famous scenes from the movie “Interstellar”, where the main character finds himself inside the so-called Tesseract, – the 4-dimensional space, that looks like a huge library made from strings (check the video if interested).

So it was decided. I will use lines as a main part of my artwork. I wanted for lines to form something similar to what I saw in that movie scene. However, pretty soon I realized that I was not getting the result I wanted. This is probably because I like this movie so much that I can’t look at any replicas that are not as good as the movie itself. So I abandoned this idea.

Working Process

Nevertheless, I did not abandon the idea of using lines as well as the idea of them crossing each other on the canvas. This time I decided to use the black canvas and instead of using completely random colors like I did for Assignment 2, I decided to create a palette from which the colors would be chosen. The black background ideally matches the neon colors, so I googled and asked ChatGPT for the RGB codes of colors, and chose the ones I liked the most. As for the movements, I also decided that I should make more orders compared to my previous assignment, so I decided to make lines emerge from the left side and top and go towards the right side and bottom respectively. The challenge that I faced straight away was to find a way for the lines to draw themselves smoothly from the beginning to the end without ‘teleporting’. Using the internet, p5.js Reference page, and TheCodingTrain video I implemented lerp().

Next, I decided to make the lines disappear over time – again, to avoid too much chaos on the canvas that happened with “Going Through Life”. To make this happen, I used already familiar Alpha value to increase the transparency of lines over time. I also implemented red(), green(), and blue() functions to make colors consistent while fading.

The most difficult part

Since I gave up on the idea of replicating the scene from “Interstellar”, I clearly needed to come up with something else. Referring back to the Casey Reas’ video that I watched last week, I decided that my lines should change the direction. Once again, I decided to implement the idea of controlled randomness, so my lines would change direction under the limited range of values after they pass the middle of the canvas. It was the challenging part because I was not sure how to approach the code. At first, I was thinking of simply drawing two separate lines, but it was too much hardcoding, so I decided to simply search the internet once again. I found the amazing function map() that is used to play with translating the scales and measures of distance. Thanks to the Reference page and TheCodingTrain video, as well as a lot of debugging, I finally reached the desired result.

drawSelf() {
    if (this.alpha > 0) { // line disappears when alpha goes below 1
      stroke(red(this.color), green(this.color), blue(this.color), this.alpha); // fading color is the same as the line's
      strokeWeight(2); // you can play with it to make line bigger/smaller

      // drawing horizontal line
      if (this.vert_vs_horiz === "horizontal") {
        let xMovement = lerp(this.x1, this.x2, this.lifespan);  // using lerp to implement smooth drawing 

        // controlling the randomness - drawing straight before middle of canvas
        if (xMovement < width / 2) {
          line(this.x1, this.y, xMovement, this.y); 
        } else {
          // after middle of canvas is reached, can change the direction
          let curveY = this.y + map(xMovement, width / 2, this.x2, 0, this.change_dir_angle);  // using map to project the initial path of line on the change in direction starting in the middle of the canvas
          line(this.x1, this.y, width / 2, this.y);  // before middle
          line(width / 2, this.y, xMovement, curveY);  // after middle

The Meaning of my Art Piece – The Path

Halfway through writing my code, I started to think of what it reminds me in a more philosophical kind of way. For me, the drawn lines look a lot like people. The set of colors represents characters and types of personalities. We have similarities, yet we all have different paths in our lives, we are going the different roads and chasing different dreams and goals. At the same time, very few people actually stick to their dreams and keep going down the path they believe they belong to. In my code, change_dir_angle represents the deviation from the initial path the person was pursuing. If this deviation is too big, it means the person abandoned his dream or goal. If this deviation is in the “adequate” range, it means the person did not give up on his dream or goal, and successfully reached it. That is why I decided to add the animation of a circle at the end. It marks the achievement of “success”. Of course, this is oversimplified, but these are the thoughts and the meanings that I inserted into my work.

Just for the fun and the beauty of it perhaps, I added the mouseIsPressed() to make an option to freeze the screen and look at how the lines were drawn.

Thank you for your attention!

Conclusion

I really enjoyed working on this assignment and was glad to see the result that I achieved. It is interesting to notice how the things we like can inspire us to apply the ideas and meaning to something we create. In contrast to the previous assignment, I did not try to superficially plug the philosophical context into my artwork – it came by itself.

As I have mentioned before, my primary goal for the Intro to IM class is to learn how to think outside the box and expose myself to art. I feel like this assignment brought me a little bit closer to this, so I am satisfied with the result.

Reflecting on my code, I think I did a good job in keeping it simple yet implementing the functions that I encountered for the first time. As for the other things that I could implement, I was thinking about making the additional lines go from the right to the left sides and from the bottom to the top, but I decided that it would be too chaotic and not as minimalistic to see. Other than that, I could probably make the effect for the lines crossing with each other – something similar to the circles, but maybe slightly different.

In my future projects, I will try to stick to the same level of randomness that I have created today, or maybe even less. I will try to create more interactivity, especially in my midterm project. I am not quite sure what I will do, but I still have time to think about it. Can’t wait to see what I and other people will come up with!