AI Bouncing Ball V2 - Xelsed p5flash-alpha02

This sketch creates a colorful bouncing ball animation that fills the entire browser window. The ball continuously bounces off the edges while pulsing in size, changing to a random vibrant color on each bounce, and leaving a fading trail effect behind it.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopCollision detectionHSB color modeVelocity and physicsCanvas responsivenessSine wave animationTransparency and alphaWindow resizing

🔄 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 Setup] setup --> color-mode-setup[Color Mode Configuration] click canvas-creation href "#sub-canvas-creation" click color-mode-setup href "#sub-color-mode-setup" draw --> trail-effect[Trail Effect Background] draw --> position-update[Position Update] draw --> horizontal-bounce[Horizontal Bounce Detection] draw --> vertical-bounce[Vertical Bounce Detection] draw --> size-variation[Ball Size Pulsing] draw --> shadow-setup[Shadow Properties Setup] draw --> shadow-loop[Shadow Drawing Loop] draw --> ball-drawing[Ball Rendering] click trail-effect href "#sub-trail-effect" click position-update href "#sub-position-update" click horizontal-bounce href "#sub-horizontal-bounce" click vertical-bounce href "#sub-vertical-bounce" click size-variation href "#sub-size-variation" click shadow-setup href "#sub-shadow-setup" click shadow-loop href "#sub-shadow-loop" click ball-drawing href "#sub-ball-drawing" position-update --> position-initialization[Ball Position Initialization] position-update --> velocity-initialization[Velocity Initialization] position-update --> color-initialization[Color Initialization] click position-initialization href "#sub-position-initialization" click velocity-initialization href "#sub-velocity-initialization" click color-initialization href "#sub-color-initialization" shadow-loop --> shadow-draw[Draw Shadow Circles] click shadow-draw href "#sub-shadow-draw" windowresized[windowResized] --> canvas-resize[Canvas Resize] click windowresized href "#fn-windowresized" click canvas-resize href "#sub-canvas-resize"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's where you initialize the canvas, set up variables, and configure drawing settings. Using windowWidth and windowHeight makes the sketch responsive to window size.

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 255);
  x = width / 2;
  y = height / 2;
  vx = random(-5, 5);
  vy = random(-5, 5);
  currentColor = color(random(255), 200, 255);
  noStroke();
}

🔧 Subcomponents:

function-call Canvas Setup createCanvas(windowWidth, windowHeight)

Creates a canvas that fills the entire browser window dynamically

function-call Color Mode Configuration colorMode(HSB, 255)

Sets color mode to HSB (Hue, Saturation, Brightness) for more intuitive and vibrant color control

calculation Ball Position Initialization x = width / 2; y = height / 2

Places the ball at the center of the canvas

calculation Velocity Initialization vx = random(-5, 5); vy = random(-5, 5)

Assigns random initial velocities between -5 and 5 pixels per frame for varied movement

calculation Color Initialization currentColor = color(random(255), 200, 255)

Sets initial ball color with random hue, high saturation, and full brightness

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a canvas that matches the full width and height of the browser window, making the sketch responsive
colorMode(HSB, 255): Switches to HSB color mode where values range 0-255. HSB is better for creating vibrant, saturated colors than RGB
x = width / 2: Sets the ball's starting x-position to the horizontal center of the canvas
y = height / 2: Sets the ball's starting y-position to the vertical center of the canvas
vx = random(-5, 5): Assigns a random horizontal velocity between -5 and 5 pixels per frame, making each run unique
vy = random(-5, 5): Assigns a random vertical velocity between -5 and 5 pixels per frame
currentColor = color(random(255), 200, 255): Creates initial color with random hue (0-255), saturation 200 (high), and brightness 255 (full) for vibrant appearance
noStroke(): Disables the outline/border around shapes, giving the ball and shadow a cleaner appearance

`draw()`

draw() runs 60 times per second (by default), creating the animation. Each frame, we update the ball's position, check for bounces, and redraw everything. The semi-transparent background creates the trail effect by not fully clearing the canvas each frame.

