YouTube 67

This sketch creates an animated text display where the word 'Ryzzbray' bounces around the canvas in both horizontal and vertical directions. The text reverses direction when it hits the edges, mimicking a classic bouncing ball animation.

Open in Editor Remix View in Gallery

🧪 Try This!

Experiment with the code by making these changes:

Make the text move diagonally faster — Multiplying the speed increments doubles how far the text travels each frame, creating faster diagonal motion
Paint the text red — The three numbers in fill() are red, green, and blue—255, 0, 0 makes pure red
Make the text much larger — Larger text is more dramatic and bounces off edges sooner because of the 50-100 pixel safety zones
Add a colored background — Instead of black (0), use RGB values like 200, 150, 100 for a tan background or 50, 100, 150 for blue

Prefer the full editor? Open it there →

📖 About This Sketch

This sketch animates text that glides around the canvas and bounces off every wall it touches. Like a bouncing ball, it combines three essential p5.js ideas: the draw loop, velocity variables, and collision detection. The difference is that instead of drawing a circle, we use the text() function to display 'Ryzzbray' at moving coordinates—the same principle works for any shape or image.

The code is organized into setup() which prepares a full-window canvas, draw() which updates the text position sixty times per second, and windowResized() which keeps the animation responsive when you resize. By reading it you will learn how velocity updates create smooth motion, how conditions detect boundaries, and how to make interactive sketches that fill the entire browser window.

⚙️ How It Works

When the sketch loads, setup() creates a canvas that fills the entire browser window using windowWidth and windowHeight, then places the text at the center by setting xPos and yPos to half the canvas dimensions
Every frame, draw() clears the background with black and adds small increments to xPos and yPos using the speed variables, moving the text diagonally
Two if-statements check whether the text has moved beyond invisible boundary zones near the edges and flip the sign of xSpeed and ySpeed to bounce it back
The text 'Ryzzbray' is drawn in blue at its new position using fill(), textSize(), textAlign(), and text() functions
If the browser window is resized, windowResized() automatically updates the canvas size so the animation continues to fill the screen

🎓 Concepts You'll Learn

Animation loopVelocity and position updatesCollision detection with boundariesText rendering in p5.jsResponsive canvasConditional statements

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It is where you prepare your canvas and initialize starting values for animation variables. Using windowWidth and windowHeight makes your sketch responsive—it adapts when the window is resized.

function setup() {
  createCanvas(windowWidth, windowHeight);
  xPos = width / 2; // Start in the center horizontally
  yPos = height / 2; // Start in the center vertically
  // Tip: Use windowWidth/windowHeight for responsive canvas
}

Line-by-line explanation (3 lines)

createCanvas(windowWidth, windowHeight);: Creates a canvas that fills the entire browser window by using windowWidth and windowHeight instead of fixed pixel values
xPos = width / 2;: Sets the text's starting horizontal position to the center of the canvas (halfway across)
yPos = height / 2;: Sets the text's starting vertical position to the center of the canvas (halfway down)

`draw()`

draw() is called 60 times per second by p5.js. Each frame, we erase the background, update positions, check boundaries, and redraw the text at its new location. This creates the illusion of smooth animation. The boundary checks (using the edges minus offsets) prevent the text from disappearing off-screen.

function draw() {
  background(0); // Black background

  // Move the text back and forth horizontally
  xPos += xSpeed;
  
  // Move the text up and down vertically
  yPos += ySpeed;
  
  // Reverse horizontal direction when reaching the edges
  if (xPos > width - 100 || xPos < 100) {
    xSpeed = xSpeed * -1; // Reverse the horizontal direction
  }
  
  // Reverse vertical direction when reaching the top or bottom
  if (yPos > height - 50 || yPos < 50) {
    ySpeed = ySpeed * -1; // Reverse the vertical direction
  }

  // Add your name, Ryzzbray, in blue!
  fill(0, 0, 255); // Blue color
  textSize(48); // Set the text size
  textAlign(CENTER, CENTER); // Align text horizontally and vertically in the center
  text("Ryzzbray", xPos, yPos); // Display "Ryzzbray" moving in both directions
}

Line-by-line explanation (11 lines)

🔧 Subcomponents:

calculation Position Update

xPos += xSpeed;
  yPos += ySpeed;

Adds the speed values to the current position, moving the text step by step each frame

conditional Horizontal Bounce Check

