AI Gravity Text - Type Letters That Fall and Stack

This sketch creates an interactive physics simulation where each character you type falls from a random position at the top of the canvas and tumbles down with gravity. Letters collide with each other and bounce off the bottom and sides, stacking up like physical objects. Vowels appear in cyan while consonants appear in red, and pressing SPACE causes all letters to explode upward in a burst of chaos.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Physics simulationGravity and velocityCollision detectionArray filteringEvent handlingCanvas resizingColor and transparencyText renderingConditional logic

🔄 Code Flow

Code flow showing setup, physics, draw, keypressed, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> canvas-setup[Canvas and Drawing Configuration] setup --> input-creation[Text Input Creation] setup --> input-listener[Input Event Listener] input-listener --> space-skip[Space Character Skip] space-skip -->|No| input-listener space-skip -->|Yes| input-listener setup --> draw[draw loop] draw --> background-clear[Canvas Clear] draw --> instruction-text[Instruction Display] draw --> physics-call[Physics Update] draw --> lifetime-filter[Letter Lifetime Management] draw --> render-loop[Letter Rendering] render-loop --> vowel-check[Vowel Detection] vowel-check --> color-assignment[Dynamic Color Based on Letter Type] draw -->|repeat| draw click setup href "#fn-setup" click draw href "#fn-draw" click canvas-setup href "#sub-canvas-setup" click input-creation href "#sub-input-creation" click input-listener href "#sub-input-listener" click space-skip href "#sub-space-skip" click background-clear href "#sub-background-clear" click instruction-text href "#sub-instruction-text" click physics-call href "#sub-physics-call" click lifetime-filter href "#sub-lifetime-filter" click render-loop href "#sub-render-loop" click vowel-check href "#sub-vowel-check" click color-assignment href "#sub-color-assignment" draw --> keypressed[keyPressed] keypressed --> space-check[Space Key Detection] space-check -->|Yes| explosion-loop[Explosion Effect] explosion-loop -->|repeat| explosion-loop space-check -->|No| keypressed click keypressed href "#fn-keypressed" click space-check href "#sub-space-check" click explosion-loop href "#sub-explosion-loop" draw --> windowresized[windowResized] windowresized --> resizeCanvas[Resize Canvas] click windowresized href "#fn-windowresized" click resizeCanvas href "#sub-resize-canvas" physics --> gravity-loop[Gravity and Boundary Physics] gravity-loop --> side-bounce[Side Wall Collision] side-bounce -->|Bounce| gravity-loop side-bounce -->|No Bounce| gravity-loop gravity-loop --> floor-bounce[Floor Collision] floor-bounce -->|Bounce| gravity-loop floor-bounce -->|No Bounce| gravity-loop gravity-loop --> letter-collision[Letter-to-Letter Collision Detection] letter-collision --> collision-resolution[Collision Response] collision-resolution -->|Overlap| letter-collision collision-resolution -->|No Overlap| letter-collision click physics href "#fn-physics" click gravity-loop href "#sub-gravity-loop" click side-bounce href "#sub-side-bounce" click floor-bounce href "#sub-floor-bounce" click letter-collision href "#sub-letter-collision" click collision-resolution href "#sub-collision-resolution"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It initializes the canvas, configures drawing settings, and creates the input field with an event listener. The input listener is clever—it only creates letter objects for NEW characters by tracking lastLen, avoiding duplicate processing.

function setup(){
  createCanvas(windowWidth,windowHeight);
  rectMode(CENTER);textAlign(CENTER,CENTER);textSize(28);
  inp=createInput('');inp.position(10,10);inp.size(260);
  inp.input(()=>{
    let v=inp.value();
    for(let i=lastLen;i<v.length;i++){
      let ch=v[i];if(ch===' ')continue;
      letters.push({x:random(w,width-w),y:0,vx:random(-1,1),vy:0,ch,t:millis()});
    }
    lastLen=v.length;
  });
}

