- xelsed.ai

function setup() {
  // Create a canvas that fills the entire window
  createCanvas(windowWidth, windowHeight);
  
  // Initialize the ball's position to the center of the canvas
  ballX = width / 2;
  ballY = height / 2;
  
  // Initialize the ball's velocity with random values
  // The ball will move with a speed between -5 and 5 pixels per frame
  ballVX = random(-5, 5);
  ballVY = random(-5, 5);
  
  // Ensure the ball doesn't start stationary
  if (ballVX === 0 && ballVY === 0) {
    ballVX = 3;
    ballVY = 3;
  }
}

function draw() {
  // Create a fading trail effect
  // Draw a semi-transparent dark rectangle over the entire canvas
  // The low alpha value (20) makes previous frames slowly fade out
  background(0, 0, 0, 20); 

  // --- Update Ball Position ---
  // Move the ball by adding its velocity to its current position
  ballX += ballVX;
  ballY += ballVY;

  // --- Wall Collision Detection ---
  // Check for collision with left or right walls
  if (ballX + ballRadius >= width || ballX - ballRadius <= 0) {
    ballVX *= -1; // Reverse the X velocity
    
    // Clamp the ball's position to prevent it from getting stuck in the wall
    if (ballX + ballRadius > width) ballX = width - ballRadius;
    if (ballX - ballRadius < 0) ballX = ballRadius;
  }

  // Check for collision with top or bottom walls
  if (ballY + ballRadius >= height || ballY - ballRadius <= 0) {
    ballVY *= -1; // Reverse the Y velocity
    
    // Clamp the ball's position to prevent it from getting stuck in the wall
    if (ballY + ballRadius > height) ballY = height - ballRadius;
    if (ballY - ballRadius < 0) ballY = ballRadius;
  }

  // --- Draw Ball with Gradient ---
  // Disable stroke for the ball, so it doesn't have a border
  noStroke(); 

  // Access the underlying 2D rendering context of the canvas
  // This allows us to use advanced Canvas API features like gradients
  // Reference: https://p5js.org/reference/#/p5/drawingContext
  let gradient = drawingContext.createRadialGradient(
    ballX - ballRadius * 0.4, ballY - ballRadius * 0.4, ballRadius * 0.1, // Inner circle (light source, slightly offset)
    ballX, ballY, ballRadius // Outer circle (edge of the ball)
  );
  
  // Add color stops to define the gradient's appearance
  gradient.addColorStop(0, '#FFFFFF'); // White at the center (lightest point)
  gradient.addColorStop(0.5, '#00FFFF'); // Cyan in the middle
  gradient.addColorStop(1, '#0000FF'); // Blue at the edge (darkest point)

  // Apply the created gradient to the fill style of the drawing context
  drawingContext.fillStyle = gradient;
  
  // Start a new path for drawing the circle
  drawingContext.beginPath();
  
  // Draw an arc (a full circle) at the ball's position with its radius
  // Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
  drawingContext.arc(ballX, ballY, ballRadius, 0, TWO_PI);
  
  // Fill the defined path with the current fillStyle (our gradient)
  drawingContext.fill();
}

function windowResized() {
  // Resize the canvas to match the new window dimensions
  resizeCanvas(windowWidth, windowHeight);
  
  // Recalculate ball position if needed, or simply let it continue from its last point
  // For this sketch, just resizing is enough.
}