AI Bouncing Ball - Xelsed p5flash-alpha02

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);
  // Reference: https://p5js.org/reference/#/p5/colorMode
  
  // Initialize ball color with a random, vibrant HSB color
  // High saturation (80) and brightness (90) for vibrancy
  ballColor = color(random(360), 80, 90);
}

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); 
  // Reference: https://p5js.org/reference/#/p5/background
  
  // Update ball position based on velocity
  ballX += ballVX;
  ballY += ballVY;
  // Reference: https://p5js.org/reference/#/p5/+=
  
  // 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;
  // Reference: https://p5js.org/reference/#/p5/sin
  // Reference: https://p5js.org/reference/#/p5/frameCount
  
  // --- 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
  // Reference: https://p5js.org/reference/#/p5/fill
  noStroke(); // Remove outline for the ball
  // Reference: https://p5js.org/reference/#/p5/noStroke
  circle(ballX, ballY, currentBallSize * 2); // Draw a circle (x, y, diameter) with varying size
  // Reference: https://p5js.org/reference/#/p5/circle
  
  // 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);
    // Reference: https://p5js.org/reference/#/p5/color
    // Reference: https://p5js.org/reference/#/p5/random
  }
  
  // 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);
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Reference: https://p5js.org/reference/#/p5/windowResized
  // Adjust ball position if canvas resizes to keep it within bounds
  ballX = constrain(ballX, currentBallSize, width - currentBallSize);
  ballY = constrain(ballY, currentBallSize, height - currentBallSize);
  // Reference: https://p5js.org/reference/#/p5/constrain
}