🔧 Subcomponents:

calculation Canvas and Drawing Configuration createCanvas(windowWidth,windowHeight); rectMode(CENTER);textAlign(CENTER,CENTER);textSize(28);

Creates a full-window canvas and configures how rectangles and text are drawn (centered)

calculation Text Input Creation inp=createInput('');inp.position(10,10);inp.size(260);

Creates a text input field at position (10,10) where users type characters

for-loop Input Event Listener inp.input(()=>{ let v=inp.value(); for(let i=lastLen;i<v.length;i++){ ... } lastLen=v.length; });

Listens for text input changes and creates a new letter object for each new character typed

conditional Space Character Skip if(ch===' ')continue;

Skips creating letter objects for space characters

Line by Line:

createCanvas(windowWidth,windowHeight);: Creates a canvas that fills the entire browser window, making the sketch responsive to window size
rectMode(CENTER);: Sets rectangle drawing mode so that coordinates represent the center point, not the top-left corner
textAlign(CENTER,CENTER);: Centers text both horizontally and vertically at the coordinates where it's drawn
textSize(28);: Sets the font size to 28 pixels for all text rendering
inp=createInput('');: Creates a text input element and stores it in the inp variable so we can access what the user types
inp.position(10,10);inp.size(260);: Positions the input field 10 pixels from the top-left corner and sets its width to 260 pixels
inp.input(()=>{ ... });: Registers a callback function that runs every time the user types or deletes a character in the input field
let v=inp.value();: Gets the current text from the input field as a string
for(let i=lastLen;i<v.length;i++){: Loops through only the NEW characters added since the last input event (from lastLen to current length)
let ch=v[i];if(ch===' ')continue;: Gets the character at position i and skips it if it's a space (spaces don't create falling letters)
letters.push({x:random(w,width-w),y:0,vx:random(-1,1),vy:0,ch,t:millis()});: Creates a new letter object with random starting x position, zero y position (top of canvas), small random horizontal velocity, zero vertical velocity, the character itself, and a timestamp
lastLen=v.length;: Updates lastLen to the current input length so next time we only process new characters

`physics()`

physics() is the heart of the simulation. It runs every frame and handles three things: (1) gravity acceleration, (2) boundary bouncing with energy loss, and (3) letter-to-letter collision detection and response. The collision resolution is smart—it determines whether letters hit each other horizontally (they bounce) or vertically (they stack), based on which overlap is smaller.

function physics(){
  for(let l of letters){
    l.vy+=g;l.x+=l.vx;l.y+=l.vy;
    if(l.x<w/2||l.x>width-w/2){l.vx*=-0.5;l.x=constrain(l.x,w/2,width-w/2);}
    if(l.y>height-h/2){l.y=height-h/2;l.vy*=-0.3;if(abs(l.vy)<0.3)l.vy=0;}
  }
  for(let i=0;i<letters.length;i++)for(let j=i+1;j<letters.length;j++){
    let a=letters[i],b=letters[j];
    if(abs(a.x-b.x)<w&&abs(a.y-b.y)<h){
      let dx=(w-abs(a.x-b.x))/2*(a.x<b.x?-1:1);
      let dy=(h-abs(a.y-b.y))/2*(a.y<b.y?-1:1);
      if(abs(dx)<abs(dy)){a.x-=dx;b.x+=dx;a.vx*=0.5;b.vx*=0.5;}
      else{a.y-=dy;b.y+=dy;a.vy=0;b.vy=0;}
    }
  }
}

🔧 Subcomponents:

for-loop Gravity and Boundary Physics for(let l of letters){ l.vy+=g; l.x+=l.vx; l.y+=l.vy; ... }

Applies gravity to each letter, updates positions, and handles bouncing off walls and floor

conditional Side Wall Collision if(l.x<w/2||l.x>width-w/2){l.vx*=-0.5;l.x=constrain(l.x,w/2,width-w/2);}

