Category: S2025 – Mang

Concept & Reflections

Visual Metaphor:
When I created this piece, I envisioned the soft, drifting clouds as a metaphor for the ever-changing nature of our thoughts and emotions. Like clouds that pass through our skies, our feelings are transient and beautiful in their subtlety. The kind words dripping from them represent those gentle, uplifting messages that, although they may seem small at first, eventually leave a lasting impression on our hearts.

Interactive Design:
I designed the clouds to continuously emit letters—a dynamic, ever-changing canvas that mirrors life itself. It feels like these tiny bursts of positivity, dropping down from above, gradually build up over time. It’s a reminder that even the smallest kind words can accumulate and transform our mood, much like a few gentle raindrops can eventually water a parched garden.

Further Exploration:
Working on this project made me realize that there’s so much more to explore. What if, by simply clicking on a cloud, you could change the words, or adjust the drip speed, almost as if you were altering the course of your own thoughts? Experimenting with different color schemes or fonts could also deepen the emotional resonance of the piece, evoking the exact mood you need on a tough day.

For me, this project wasn’t just about code it was about capturing the delicate interplay between fleeting thoughts and the lasting impact of kind words. I hope it inspires you to see how even the softest whispers of positivity can make a profound difference in our lives.

Code im proud of :

// Return the next letter of the word, or null if finished
  getNextLetter() {
    if (this.letterIndex < this.word.length) {
      let letter = this.word.charAt(this.letterIndex);
      this.letterIndex++;
      return letter;
    } else {
      // Option: reset to loop the word
      // this.letterIndex = 0;
      // return this.word.charAt(this.letterIndex++);
      return null;
    }
  }
  
  update() {
    // Slow horizontal drift
    this.x += this.driftSpeed;
    if (this.x > width + this.size) {
      this.x = -this.size;
    }
    // Optionally, add slight vertical oscillation for more life
    this.y += sin(frameCount * 0.005) * 0.5;
  }

• What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

This right-handed desk chair is used in many schools and universities. I remember they had these chairs in my classroom during J-term in Paris, and even during some exams in high schools. The way they are designed doesn’t make it easy for some of us to actually use it efficiently.

1. The work surface is way too small to actually keep all the necessary items on the tabletop. Keep your notebook, you don’t have space for your laptop, or your water bottle, or your pencil case. What’s the point of having a tabletop if it’s too small to use?
2. The chair is quite literally designed for right-handed users. I have left handed friends who considered this chair as their No. 1 enemy. The fact that it isn’t accessible to about 10% of the world’s population speaks for itself.
3. The stability and comfort factor. Since it’s going to be more weighted on one side, there is a high chance of wobbling and falling over. Moreover, these chairs are hard plastic, it’s not the most comfortable or built for prolonged usage.

How can we fix this? Personally, I believe that we can just eliminate this design from the world completely, but as designers we must find solutions, not exterminate problems (sadly). To fix this, I think we should increase the desk surface first. Introduce movable parts and extended writing surfaces for your extra stuff. Number two, consider a left handed version, maybe a side wing that can be tucked away. Finally, consider making the chair more ergonomic, a more comfortable material, and maybe even cushioned.

• How can you apply some of the author’s principles of design to interactive media?

To apply the author’s principles in interactive media, I think we should consider discoverability and human-center designing. For example, using his principle of affordance, we can design a button in such a way that it looks like it is meant to be pressed. Or applying signifiers and using arrows in interactive art. We could apply theory of mapping, and structure a control in a way that users can navigate the page easily. We could also add interactivity to show quick feedback, maybe changing colours on clicking, or audio cues. Finally, we can design conceptual models or basic structures on “how to use” a specific interactive media piece.

Before the reading, I thought interactivity was just another word for engagement. I thought that books, movies and anything with a user interface were interactive. But now, I understand that there is a difference between the two and that the word interactive has been majorly overused specially over the last couple of years and mainly for marketing purposes that it has lost its true meaning. Interactivity is closer to a conversation that includes the metaphoric acts of listening, thinking, and speaking (input, processing, output), while engagement is more of a one-sided conversation where there is only output (content) that the audience reacts to. 

What I consider to be the characteristics of a strongly interactive system is one that has all the features to make it interactive in the first place. It has to receive an input, process the  information and produce an output based on the input. All 3 aspects have to be good, and one cannot be the substitute of the other. Something highly interactive for me would make it easy for the user to input (good user interface), quickly process the information (have an efficient system) and produce an accurate output.

To improve the degree of interaction in my p5 sketches, I would try and work on each interactivity aspect individually so that they’re all equally good. For the input: I’d use more of the key and mouse functions and I would make the sketch more aesthetically pleasing, maybe including simple instructions for the user to understand what he’s supposed to do. For processing, I’d use more variables and OOP instead of hardcoding everything in order to make the code run smoother. And as for the output, I’d try and make sure that the program actually does what it’s supposed to do and that it is accurate in its reactions by testing multiple times.

For this project, I got inspired by an animation of random skulls and so I decided to create random smiling faces since I find that using the arc function is somewhat of a challenge and I wanted to practice.The design is generated dynamically with each frame using random values for color and size to create a unique variation every time. The face is composed of basic shapes, including an ellipse for the head, a rectangle for the neck, and circles for the eyes.

