Month: September 2024

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.