function draw() {
  background(0, 0, 0, 50);
  currentBallSize = baseBallSize + sin(frameCount * 0.05) * (baseBallSize * 0.15);
  let shadowOffsetX = currentBallSize * 0.1;
  let shadowOffsetY = currentBallSize * 0.15;
  let shadowBaseSize = currentBallSize * 1.1;
  let shadowMaxAlpha = 70;
  for (let i = 0; i < 3; i++) {
    let alphaStep = shadowMaxAlpha * (1 - i * 0.25);
    let sizeStep = shadowBaseSize + (i * currentBallSize * 0.07);
    let offsetStepX = shadowOffsetX * (1 - i * 0.3);
    let offsetStepY = shadowOffsetY * (1 - i * 0.3);
    fill(0, 0, 0, alphaStep);
    circle(x + offsetStepX, y + offsetStepY, sizeStep);
  }
  x += vx;
  y += vy;
  if (x + currentBallSize / 2 > width || x - currentBallSize / 2 < 0) {
    vx *= -1;
    currentColor = color(random(255), 200, 255);
  }
  if (y + currentBallSize / 2 > height || y - currentBallSize / 2 < 0) {
    vy *= -1;
    currentColor = color(random(255), 200, 255);
  }
  fill(currentColor);
  circle(x, y, currentBallSize);
}

🔧 Subcomponents:

function-call Trail Effect Background background(0, 0, 0, 50)

Creates a fading trail by drawing a semi-transparent black background each frame instead of fully clearing

calculation Ball Size Pulsing currentBallSize = baseBallSize + sin(frameCount * 0.05) * (baseBallSize * 0.15)

Makes the ball smoothly pulse in size using a sine wave, varying between 85% and 115% of base size

calculation Shadow Properties Setup

let shadowOffsetX = currentBallSize * 0.1; let shadowOffsetY = currentBallSize * 0.15; let shadowBaseSize = currentBallSize * 1.1; let shadowMaxAlpha = 70

Calculates shadow offset, size, and transparency values based on current ball size

for-loop Shadow Drawing Loop for (let i = 0; i < 3; i++) { ... }

Draws 3 concentric semi-transparent circles to create a soft, blurred shadow effect beneath the ball

calculation Position Update x += vx; y += vy

Updates ball position by adding velocity values, creating smooth movement

conditional Horizontal Bounce Detection if (x + currentBallSize / 2 > width || x - currentBallSize / 2 < 0)

Detects when ball hits left or right edges and reverses horizontal velocity

conditional Vertical Bounce Detection if (y + currentBallSize / 2 > height || y - currentBallSize / 2 < 0)

Detects when ball hits top or bottom edges and reverses vertical velocity

function-call Ball Rendering fill(currentColor); circle(x, y, currentBallSize)

Sets the fill color and draws the ball at its current position with current size

Line by Line:

background(0, 0, 0, 50): Instead of fully clearing the canvas, this draws a semi-transparent black background (alpha 50/255), creating a fading trail effect
currentBallSize = baseBallSize + sin(frameCount * 0.05) * (baseBallSize * 0.15): Uses a sine wave based on frameCount to make the ball pulse smoothly. The sine wave oscillates between -1 and 1, multiplied by 15% of base size, creating a breathing effect
let shadowOffsetX = currentBallSize * 0.1: Calculates horizontal shadow offset as 10% of current ball size, making shadow scale with the ball
let shadowOffsetY = currentBallSize * 0.15: Calculates vertical shadow offset as 15% of current ball size, slightly more than horizontal for a natural drop shadow appearance
let shadowBaseSize = currentBallSize * 1.1: Sets shadow base size to 110% of ball size, making it slightly larger than the ball itself
let shadowMaxAlpha = 70: Sets the maximum transparency value for the shadow (70 out of 255), making it semi-transparent
for (let i = 0; i < 3; i++): Loops 3 times to draw 3 concentric circles that create a soft, gradient shadow effect
let alphaStep = shadowMaxAlpha * (1 - i * 0.25): Decreases alpha for each layer: first circle gets 70, second gets 52.5, third gets 35, creating a diffuse shadow
let sizeStep = shadowBaseSize + (i * currentBallSize * 0.07): Increases size for each layer, making outer circles larger to create a blurred shadow edge effect
let offsetStepX = shadowOffsetX * (1 - i * 0.3); let offsetStepY = shadowOffsetY * (1 - i * 0.3): Decreases offset for each layer, making inner circles closer to the ball for a natural shadow appearance
fill(0, 0, 0, alphaStep); circle(x + offsetStepX, y + offsetStepY, sizeStep): Sets fill to semi-transparent black and draws a shadow circle at the calculated offset and size
x += vx; y += vy: Updates the ball's position by adding its velocity values, making it move across the canvas
if (x + currentBallSize / 2 > width || x - currentBallSize / 2 < 0): Checks if the ball's right edge exceeds canvas width OR left edge goes below 0, accounting for ball radius
vx *= -1: Reverses horizontal velocity by multiplying by -1, making the ball bounce back in the opposite direction
currentColor = color(random(255), 200, 255): Generates a new random vibrant color when bouncing, with random hue but consistent high saturation and brightness
if (y + currentBallSize / 2 > height || y - currentBallSize / 2 < 0): Checks if the ball's bottom edge exceeds canvas height OR top edge goes below 0, accounting for ball radius
vy *= -1: Reverses vertical velocity, making the ball bounce back vertically
fill(currentColor); circle(x, y, currentBallSize): Sets the fill color to the current color and draws the ball as a circle at its current position with current size

