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. 

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.