AI Bouncing Ball - Xelsed p5flash-alpha02

This sketch creates a colorful bouncing ball animation with a dynamic trail effect. The ball moves continuously across the canvas, changes color randomly on each bounce, and has a subtle shadow effect. The canvas is responsive to window resizing, and the ball's size oscillates slightly using a sine wave for visual interest.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopCollision detectionVelocity and physicsColor modes (HSB)Responsive canvasSine wave oscillationTransparency and trailsConditional statements

🔄 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] click setup href "#fn-setup" click draw href "#fn-draw" setup --> canvas-creation[Canvas Creation] canvas-creation --> ball-position-init[Ball Position Initialization] ball-position-init --> horizontal-velocity-init[Horizontal Velocity Initialization] horizontal-velocity-init --> vertical-velocity-init[Vertical Velocity Initialization] vertical-velocity-init --> color-mode-setup[Color Mode Configuration] color-mode-setup --> initial-color[Initial Ball Color] initial-color --> draw draw --> trail-effect[Trail Effect Background] trail-effect --> position-update[Position Update] position-update --> size-oscillation[Size Oscillation] size-oscillation --> shadow-drawing[Shadow Drawing] shadow-drawing --> ball-drawing[Ball Drawing] ball-drawing --> horizontal-collision[Horizontal Collision Detection] horizontal-collision --> vertical-collision[Vertical Collision Detection] horizontal-collision -->|hit| horizontal-velocity-init vertical-collision -->|hit| vertical-velocity-init draw -->|loop| draw setup --> windowresized[windowResized] windowresized --> canvas-resize[Canvas Resize] canvas-resize --> x-constraint[X Position Constraint] x-constraint --> y-constraint[Y Position Constraint] click canvas-creation href "#sub-canvas-creation" click ball-position-init href "#sub-ball-position-init" click horizontal-velocity-init href "#sub-horizontal-velocity-init" click vertical-velocity-init href "#sub-vertical-velocity-init" click color-mode-setup href "#sub-color-mode-setup" click initial-color href "#sub-initial-color" click trail-effect href "#sub-trail-effect" click position-update href "#sub-position-update" click size-oscillation href "#sub-size-oscillation" click shadow-drawing href "#sub-shadow-drawing" click ball-drawing href "#sub-ball-drawing" click horizontal-collision href "#sub-horizontal-collision" click vertical-collision href "#sub-vertical-collision" click canvas-resize href "#sub-canvas-resize" click x-constraint href "#sub-x-constraint" click y-constraint href "#sub-y-constraint"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's where you initialize variables and configure the canvas. This sketch uses windowWidth and windowHeight to make the canvas responsive—when the window is resized, the sketch adapts. The HSB color mode is chosen because it's intuitive for creating vibrant colors: you just change the hue (the color itself) while keeping saturation and brightness high.

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  // Initialize ball in the center
  ballX = width / 2;
  ballY = height / 2;
  
  // Initialize ball velocity with random values
  // Ensure velocity is not too small or zero to make it move
  ballVX = random(3, 8); // Random speed between 3 and 8
  if (random() < 0.5) ballVX *= -1; // Randomly choose initial horizontal direction
  
  ballVY = random(3, 8); // Random speed between 3 and 8
  if (random() < 0.5) ballVY *= -1; // Randomly choose initial vertical direction
  
  // Set color mode to HSB: Hue (0-360), Saturation (0-100), Brightness (0-100), Alpha (0-100)
  colorMode(HSB, 360, 100, 100, 100);
  
  // Initialize ball color with a random, vibrant HSB color
  // High saturation (80) and brightness (90) for vibrancy
  ballColor = color(random(360), 80, 90);
}

🔧 Subcomponents:

function-call Canvas Creation createCanvas(windowWidth, windowHeight);

Creates a canvas that fills the entire window, making the sketch responsive to different screen sizes

calculation Ball Position Initialization ballX = width / 2; ballY = height / 2;

Places the ball at the center of the canvas when the sketch starts

calculation Horizontal Velocity Initialization ballVX = random(3, 8); if (random() < 0.5) ballVX *= -1;

Sets a random horizontal speed (3-8 pixels per frame) and randomly chooses left or right direction

calculation Vertical Velocity Initialization ballVY = random(3, 8); if (random() < 0.5) ballVY *= -1;

Sets a random vertical speed (3-8 pixels per frame) and randomly chooses up or down direction

function-call Color Mode Configuration colorMode(HSB, 360, 100, 100, 100);

Switches from RGB to HSB color mode, which makes it easier to create vibrant colors by varying hue while keeping saturation and brightness high

calculation Initial Ball Color ballColor = color(random(360), 80, 90);

Creates a random vibrant color with full saturation (80) and high brightness (90) for the ball