if (xPos > width - 100 || xPos < 100) {
    xSpeed = xSpeed * -1;

Detects when text reaches left or right boundaries and reverses horizontal direction

conditional Vertical Bounce Check

if (yPos > height - 50 || yPos < 50) {
    ySpeed = ySpeed * -1;

Detects when text reaches top or bottom boundaries and reverses vertical direction

background(0);: Clears the canvas with black color each frame, erasing the text's previous position so it doesn't leave a trail
xPos += xSpeed;: Adds the horizontal speed to the current x position, moving the text right (if xSpeed is positive) or left (if negative)
yPos += ySpeed;: Adds the vertical speed to the current y position, moving the text down (if ySpeed is positive) or up (if negative)
if (xPos > width - 100 || xPos < 100) {: Checks if the text has moved past the left boundary (xPos < 100) or past the right boundary (xPos > width - 100). The 100 creates a safety zone so the text bounces before hitting the very edge
xSpeed = xSpeed * -1;: Flips the sign of xSpeed: if it was 3, it becomes -3; if it was -3, it becomes 3. This reverses the horizontal direction
if (yPos > height - 50 || yPos < 50) {: Checks if the text has moved past the top boundary (yPos < 50) or past the bottom boundary (yPos > height - 50). The 50 is half the text height, creating a safety zone
ySpeed = ySpeed * -1;: Flips the sign of ySpeed to reverse the vertical direction when the text hits a top or bottom edge
fill(0, 0, 255);: Sets the text color to blue (0 red, 0 green, 255 blue in RGB color mode)
textSize(48);: Sets the size of the text to 48 pixels tall
textAlign(CENTER, CENTER);: Tells p5.js to center the text horizontally and vertically at the position (xPos, yPos), making the position point land at the text's exact center
text("Ryzzbray", xPos, yPos);: Draws the text 'Ryzzbray' at the current position, which updates every frame as xPos and yPos change

`windowResized()`

windowResized() is a special p5.js function that runs automatically whenever the user resizes their browser window. By calling resizeCanvas(), we keep the animation responsive and make sure it always fills the available space. Without this function, the canvas would stay at its original size and not adapt to window changes.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized
}

Line-by-line explanation (1 lines)

resizeCanvas(windowWidth, windowHeight);: Automatically updates the canvas size when the browser window is resized, so the animation continues to fill the entire screen

📦 Key Variables

xPos number

Stores the text's horizontal position (x-coordinate) on the canvas, updated every frame to create left-right movement

let xPos;

yPos number

Stores the text's vertical position (y-coordinate) on the canvas, updated every frame to create up-down movement

let yPos;

xSpeed number

Controls how many pixels the text moves horizontally each frame; multiplied by -1 when bouncing to reverse direction

let xSpeed = 3;

ySpeed number

Controls how many pixels the text moves vertically each frame; multiplied by -1 when bouncing to reverse direction

let ySpeed = 2;

🔧 Potential Improvements (3)

Here are some ways this code could be enhanced:

BUG draw() boundary detection

The boundary offsets (100 for horizontal, 50 for vertical) are hardcoded and don't account for actual text dimensions. If textSize() is changed, the text may get cut off or bounce inconsistently

💡 Calculate the boundary offsets dynamically: store textWidth('Ryzzbray') / 2 and textAscent() + textDescent() to get precise text dimensions and use those in the if-statements

PERFORMANCE draw()

fill(), textSize(), and textAlign() are called every frame even though their values never change

💡 Move fill(), textSize(), and textAlign() to setup() since they only need to be set once. This reduces unnecessary function calls every frame

STYLE Variable names

Variables like xPos, yPos, xSpeed, ySpeed are clear but abbreviated. In a larger sketch, descriptive names improve readability

💡 Consider renaming to textX, textY, velocityX, velocityY for clarity, though the current names are acceptable for a simple sketch

🔄 Code Flow

Code flow showing setup, draw, windowresized

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

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> positionupdate[position-update] draw --> horizontalbounce[horizontal-bounce] draw --> verticalbounce[vertical-bounce] positionupdate --> draw horizontalbounce --> draw verticalbounce --> draw click setup href "#fn-setup" click draw href "#fn-draw" click positionupdate href "#sub-position-update" click horizontalbounce href "#sub-horizontal-bounce" click verticalbounce href "#sub-vertical-bounce"

❓ Frequently Asked Questions

What visual effect does the YouTube 67 sketch create?

The sketch displays the name 'Ryzzbray' moving dynamically across the screen in both horizontal and vertical directions against a black background.

Is there any user interaction available in this p5.js sketch?

The sketch automatically adjusts to window resizing, but it does not feature direct user interaction beyond visual movement.

What creative coding concepts are showcased in this sketch?

This sketch demonstrates basic animation techniques by using variables for movement speed and direction, along with responsive canvas adjustments.

Preview

Code flow diagram showing the structure of YouTube 67 - Code flow showing setup, draw, windowresized — Code Flow Diagram

🧪 Try This!

📖 About This Sketch

⚙️ How It Works

🎓 Concepts You'll Learn

📝 Code Breakdown

🔧 Subcomponents:

📦 Key Variables

🔧 Potential Improvements (3)

🔄 Code Flow

❓ Frequently Asked Questions

Explore More

YouTube

67

sigmaskibidi

p5js.ai

Gallery

User Guide

Preview