Week 4

Concept

For this week’s coding assignment, I wanted to experiment with generative text, focusing on movement and interactivity rather than static words. My goal was to create a visualization where text on the screen feels like its floating, bouncing, and responding subtly to the viewer’s presence.

The concept I explored was simple: a set of words randomly placed on the canvas float gently in organic patterns. When the user moves the mouse nearby, the words grow slightly, creating a playful and responsive effect. I aimed to evoke a sense of motion and energy, so the text is not just something you read, but something you watch and interact with.

To achieve this, I combined techniques like sine and cosine functions for floating motion, randomized starting positions, and smooth interpolation to make the animation fluid. I also used color variation to give each word a soft, pastel-like appearance, creating a visually pleasing and lively scene.

Code I’m Most Proud

update() {
  // gentle floating motion
  this.x = this.baseX + cos(frameCount * this.speed + this.offset) * 20;
  this.y = this.baseY + sin(frameCount * this.speed + this.offset) * 20;

  // interactive effect: mouse proximity enlarges the word
  let d = dist(mouseX, mouseY, this.x, this.y);
  if (d < 100) {
    this.currentSize = this.size * map(d, 0, 100, 1.8, 1);
  } else {
    this.currentSize = this.size;
  }
}

display() {
  fill(this.color[0], this.color[1], this.color[2], 200);
  textSize(this.currentSize);
  text(this.txt, this.x, this.y);
}

This snippet stands out because it combines two important techniques learned in this assignment: smooth floating motion and  mouse interactivity.

  • The use of sine and cosine functions allows each word to float naturally around its base position, giving the visualization a sense of organic movement rather than rigid animation.

  • The interactive mouse effect enhances engagement: words near the mouse subtly grow. This adds a playful and interactive quality  to the text.

Final work:

Reflection

I’m happy with how the project looks now, but there are ways to make it even more fun and interactive. For example, each word could be broken into small points and animated individually, so the words could form on the screen or scatter when you move the mouse. The words could also have hover effects, like ripples, sparkles, or subtle movement when the mouse is nearby, making the interaction more engaging. Different words could behave differently as well, with action words bouncing faster while nouns float gently, and the words could change color or size based on sound or other data. Additionally, users could add their own words to the animation, creating a personalized experience. With these improvements, the text could go beyond just looking nice and become a fully interactive and playful visualization.

Leave a Reply