Line by Line:

createCanvas(windowWidth, windowHeight);: Creates a canvas that matches the full window size. Using windowWidth and windowHeight instead of fixed numbers makes the sketch responsive to different screen sizes.
ballX = width / 2;: Sets the ball's starting horizontal position to the center of the canvas. width is the canvas width in pixels.
ballY = height / 2;: Sets the ball's starting vertical position to the center of the canvas. height is the canvas height in pixels.
ballVX = random(3, 8);: Generates a random number between 3 and 8 for horizontal velocity. This determines how many pixels the ball moves left or right each frame.
if (random() < 0.5) ballVX *= -1;: 50% of the time, this multiplies ballVX by -1, reversing its direction. This randomly chooses whether the ball starts moving left or right.
ballVY = random(3, 8);: Generates a random number between 3 and 8 for vertical velocity. This determines how many pixels the ball moves up or down each frame.
if (random() < 0.5) ballVY *= -1;: 50% of the time, this multiplies ballVY by -1, reversing its direction. This randomly chooses whether the ball starts moving up or down.
colorMode(HSB, 360, 100, 100, 100);: Changes how colors are defined: Hue (0-360 degrees), Saturation (0-100%), Brightness (0-100%), Alpha transparency (0-100%). HSB makes it easier to create vibrant colors.
ballColor = color(random(360), 80, 90);: Creates a color with a random hue (0-360), high saturation (80), and high brightness (90). This ensures the ball starts with a vibrant, colorful appearance.

`draw()`

draw() runs 60 times per second, creating the animation. Each frame: the background is redrawn with transparency (creating trails), the ball's position is updated, its size oscillates, and it's drawn with a shadow. Collision detection checks if the ball has hit any edge and bounces it back. The key to the trail effect is using a semi-transparent background instead of a fully opaque one—this lets previous frames show through and fade gradually.

function draw() {
  // Draw a semi-transparent white background to create the fading trail
  // 0,0,100 is pure white in HSB
  background(0, 0, 100, fadeAmount); 
  
  // Update ball position based on velocity
  ballX += ballVX;
  ballY += ballVY;
  
  // Vary the ball size slightly using a sine wave based on frameCount
  // Oscillation amplitude of 5 pixels around ballRadius
  currentBallSize = ballRadius + sin(frameCount * 0.1) * 5;
  
  // --- Draw the subtle shadow first ---
  fill(0, 0, 0, 30); // Dark gray/black with 30% transparency in HSB
  noStroke(); // No outline for the shadow
  // Shadow is offset down and right, and slightly larger than the ball
  circle(ballX + 10, ballY + 10, currentBallSize * 2.2);
  
  // --- Draw the main ball ---
  fill(ballColor); // Set fill color to the ball's current vibrant color
  noStroke(); // Remove outline for the ball
  circle(ballX, ballY, currentBallSize * 2); // Draw a circle (x, y, diameter) with varying size
  
  // Check for horizontal bounces
  // If the ball hits the right edge OR the left edge
  if (ballX + currentBallSize >= width || ballX - currentBallSize <= 0) {
    ballVX *= -1; // Reverse horizontal velocity
    
    // Change ball color randomly on bounce (new vibrant HSB color)
    ballColor = color(random(360), 80, 90);
  }
  
  // Check for vertical bounces
  // If the ball hits the bottom edge OR the top edge
  if (ballY + currentBallSize >= height || ballY - currentBallSize <= 0) {
    ballVY *= -1; // Reverse vertical velocity
    
    // Change ball color randomly on bounce (new vibrant HSB color)
    ballColor = color(random(360), 80, 90);
  }
}

🔧 Subcomponents:

function-call Trail Effect Background background(0, 0, 100, fadeAmount);

Creates a semi-transparent white background each frame. Instead of clearing the canvas completely, the transparency allows previous frames to fade, creating a motion trail effect.

calculation Position Update ballX += ballVX; ballY += ballVY;

Updates the ball's position each frame by adding its velocity values. This creates smooth continuous movement.

calculation Size Oscillation currentBallSize = ballRadius + sin(frameCount * 0.1) * 5;

Uses a sine wave to make the ball's size pulse smoothly between 25 and 35 pixels, creating a breathing effect.

drawing Shadow Drawing fill(0, 0, 0, 30); noStroke(); circle(ballX + 10, ballY + 10, currentBallSize * 2.2);

Draws a dark, semi-transparent circle offset below and to the right of the ball to create a shadow effect.

drawing Ball Drawing fill(ballColor); noStroke(); circle(ballX, ballY, currentBallSize * 2);

Draws the main colorful ball at its current position with the current size.

conditional Horizontal Collision Detection

