generative text production – In Your Own Words

My project is a generative text artwork called “In Your Own Words.”
The sketch begins with a loose pile of glowing letters near the bottom of the screen. They feel a bit heavy and sleepy, just resting on a soft ground line. When you click on a letter in the pile, it jumps into the air. While it is in the air, you can click it again to “catch” it and turn it into a special fixed letter.
Fixed letters are brighter and calmer. They have a gentle glow and small sparkles when they appear. You can drag these fixed letters around and arrange them into words or phrases that matter to you.
The idea is simple. The sketch gives you a constant stream of random letters, but the meaning only appears when you interact with them. I wanted to apply this randomizing factor to highlight how randomness can have a beautiful meaning; when you choose when to make a letter rise, when to keep it, and where to place it. The artwork is about ownership of language, about turning noise into something that feels like your own voice.
The background slowly shifts in hue so the scene never feels frozen. Time moves, letters bounce, but the words you decide to build stay in place until you move them again.
How the sketch works
Here is a short overview of what happens in the code:

  • A pile of letters is created near the bottom center of the canvas.
  • Each letter has simple gravity and can bounce on the ground.
  • When you click a letter on the ground, it jumps.
  • When you click a letter in the air, it is “fixed” in place as a new type of glowing letter.
  • Fixed letters can be dragged around to form words.
  • A slow animated background adds a soft atmospheric feel.

The piece uses two main classes: Letter for the bouncing pile letters and FixedLetter for the letters that you have chosen and placed.

Code highlight: catching letters in the air
Most of the sketch logic takes place in the mousePressed function. It handles three important actions in a simple and readable way:

  • Start dragging a fixed letter if you click on it.
  • Make a pile letter jump if it is on the ground.
  • Turn a jumping letter into a fixed letter if you click it in the air.

Here is the core part of that logic:

function mousePressed() {
  // Check if clicking on fixed letters first (for dragging)
  for (let fixedLetter of fixedLetters) {
    let distance = dist(mouseX, mouseY, fixedLetter.x, fixedLetter.y);
    if (distance < fixedLetter.size/2 + 10) {
      draggedLetter = fixedLetter;
      dragOffset.x = mouseX - fixedLetter.x;
      dragOffset.y = mouseY - fixedLetter.y;
      return; // Exit early if we're dragging a fixed letter
    }
  }
  
  // Check if clicking on moving letters
  for (let i = letters.length - 1; i >= 0; i--) {
    let letter = letters[i];
    let distance = dist(mouseX, mouseY, letter.x, letter.y);
    
    if (distance < letter.size/2 + 15) { // Slightly larger hit area for pile
      if (letter.isInAir()) {
        // Fix the letter if clicked while in air
        fixedLetters.push(new FixedLetter(letter.char, mouseX, mouseY));
        letters.splice(i, 1);
        
        // Add a new random letter to the pile
        let newLetter = alphabet[floor(random(alphabet.length))];
        let centerX = width / 2;
        let angle = random(TWO_PI);
        let radius = random(0, 150);
        let newX = centerX + cos(angle) * radius;
        let newY = groundLevel - random(0, 60);
        letters.push(new Letter(newLetter, newX, newY));
      } else {
        // Make letter jump if clicked on ground/pile
        letter.jump();
      }
      break;
    }
  }
}

Why I like this section:
It keeps the interaction rules clear. You either drag, fix, or jump letters based on simple checks.
The isInAir() check gives a nice “skill moment” to the piece. You need to click at the right time to catch a letter.
When you fix a letter, the code immediately spawns a new random letter in the pile. This keeps the system open and ongoing. You can always build more.
This small block ties together the main feeling of the artwork: letters flowing, you reaching into that flow, and selecting what to keep.

Here is the full sketch for you guys to play a little and say something in your own words :))

Leave a Reply