My favorite part of this project was using variables to link the eyes and neck to the face so that they automatically adjust to the face’s size and position.

ellipse(skullX, skullY, skullW, skullH)
let neckX = skullX - skullW/4
let neckY = skullY + skullH/4
let neckW = skullW/2
let neckH = skullH/2
rect(neckX, neckY, neckW, neckH)
let eye1X= neckX
let eye2X = neckX +neckW
let eyeY = skullY - skullH/4

One challenge I faced was making the smile look natural. While the arc function works, I’d like to experiment with other approaches to create a more natural expression.

Things I’d like to improve is  adjusting the background colour. Since, it is  randomized, it sometimes blends too much with the skull, making it less visible. So refining how colors are assigned could enhance the contrast and visibility of the design. Also, I’d like to create random facial expressions instead of just a smile.

Casey Reas’ talk about randomness, the intersection between chaos and order, and how art is a form of manifest result made me rethink my definition of what I consider art. I used to see art as paintings where an artist would express his thoughts using shapes or colours, or music where the musician expresses his feelings through notes. To me, art had to be a byproduct of human expression, random and never perfect. As a result I never thought of anything digital as art simply because there is no human aspect to it. However, Casey Reas’ talk about making something artificial have an organic quality made me reconsider. If we just apply natural randomness or disorder, we can make digital creations count as art. The way I plan to do that is by using human expression as inspiration for randomness, the same way buildings and body tissues were used in Reas’ talk. For example, I’d love to maybe use voice frequencies, heart rhythms or random patterns of brain activity to experiment and incorporate randomness into my work to create expressive digital paintings. 

I feel like the optimum balance between total randomness and complete control is somewhere in between. While randomness introduces unpredictability, making a piece feel organic and alive, control ensures coherence and intentionality. By setting parameters, we can guide the chaos in a way that still reflects human intent. As Casey Reas mentions we are the creators of the code and we can implement constraints even with randomness. 

How are you planning to incorporate random elements into your work?

One way is to think about making it human. Because of the elements of human error especially compared to something like a computer, I feel like  using more of what the human user gives you is a good way to incorporate randomness. Another way is chance. For example, the current games that I play still rely on simulated coin flips that give 50-50 odds. Imprecision is also a great way. It still allows the work to retain its qualities and recognizability, but at the same time, it allows the work to take on a new character and uniqueness.

Where do you feel is the optimum balance between total randomness and complete control?

It is definitely somewhere in the middle; but too little is preferable to too much. Introducing too much chaos and randomness removes from what the work actually is and as the world tends towards chaos, removes the work from being art. However, too much perfection and too much control runs the risk of the same occuring. Things that are too perfect seem to remove themselves from the world of humanity, and in an AI-generated type of way, is very easy for us to spot that it is not real.

What do you consider to be the characteristics of a strongly interactive system?

I think it is the ability to render meaningful change as a result of the conveyance of meaning coming from the user. If we were to conceptualize a very weak interactive system, it would not change at all as a result of user input. This would be like conversing with someone who did not listen to what you had to say and as soon as you were done speaking, reply with “Yes, anyways…” and just continue speaking on whatever they had to say, not making meaning of your input. If we take that the reversal of this would be a strong interactive system, we can consider that a strong system would make meaningful change as a result of user input. Like a conversationalist that actively listens and asks questions pertaining to the content of your input, a good system would have the ability to register meaning in the user’s input effectively, then use the input to meaningfully “reply.”

What ideas do you have for improving the degree of user interaction in your p5 sketches?

Because we are limited, generally, to the hardware of a laptop running the p5 website, the keyboard and mouse are going to be the primary, most accessible methods of input which the basis of user interaction will be built upon. Because of this, trying to at least make the user interact by moving and clicking the mouse is a good idea. Because of how we are trying to increase user interaction, using the keyboard, which is much easier for users to assign meaning to inputs to is also a great idea. Chatbots are the pinnacle of this, where they can assign meaning to the user’s textual inputs and generate a response after “reading” what you wrote.

When Crawford mentions at the beginning of the chapter, “The term interactivity is overused and underunderstood” (3), it surprised me as I always believed interactivity involves physically engaging with technology and allowing them to respond to input. However, Crawford makes it clear with his definition being a “conversation,” since to him, a system isn’t truly interactive if it only delivers what it is supposed to respond; it has to listen, think and speak in a way that adapts over time. Additionally, as he asks questions, and even asked one, “Is interactivity utterly subjective?” It really made opened my perspective on what is interactivity, it suggests to me what feels interactive to one person might not feel that way to another, since it depends on their expectations and prior experiences. As a result, it made me realize that with some of my p5.js sketches and exercises, while technically reactive, it isn’t truly interactive.

With my sketches, they don’t have any aspect of interactivity, but they’re rather responsive, especially my previous assignment (for week 2 on loops), since within the sketch, hitting “Enter” would cause my sketch to go from a monochrome grayscale to random, simultaneous pops of color. With that, I aim for future projects to apply similar aspects of interactivity, rather than having them being responsive to user input.