AI Bouncing Ball V2 - Xelsed p5flash-alpha02

function setup() {
  // Create a canvas that fills the entire browser window
  createCanvas(windowWidth, windowHeight);

  // Set color mode to HSB for more vibrant and intuitive color control
  // HSB: Hue (0-255), Saturation (0-255), Brightness (0-255)
  colorMode(HSB, 255); 

  // Initialize ball position to the center of the canvas
  x = width / 2;
  y = height / 2;

  // Initialize velocity with random values for varied movement
  // The ball will move between -5 and 5 pixels per frame in both x and y directions
  vx = random(-5, 5); 
  vy = random(-5, 5); 

  // Initialize the ball's color with a random vibrant hue, high saturation, and full brightness
  // HSB ensures colors are consistently bright and saturated.
  currentColor = color(random(255), 200, 255); // Random hue, high saturation (200/255), full brightness (255/255)

  // Disable drawing outlines around shapes for a cleaner look
  noStroke(); 
}

function draw() {
  // Create a more visible fading trail effect by drawing a semi-transparent background
  // Using HSB for background: hue 0 (black), saturation 0, brightness 0, alpha 50
  // Alpha (transparency) is set to 50 (out of 255) - slightly higher than previous iteration
  background(0, 0, 0, 50); 

  // --- Ball Size Variation ---
  // Make the ball size vary slightly as it moves using a sine wave
  // The ball will pulse smoothly between baseBallSize and baseBallSize + (baseBallSize * 0.15)
  // The amplitude (0.15) has been increased slightly for a more noticeable pulse.
  currentBallSize = baseBallSize + sin(frameCount * 0.05) * (baseBallSize * 0.15); 

  // --- Refined Subtle Shadow Under the Ball ---
  // Draw the shadow before the ball so it appears underneath
  // We'll draw multiple semi-transparent circles to simulate a softer, blurred shadow edge.
  
  let shadowOffsetX = currentBallSize * 0.1; // Offset in x, based on ball size
  let shadowOffsetY = currentBallSize * 0.15; // Slightly more offset in y for a more pronounced shadow
  let shadowBaseSize = currentBallSize * 1.1; // Base size of the shadow, slightly larger than the ball
  let shadowMaxAlpha = 70; // Maximum alpha for the shadow (out of 255)

  // Draw 3 concentric, semi-transparent circles to create a soft, gradient shadow
  for (let i = 0; i < 3; i++) {
    // Alpha decreases for outer circles (more diffuse)
    let alphaStep = shadowMaxAlpha * (1 - i * 0.25); 
    
    // Size increases for outer circles
    let sizeStep = shadowBaseSize + (i * currentBallSize * 0.07); 
    
    // Offset decreases for inner circles (closer to the ball)
    let offsetStepX = shadowOffsetX * (1 - i * 0.3); 
    let offsetStepY = shadowOffsetY * (1 - i * 0.3);

    fill(0, 0, 0, alphaStep); // Semi-transparent black
    circle(x + offsetStepX, y + offsetStepY, sizeStep); 
  }

  // Update the ball's position based on its velocity
  x += vx; 
  y += vy; 

  // --- Bounce logic for horizontal edges (left and right) ---
  // Check if the ball's edge (x + radius) goes beyond the right edge (width)
  // or if the ball's edge (x - radius) goes beyond the left edge (0)
  if (x + currentBallSize / 2 > width || x - currentBallSize / 2 < 0) {
    vx *= -1; // Reverse the x-velocity (bounce horizontally)
    
    // Generate a new random vibrant color for the ball on bounce
    currentColor = color(random(255), 200, 255); // Random hue, high saturation, full brightness
  }

  // --- Bounce logic for vertical edges (top and bottom) ---
  // Check if the ball's edge (y + radius) goes beyond the bottom edge (height)
  // or if the ball's edge (y - radius) goes beyond the top edge (0)
  if (y + currentBallSize / 2 > height || y - currentBallSize / 2 < 0) {
    vy *= -1; // Reverse the y-velocity (bounce vertically)
    
    // Generate a new random vibrant color for the ball on bounce
    currentColor = color(random(255), 200, 255); // Random hue, high saturation, full brightness
  }

  // Set the fill color for the ball
  fill(currentColor); 

  // Draw the ball as a circle at its current position with its current size
  circle(x, y, currentBallSize); 
}

function windowResized() {
  // Resize the canvas to match the new window dimensions
  resizeCanvas(windowWidth, windowHeight); 
  // Optionally, you could reset the ball's position to the center here
  // x = width / 2;
  // y = height / 2;
}