Month: September 2024

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!

 

 

By all means, this passage intrigued me first by its plain and candid tone and the approach to start with ‘trying’ to define instead of throwing jargon and how the author concedes to potential arguments and circumvents them. As a person who loves to define terms and concepts – for a particular context, of course – I found that I much echo my own habit.

Hence, even though I do not 100 percent agree with the statements (although I appreciate that brave attempt to disentangle and establish something beyond old paradigms, a new paradigm), at least for now, the author successfully grasped my willingness to ‘listen’ to the message.

Ironically, despite the author negating words as an ‘interactiveable’ media, the words of the passage did evoke some sort of interactive process in my reading process according to the definition given (although it could be again argued that reaction is not interaction, etc.)

Indeed, I strongly concur with the idea that definitions should serve as guidance rather than constraints, particularly for concepts like interactivity that are swiftly evolving, as mentioned by the author. Sometimes, I hesitate to offer definitions in conversations for fear of appearing imposing to others, when in reality, my aim is not to assert an absolute truth but to establish a ground for my understanding.

While the author’s spectrum to evaluate interactivity from low to high and placing them in contexts of the interacter involved makes much sense to me, I’d still like to not argue but bring up an idea from theater given it is denied to be decently interactive by the passage. Also, starting with definitions, an academically common definition of theater could be ‘a relation between the actor and the spectator.’ This approach to constructing the definition actually resembles the author’s. As the author here tackled the tricky arguments of what counts for an actor in the interaction by dividing different levels of interactivity, it similarly reminds me to maybe use this approach to explain the question in theater definition: what constitutes a spectator or an actor; do they have to be aware of their action or not; etc.

On top of that, I found Socrates’ words very much relatable. That inactive nature of words – the creator cannot protect or explain them or themselves after the creation – is something that bothered my expression in many cases as well, whether in poetry or speech, whether with a real person or anonymously online.

Nevertheless, when it comes to what can be regarded as a strong interactive system, the answer seems hidden within the definition already – only depends on how we interpret those three stages. In terms of ‘listening,’ it could deal with how much it can listen, how fast it can listen, how many types of things it can listen, how obvious or undercovered it can listen, plus when, where, and other Ws. Similarly, with thinking, it really touches the black box of unlimited possibilities. But in simplest words, I would put it here as ‘the extent to which the information listened can be used and processed to present and serve as a whole to reflect the message of the system.’ Eventually, for the speaking, it seems to me that it’s a matter of picking and developing the niche method to communicate information, aka the role of media. When all three stages are carefully designed in a well-rounded manner, it may qualify as a strongly interactive system.

‘Show but not tell’ goes a long way in theater and other performative arts, and maybe for this time, we should not only satisfy with showing but reach beyond it – with whatever we have.