`windowResized()`

windowResized() is a built-in p5.js function that triggers automatically when the browser window is resized. By calling resizeCanvas() here, we ensure the animation always fills the entire window. Without this function, the canvas would stay at its original size even if the window changed.

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

🔧 Subcomponents:

function-call Canvas Resize resizeCanvas(windowWidth, windowHeight)

Automatically adjusts the canvas size to match the new browser window dimensions

Line by Line:

function windowResized(): This is a special p5.js function that automatically gets called whenever the browser window is resized
resizeCanvas(windowWidth, windowHeight): Updates the canvas dimensions to match the new window size, keeping the sketch responsive to window changes

📦 Key Variables

x number

Stores the ball's horizontal position (x-coordinate) on the canvas

let x = 200;

y number

Stores the ball's vertical position (y-coordinate) on the canvas

let y = 200;

vx number

Stores the ball's horizontal velocity - how many pixels it moves left/right each frame

let vx = 3;

vy number

Stores the ball's vertical velocity - how many pixels it moves up/down each frame

let vy = -2;

baseBallSize number

Stores the base diameter of the ball (50 pixels) around which the pulsing size varies

let baseBallSize = 50;

currentBallSize number

Stores the actual current diameter of the ball, which varies between frames due to the sine wave pulsing effect

let currentBallSize;

currentColor color object

Stores the current color of the ball in HSB format, changes to a random vibrant color each time the ball bounces

let currentColor = color(random(255), 200, 255);

🧪 Try This!

Experiment with the code by making these changes:

Change baseBallSize from 50 to 100 on line 5 to make the ball twice as large. Notice how the shadow and pulsing effect scale proportionally.
Modify the velocity range in setup() from random(-5, 5) to random(-10, 10) to make the ball bounce around much faster.
Change the background alpha from 50 to 200 on line 1 of draw() to make the trail effect fade much faster, creating a cleaner animation with less ghosting.
Adjust the sine wave frequency from sin(frameCount * 0.05) to sin(frameCount * 0.1) to make the ball pulse twice as fast.
Change the saturation value in currentColor from 200 to 100 to create more pastel, less vibrant colors on each bounce.
Modify shadowMaxAlpha from 70 to 150 to make the shadow much more visible and darker beneath the ball.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

BUG draw() bounce detection

The ball can get stuck or oscillate at the edges if it bounces multiple times per frame due to high velocity. The bounce check uses > and < instead of >= and <=, which could miss edge cases.

💡 Add a small buffer or use constrain() to keep the ball within bounds: x = constrain(x, currentBallSize/2, width - currentBallSize/2)

PERFORMANCE draw() shadow loop

Drawing 3 shadow circles every frame (60 times per second) is computationally expensive. This could cause performance issues on slower devices, especially with the semi-transparent background.

💡 Consider reducing shadow circles from 3 to 2, or use a graphics buffer to pre-render the shadow once instead of recalculating every frame.

STYLE setup() and draw()

The color generation code is duplicated in three places (setup and two bounce conditions). This violates the DRY principle and makes maintenance harder.

💡 Create a helper function: function generateNewColor() { return color(random(255), 200, 255); } and call it in all three locations.

FEATURE draw()

The ball always changes to a completely random color on bounce, which can sometimes produce similar colors in succession or colors that clash visually.

💡 Implement a color wheel system where the new color is always a certain hue distance away from the previous color, ensuring better color variety and visual harmony.

BUG draw() position update

If the ball velocity is very high (e.g., vx = 20), it could jump completely through a wall in a single frame without bouncing, since the collision check happens after position update.

💡 Check for collisions before updating position, or use a more sophisticated collision detection that checks the path traveled, not just the final position.

Preview

Code flow diagram showing the structure of AI Bouncing Ball V2 - 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