week4-text display

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 :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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;
}
// 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; }
// 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;
  }

 

Leave a Reply