Bounces letters off left and right edges with energy loss, and keeps them within bounds

conditional Floor Collision if(l.y>height-h/2){l.y=height-h/2;l.vy*=-0.3;if(abs(l.vy)<0.3)l.vy=0;}

Bounces letters off the floor with energy loss, and stops them when velocity becomes negligible

for-loop Letter-to-Letter Collision Detection for(let i=0;i<letters.length;i++)for(let j=i+1;j<letters.length;j++){ ... }

Checks every pair of letters to detect overlaps and resolve collisions

conditional Collision Response if(abs(a.x-b.x)<w&&abs(a.y-b.y)<h){ ... }

When two letters overlap, separates them and adjusts their velocities based on collision direction

Line by Line:

for(let l of letters){: Loops through every letter object in the letters array to apply physics to each one
l.vy+=g;: Adds gravity (g=0.4) to the vertical velocity, making letters accelerate downward each frame
l.x+=l.vx;: Updates the letter's x position by adding its horizontal velocity
l.y+=l.vy;: Updates the letter's y position by adding its vertical velocity
if(l.x<w/2||l.x>width-w/2){: Checks if the letter has gone past the left edge (x < 20) or right edge (x > width-20)
l.vx*=-0.5;: Reverses and reduces horizontal velocity by 50%, making the bounce less energetic each time
l.x=constrain(l.x,w/2,width-w/2);: Forces the letter back within bounds so it doesn't get stuck outside the canvas
if(l.y>height-h/2){: Checks if the letter has fallen below the floor (bottom of canvas)
l.y=height-h/2;: Snaps the letter to the floor position
l.vy*=-0.3;: Reverses and reduces vertical velocity to 30%, creating a bouncy but damped effect
if(abs(l.vy)<0.3)l.vy=0;: If the bounce velocity becomes very small (less than 0.3), sets it to zero to stop jittering
for(let i=0;i<letters.length;i++)for(let j=i+1;j<letters.length;j++){: Nested loops that check every unique pair of letters exactly once (i with all j > i)
let a=letters[i],b=letters[j];: Gets references to the two letters being compared
if(abs(a.x-b.x)<w&&abs(a.y-b.y)<h){: Checks if the letters are overlapping by comparing their distance in x and y to their dimensions
let dx=(w-abs(a.x-b.x))/2*(a.x<b.x?-1:1);: Calculates how much to push letter a left/right to separate it from b (direction depends on which is further left)
let dy=(h-abs(a.y-b.y))/2*(a.y<b.y?-1:1);: Calculates how much to push letter a up/down to separate it from b (direction depends on which is higher)
if(abs(dx)<abs(dy)){a.x-=dx;b.x+=dx;a.vx*=0.5;b.vx*=0.5;}: If horizontal overlap is smaller, separate them horizontally and reduce their horizontal velocities
else{a.y-=dy;b.y+=dy;a.vy=0;b.vy=0;}: Otherwise separate them vertically and stop their vertical motion (they're stacking)

`draw()`

draw() runs 60 times per second and is responsible for animation and rendering. Each frame: (1) clear the canvas, (2) show instructions, (3) update physics, (4) remove old letters, (5) draw remaining letters with fading colors. The fading effect uses age calculation to make letters gradually disappear over 30 seconds.

function draw(){
  background(0);
  fill(255);text('Type to drop letters! Press SPACE to explode them',width/2,30);
  physics();
  let now=millis();
  letters=letters.filter(l=>now-l.t<30000);
  noStroke();
  for(let l of letters){
    let age=(now-l.t)/30000,a=255*(1-age);
    let v='aeiouAEIOU'.includes(l.ch);
    fill(v?255:100,100,v?100:255,a);rect(l.x,l.y,w,h,6);
    fill(255,a);text(l.ch.toUpperCase(),l.x,l.y+2);
  }
}

🔧 Subcomponents:

calculation Canvas Clear background(0);

Clears the canvas with black color every frame

calculation Instruction Display fill(255);text('Type to drop letters! Press SPACE to explode them',width/2,30);

Displays white instruction text at the top of the canvas

calculation Physics Update physics();

Calls the physics function to update all letter positions and handle collisions

calculation Letter Lifetime Management let now=millis(); letters=letters.filter(l=>now-l.t<30000);

Removes letters that are older than 30 seconds to prevent memory buildup

for-loop Letter Rendering for(let l of letters){ ... }

Draws each letter with fading color based on age

conditional Vowel Detection let v='aeiouAEIOU'.includes(l.ch);

Determines if the letter is a vowel to apply different coloring

conditional Dynamic Color Based on Letter Type fill(v?255:100,100,v?100:255,a);

Colors vowels cyan and consonants red, with alpha based on age

Line by Line:

background(0);: Fills the entire canvas with black (0), erasing everything from the previous frame
fill(255);text('Type to drop letters! Press SPACE to explode them',width/2,30);: Sets fill color to white and draws instruction text centered horizontally at y=30
physics();: Calls the physics function to update all letter positions, velocities, and handle collisions
let now=millis();: Gets the current time in milliseconds since the sketch started
letters=letters.filter(l=>now-l.t<30000);: Keeps only letters created within the last 30 seconds (30000 ms), removing old ones to save memory
noStroke();: Disables outline drawing for shapes, so rectangles are filled only
for(let l of letters){: Loops through each remaining letter to draw it
let age=(now-l.t)/30000,a=255*(1-age);: Calculates the letter's age as a fraction (0 to 1) and converts it to alpha transparency (255 to 0)
let v='aeiouAEIOU'.includes(l.ch);: Checks if the character is a vowel (true) or consonant (false)
fill(v?255:100,100,v?100:255,a);: Sets fill color: vowels are cyan (R:255, G:100, B:100), consonants are red (R:100, G:100, B:255), with alpha based on age
rect(l.x,l.y,w,h,6);: Draws a rectangle at the letter's position with width w, height h, and 6-pixel rounded corners
fill(255,a);text(l.ch.toUpperCase(),l.x,l.y+2);: Sets fill to white with age-based alpha and draws the uppercase letter slightly below center (y+2)

`keyPressed()`

keyPressed() is called whenever a key is pressed. This function implements the 'explosion' feature—when the user presses spacebar, all letters get random velocities that send them flying in different directions. Returning false prevents the browser from scrolling, which would normally happen when spacebar is pressed.

function keyPressed(){
  if(keyCode===32){
    for(let l of letters){l.vx=random(-5,5);l.vy=random(-12,-6);}
    return false;
  }
}

🔧 Subcomponents:

conditional Space Key Detection if(keyCode===32){

Checks if the pressed key is the spacebar (keyCode 32)

for-loop Explosion Effect for(let l of letters){l.vx=random(-5,5);l.vy=random(-12,-6);}

Gives all letters random velocities to create an explosion effect

calculation Default Behavior Prevention return false;

Prevents the browser's default spacebar behavior (page scroll)

Line by Line:

if(keyCode===32){: Checks if the pressed key is the spacebar (ASCII code 32)
for(let l of letters){: Loops through every letter currently on the canvas
l.vx=random(-5,5);: Assigns a random horizontal velocity between -5 and 5, making letters scatter left and right
l.vy=random(-12,-6);: Assigns a random upward velocity between -12 and -6 (negative = upward), making letters burst upward
return false;: Returns false to prevent the browser's default spacebar behavior (scrolling the page)

`windowResized()`

windowResized() is a special p5.js function that automatically runs whenever the browser window is resized. By calling resizeCanvas with the new window dimensions, we ensure the sketch always fills the entire window and adapts to different screen sizes.

function windowResized(){resizeCanvas(windowWidth,windowHeight);}

Line by Line:

resizeCanvas(windowWidth,windowHeight);: Automatically resizes the canvas to match the current window dimensions when the browser window is resized

📦 Key Variables

letters array

Stores all active letter objects. Each object contains: x (horizontal position), y (vertical position), vx (horizontal velocity), vy (vertical velocity), ch (the character), and t (creation timestamp)

let letters = [{x: 100, y: 0, vx: 0.5, vy: 0, ch: 'A', t: 1234567}];

inp object

Stores the reference to the text input element created by createInput(), allowing us to read what the user types

inp = createInput('');

lastLen number

Tracks the length of the input text from the previous frame, used to detect only NEW characters typed

let lastLen = 0;

g number

The gravity constant (0.4) that accelerates letters downward each frame

let g = 0.4;

w number

The width of each letter's bounding box (40 pixels), used for collision detection and rendering

let w = 40;

h number

The height of each letter's bounding box (50 pixels), used for collision detection and rendering

let h = 50;

🧪 Try This!

Experiment with the code by making these changes:

Change the gravity value from g=0.4 to g=0.2 and observe how letters fall more slowly. Try g=0.8 to make them fall faster and hit the ground harder.
Modify the bounce energy loss in the floor collision line from l.vy*=-0.3 to l.vy*=-0.8 to make letters bounce much higher. What happens if you use l.vy*=-1.0?
Change the vowel color from cyan (255,100,100) to a different color like purple (200,100,255) by modifying the fill() line in the render loop.
Increase the letter lifetime from 30000 milliseconds to 60000 to keep letters on screen twice as long before they fade away.
Modify the explosion effect by changing the random velocity ranges from random(-5,5) and random(-12,-6) to larger values like random(-10,10) and random(-20,-10) for a more violent explosion.
Change the input field size from inp.size(260) to inp.size(500) to make it wider, or reposition it with inp.position(20,50) to move it lower on the canvas.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

BUG physics() collision resolution

The collision detection uses axis-aligned bounding boxes (AABB) which can cause letters to get stuck in corners or pass through each other at high velocities. The separation logic doesn't account for the actual overlap amount properly.

💡 Implement proper circle-based collision detection using distance formula: let dist = dist(a.x, a.y, b.x, b.y); and separate based on actual distance rather than axis-aligned overlap.

PERFORMANCE physics() letter-to-letter collision loop

The nested loop checks every pair of letters, resulting in O(n²) complexity. With many letters, this becomes slow. For example, 100 letters means 4,950 collision checks per frame.

💡 Implement spatial partitioning (grid-based collision detection) to only check letters that are near each other, reducing collision checks to O(n) or O(n log n).

STYLE setup() input event listener

The arrow function inside inp.input() is compact but hard to read. The logic for creating new letters could be clearer with better variable names and formatting.

💡 Extract the letter creation logic into a separate function: function addLettersFromInput(newText, startIndex) { ... } to improve readability and reusability.

FEATURE draw() letter rendering

Letters fade out but don't have a visual indicator of how old they are. Users can't easily tell which letters are about to disappear.

💡 Add a visual aging effect like changing the rectangle's rounded corner radius based on age: rect(l.x, l.y, w, h, 6 * (1 - age)) to make old letters look more worn.

BUG physics() floor collision

The velocity damping threshold (0.3) is arbitrary and can cause letters to vibrate slightly on the floor. Some letters might never fully settle.

💡 Use a more robust settling mechanism: if(l.vy > -0.5 && l.vy < 0.5) { l.vy = 0; } to ensure letters stop moving once they're nearly stationary.

FEATURE draw() instruction text

The instruction text is static and doesn't change. Users might not realize they can press SPACE until they try it.

💡 Add a blinking or color-changing instruction text, or display a hint after a few seconds: if(frameCount % 120 < 60) { fill(255, 100); } to make it more noticeable.

Preview

Code flow diagram showing the structure of AI Gravity Text - Type Letters That Fall and Stack - Code flow showing setup, physics, draw, keypressed, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview