Week 4 : Generative text

I’m also proud of how the bubbles behave when they’re generated. Perfecting their collision and bounce behavior was tricky—it was difficult to make sure they didn’t overlap or get stuck together without affecting their smooth movement across the screen. It took a lot of experimenting to perfect the constraints that controlled their movement, Despite the challenges, I found it rewarding to see how small tweaks could make such a big improvement in the final product. These interactions made the overall experience feel more dynamic and immersive, which is exactly what I was aiming for with the cosmic theme.

class Fortune {
  constructor(x, y, message) {
    this.x = x;
    this.y = y;
    this.message = message;
    this.alpha = 0; // Start invisible for fade-in effect
    this.timer = 90; // Now lasts for 3 seconds
    this.fadeInSpeed = 5; // Controls how fast it fades in
    this.released = false;
    this.floatOffset = 0; // For a slight floating effect
  }

  update() {
    if (this.timer > 0) {
      this.timer--;
      if (this.alpha < 255) this.alpha += this.fadeInSpeed; // Gradually appear
      this.floatOffset = sin(frameCount * 0.1) * 2; // Subtle floating effect
    } else if (!this.released) {
      this.releaseLetters();
      this.released = true;
    }
  }

  display() {
    if (this.timer > 0) {
      push();
      translate(this.x, this.y + this.floatOffset);

      // Glowing text effect
      fill(255, 255, 255, this.alpha);
      textSize(14);
      textAlign(CENTER, CENTER);
      drawingContext.shadowBlur = 10;
      drawingContext.shadowColor = color(255, 200, 255, this.alpha);

      text(this.message, 0, 0);

      pop();
    }
  }

  releaseLetters() {
    for (let i = 0; i < this.message.length; i++) {
      rainingLetters.push(new Letter(this.x, this.y, this.message.charAt(i)));
    }
  }
}


class Letter {
  constructor(x, y, char) {
    this.x = x + random(-10, 10);
    this.y = y;
    this.char = char;
    this.speed = random(1, 3);
    this.alpha = 255;
  }

  update() {
    this.y += this.speed;
    this.alpha -= 3;
  }

  display() {
    push();
    translate(this.x, this.y);
    fill(255, this.alpha);
    textSize(20);
    textAlign(CENTER, CENTER);
    text(this.char, 0, 0);
    pop();
  }
}

Reflections and Future Ideas

Overall, I really enjoyed working on this project, even though it was a bit frustrating at times. Looking back, I feel like I could improve the overall aesthetic of the bubbles by adding a shine to make them look like they’re reflecting light. I’d also like to enhance the appearance of the text since the current font is quite simple. Another idea I have is to experiment with different styles for the falling letters—and maybe space them out more and slow the fall for a better visual experience, to better match the cosmic theme.