if (ballX + currentBallSize >= width || ballX - currentBallSize <= 0) { ballVX *= -1; ballColor = color(random(360), 80, 90); }

Checks if the ball hits the left or right edge. If it does, reverses horizontal direction and changes color.

conditional Vertical Collision Detection

if (ballY + currentBallSize >= height || ballY - currentBallSize <= 0) { ballVY *= -1; ballColor = color(random(360), 80, 90); }

Checks if the ball hits the top or bottom edge. If it does, reverses vertical direction and changes color.

Line by Line:

background(0, 0, 100, fadeAmount);: Draws a semi-transparent white background. Instead of fully clearing the canvas, the fadeAmount (8) creates transparency, so previous frames remain visible and fade out gradually. This creates the trail effect.
ballX += ballVX;: Adds the horizontal velocity to the ball's x position. If ballVX is 5, the ball moves 5 pixels to the right each frame. If negative, it moves left.
ballY += ballVY;: Adds the vertical velocity to the ball's y position. If ballVY is 3, the ball moves 3 pixels down each frame. If negative, it moves up.
currentBallSize = ballRadius + sin(frameCount * 0.1) * 5;: Uses sin() to create a smooth oscillation. frameCount increases each frame, so sin(frameCount * 0.1) cycles between -1 and 1. Multiplying by 5 means the size varies ±5 pixels around the base radius of 30, creating a pulsing effect.
fill(0, 0, 0, 30);: Sets the fill color to dark (hue 0, saturation 0, brightness 0) with 30% opacity. This creates a semi-transparent dark shadow.
noStroke();: Removes the outline from shapes. Without this, circles would have a thin black border.
circle(ballX + 10, ballY + 10, currentBallSize * 2.2);: Draws the shadow circle offset 10 pixels down and 10 pixels right from the ball's center. It's slightly larger (2.2x the size) to look like a shadow beneath the ball.
fill(ballColor);: Sets the fill color to the ball's current color, which changes randomly on bounces.
circle(ballX, ballY, currentBallSize * 2);: Draws the main ball at its current position. The diameter is currentBallSize * 2 (since circle() takes diameter, not radius). The size varies due to the sine wave oscillation.
if (ballX + currentBallSize >= width || ballX - currentBallSize <= 0) {: Checks if the ball has hit either edge horizontally. ballX + currentBallSize is the right edge of the ball; if it's >= canvas width, it hit the right wall. ballX - currentBallSize is the left edge; if it's <= 0, it hit the left wall.
ballVX *= -1;: Reverses the horizontal velocity. If the ball was moving right (positive), it now moves left (negative), and vice versa.
ballColor = color(random(360), 80, 90);: Changes the ball's color to a new random vibrant color when it bounces horizontally.
if (ballY + currentBallSize >= height || ballY - currentBallSize <= 0) {: Checks if the ball has hit either edge vertically. ballY + currentBallSize is the bottom edge; if it's >= canvas height, it hit the bottom. ballY - currentBallSize is the top edge; if it's <= 0, it hit the top.
ballVY *= -1;: Reverses the vertical velocity. If the ball was moving down (positive), it now moves up (negative), and vice versa.

`windowResized()`

windowResized() is a special p5.js function that automatically runs whenever the browser window is resized. This sketch uses it to keep the canvas responsive—it resizes the canvas to match the window and constrains the ball's position to ensure it doesn't end up outside the new canvas boundaries. This is important for responsive web design.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Adjust ball position if canvas resizes to keep it within bounds
  ballX = constrain(ballX, currentBallSize, width - currentBallSize);
  ballY = constrain(ballY, currentBallSize, height - currentBallSize);
}

🔧 Subcomponents:

function-call Canvas Resize resizeCanvas(windowWidth, windowHeight);

Resizes the p5.js canvas to match the new window dimensions when the browser window is resized.

calculation X Position Constraint ballX = constrain(ballX, currentBallSize, width - currentBallSize);

Ensures the ball's x position stays within valid bounds after resizing, preventing it from getting stuck outside the canvas.

calculation Y Position Constraint ballY = constrain(ballY, currentBallSize, height - currentBallSize);

Ensures the ball's y position stays within valid bounds after resizing, preventing it from getting stuck outside the canvas.

Line by Line:

resizeCanvas(windowWidth, windowHeight);: p5.js automatically calls windowResized() whenever the browser window is resized. This line updates the canvas size to match the new window dimensions.
ballX = constrain(ballX, currentBallSize, width - currentBallSize);: constrain() limits a value to a range. Here, it ensures ballX stays between currentBallSize (left boundary) and width - currentBallSize (right boundary). If the window shrinks and the ball is outside these bounds, it's moved back inside.
ballY = constrain(ballY, currentBallSize, height - currentBallSize);: Similarly, this ensures ballY stays between currentBallSize (top boundary) and height - currentBallSize (bottom boundary) after resizing.

📦 Key Variables

ballX number

Stores the ball's horizontal position (x-coordinate) on the canvas. Updated each frame to create movement.

let ballX = 200;

ballY number

Stores the ball's vertical position (y-coordinate) on the canvas. Updated each frame to create movement.

let ballY = 200;

ballVX number

Horizontal velocity—how many pixels the ball moves left or right each frame. Positive = right, negative = left. Reverses when the ball bounces horizontally.

let ballVX = 5;

ballVY number

Vertical velocity—how many pixels the ball moves up or down each frame. Positive = down, negative = up. Reverses when the ball bounces vertically.

let ballVY = 3;

ballRadius number

The base radius of the ball (30 pixels). This is the center size around which the ball oscillates. The actual drawn diameter is currentBallSize * 2.

let ballRadius = 30;

currentBallSize number

The current radius of the ball, which varies each frame due to sine wave oscillation. Used for both drawing and collision detection.

let currentBallSize = 30;

ballColor p5.Color

Stores the ball's current color as a p5.js color object in HSB mode. Changes to a random vibrant color each time the ball bounces.

let ballColor = color(random(360), 80, 90);

fadeAmount number

Controls the transparency of the background each frame (0-100 in HSB mode). Lower values create longer, more visible trails. Current value of 8 creates a subtle trail effect.

let fadeAmount = 8;

🧪 Try This!

Experiment with the code by making these changes:

Change fadeAmount from 8 to 2 to create a much longer, more visible trail. Try values like 15 or 20 to make the trail disappear faster.
Modify the sine wave oscillation on line 'currentBallSize = ballRadius + sin(frameCount * 0.1) * 5;' by changing the 0.1 to 0.05 (slower) or 0.2 (faster) to see how it affects the pulsing speed.
Change the initial velocity range on lines 'ballVX = random(3, 8)' and 'ballVY = random(3, 8)' to random(5, 12) to make the ball move faster and more unpredictably.
Modify the shadow offset from 'circle(ballX + 10, ballY + 10, ...)' to 'circle(ballX + 5, ballY + 5, ...)' or 'circle(ballX + 20, ballY + 20, ...)' to move the shadow closer or farther from the ball.
Change the saturation and brightness values in 'ballColor = color(random(360), 80, 90)' to 'color(random(360), 100, 100)' for even more vibrant colors, or try 'color(random(360), 50, 70)' for more muted colors.
Experiment with the shadow transparency by changing 'fill(0, 0, 0, 30)' to 'fill(0, 0, 0, 50)' for a darker shadow or 'fill(0, 0, 0, 10)' for a subtle shadow.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

BUG draw() collision detection

The ball can get stuck at edges if it bounces multiple times per frame when moving very fast. The collision check happens only once per frame, so a fast ball might pass through the boundary.

💡 Add a small buffer to the collision detection: 'if (ballX + currentBallSize > width) { ballX = width - currentBallSize; ballVX *= -1; }' This repositions the ball exactly at the boundary before reversing velocity.

PERFORMANCE draw() color generation

A new color object is created every time the ball bounces, which happens frequently. While not a major issue, generating colors on every bounce is slightly inefficient.

💡 Pre-generate an array of vibrant colors in setup() and randomly select from it on bounces instead of creating new colors each time: 'let colors = []; for(let i = 0; i < 10; i++) colors.push(color(random(360), 80, 90)); // then use: ballColor = random(colors);'

STYLE Global variables

Variable names like ballX, ballVX could be more descriptive for beginners learning the code. The prefix 'ball' is good, but could be even clearer.

💡 Consider renaming to be more explicit: 'ballPositionX' instead of 'ballX', 'ballVelocityX' instead of 'ballVX'. This makes it immediately clear these are position and velocity values.

FEATURE windowResized()

When the window is resized to be very small, the ball might be constrained to a tiny area or even have no room to move if the window is smaller than the ball's diameter.

💡 Add a minimum canvas size check: 'if (windowWidth < 200 || windowHeight < 200) { resizeCanvas(200, 200); }' This ensures the canvas never gets too small for the animation to work properly.

FEATURE draw() shadow drawing

The shadow is always offset by a fixed amount (10, 10), which looks odd if the ball is near the edges or corners of the canvas. The shadow can appear detached.

💡 Make the shadow offset proportional to the ball's distance from the center, or add a check to keep the shadow within bounds: 'let shadowX = min(ballX + 10, width - 20); let shadowY = min(ballY + 10, height - 20); circle(shadowX, shadowY, currentBallSize * 2.2);'

Preview

Code flow diagram showing the structure of AI Bouncing Ball - Xelsed p5flash-alpha02 - Code flow showing setup, draw, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview