This week’s assignment tasked us with creating a generative text piece. I decided to take a slightly different, more artwork centered piece. I used one of my favorite books, “Before The Coffee Gets Cold” by Toshikazu Kawaguchi as an inspiration behind my piece. The book details may different relationships, and I used that as an inspiration for my piece. The code will generate a random paragraph from some predetermined sentences, and display it in the background, establishing a situation. The viewer can then click through the possible relationships it applies to, and try to see how the nature of the relationship may alter the meaning of the generated paragraph.

A section I am particularly proud of is the generation of said sentences, as they are constructed using the random() function, and as such provides different situations each time the page is refreshed.

//generating the text
function generateText() {
  let openings = [
    "'Oh gosh, is that the time? Sorry, I have to go,' the man mumbled evasively.",
    "'I didn't expect this conversation to go this way,' she admitted hesitantly.",
    "'Are you really leaving?' he asked, his voice barely above a whisper."
  ];
  
  let middles = [
    "She looked at him with uncertainty. The clocks in the café all showed different times, adding to the confusion.",
    "His fingers absentmindedly traced the rim of his coffee cup, avoiding her stare.",
    "The sepia-toned café seemed frozen in time, yet everything was changing for them."
  ];
  
  let endings = [
    "'Don’t I deserve an explanation?' she finally asked, breaking the silence.",
    "He sighed, glancing at his watch, knowing there was no easy answer.",
    "Without another word, he stood up and walked toward the exit, leaving her behind."
  ];
  
  // Construct generative text
  generatedText = random(openings) + "\n\n" + random(middles) + "\n\n" + random(endings);
}

The most frustrating part of this assignment definitely was creating each silhouette for the relationships. I wanted to make them seem organic and not blocky-looking, so I had to hardcode each shape into position, which was not difficult, but was definitely tedious. I want to research into whether there is a way to directly import unique shapes into p5.js  so that I can save myself any future struggle similar to this. While the end result is good, this part by far took the longest and most concentration to complete.

One thing that drives me crazy is the poor design of public bathroom sinks. Many of them have automatic sensors for water flow, but the sensors are inconsistent. Sometimes, you have to wave your hands around for the water to turn on, or it shuts off too soon, forcing you to repeat the process. It’s frustrating, especially when you’re in a hurry. This could be improved by using better sensors that recognize motion more accurately or by designing a simple manual option as a backup.

Norman’s principles of design, such as discoverability and feedback, can be applied to interactive media in many ways. For example, in app design, buttons and navigation menus should be clearly visible and intuitive. A good interface should guide the user naturally, without confusion. Norman also talks about signifiers, which are essential in digital design. Websites and apps should have clear indicators—like highlighted buttons or hover effects—to show what actions are possible.

Another principle that applies to interactive media is mapping, ensuring that controls relate logically to their effects. For example, when adjusting volume on a screen, a vertical slider is often more intuitive than a horizontal one, because we associate “up” with “increase” and “down” with “decrease.” Norman’s ideas remind me that good design is not just about looks but about usability. A well-designed interface should be easy to understand and not require a user manual to figure out.

Concept

I wanted to experiment with ASCII art in a dynamic way, using Perlin noise and interactive effects to create an evolving text-based visualization (I got inspired by the Coding Train videos on Perlin noise and this image manipulation + ASCII density coding challenge by him).

Each character is selected based on noise values, and their colors shift over time. As the mouse moves, it creates a ripple effect by “pushing” nearby characters away, giving a fluid and organic motion to the grid.

Demo (Click on canvas)

Code Highlight:

This part of the code uses Perlin noise to smoothly select characters from the density string and generate dynamic colors for each character.

// Using Perlin noise for smoother character selection
let noiseVal = noise(i * 0.1, j * 0.1, frameCount * 0.02) * density.length;
let charIndex = floor(noiseVal);
let char = density.charAt(charIndex);

// Generate color based on Perlin noise
let r = noise(i * 0.05, j * 0.05, frameCount * 0.05) * 255;
let g = noise(i * 0.07, j * 0.07, frameCount * 0.05) * 255;
let b = noise(i * 0.09, j * 0.09, frameCount * 0.05) * 255;

fill(r, g, b);
text(char, newX, newY);

How it works:

• noiseVal determines the ASCII character by mapping noise to the density string length.
• r, g, and b are also mapped to Perlin noise, creating a smooth, organic color transition over time.

Reflection & Improvements for Future Work

This experiment opened up some interesting possibilities for ASCII-based generative art. I’d love to refine the animation by adding more layers of motion, perhaps introducing gravity-like effects or different interaction styles. Another idea is to use real-time audio input to influence the movement, making the piece reactive to sound. Definitely a fun one to explore further!

This reading was both very illuminating and validating, especially in regards to the initial discussion of confusing doors. I had always found UI design to be an interesting topic, and this glimpse into the field of design as a whole was a lot more involved than I was prepared for. I was definitely impressed by how much work goes into properly designing a product, only for the bestowed ease-of-use resulting in users remaining completely oblivious to the effort put in. In that sense, it is similar to how good audio mixing in a song or film will go unnoticed, but bad audio will completely pull you out of the experience. There were also some good points made later on about having to carefully balance the different aspects of design, such as signals and feedback being informative yet unobtrusive, or products being feature-rich while remaining affordable.

As for applying these design principles to interactive media, I am at a bit of a loss. In the past few weeks I have experimented with using simple forms of interactivity like clicking or using arrow keys to move an object in the p5.js scene. These ended up being fairly intuitive in the sense that they are reasonable choices that one would expect when using a computer. However, if the user was not aware that these pieces were interactive to begin with, a huge chunk of the experience is lost. I had left comments at the top of the code detailing the viable inputs, but of course this requires navigating from the WordPress site to the p5.js editor. A straightforward way to deal with this would be to include text instructions in the piece itself, or having some sort of help menu, but I still feel like this would negatively impact the more artistic pieces.

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.