fun fps

function setup() {
  // Create a canvas that fills the entire window
  createCanvas(windowWidth, windowHeight);
  
  // Initialize the ball at the center of the canvas with a random initial velocity
  ballX = width / 2;
  ballY = height / 2;
  ballVX = random(-5, 5); // Random horizontal speed between -5 and 5
  ballVY = random(-5, 5); // Random vertical speed between -5 and 5
  
  // Set styling for the ball
  noStroke(); // No border for the ball
  fill(255, 100, 100); // Reddish color for the ball
  
  // Set styling for the loading bar text
  textSize(16); // Font size for the loading text
  textAlign(LEFT, CENTER); // Align text to the left and vertically center
}

function draw() {
  background(220); // Clear the background each frame (light gray)
  
  // --- Ball Animation ---
  
  // Update the ball's position based on its velocity
  ballX += ballVX;
  ballY += ballVY;
  
  // Check for collisions with the canvas edges (left/right)
  // If the ball hits an edge, reverse its horizontal velocity
  if (ballX + ballRadius > width || ballX - ballRadius < 0) {
    ballVX *= -1; // Reverse horizontal velocity
  }
  
  // Check for collisions with the canvas edges (top/bottom)
  // Note: The bottom edge is adjusted to accommodate the loading bar
  if (ballY + ballRadius > height - loadingBarHeight || ballY - ballRadius < 0) {
    ballVY *= -1; // Reverse vertical velocity
  }
  
  // Draw the ball at its current position
  circle(ballX, ballY, ballRadius * 2); // circle(x, y, diameter)
  
  // --- Infinite Fake Loading Bar ---
  
  // Calculate the current width of the loading bar progress.
  // It will grow by 'loadingSpeed' pixels per frame.
  let currentLoadingWidth = frameCount * loadingSpeed;
  
  // Use min() to ensure the loading bar never exceeds the width of the canvas.
  // This makes it fill the screen and then stay full.
  currentLoadingWidth = min(currentLoadingWidth, width);
  
  // Draw the background of the loading bar (gray)
  fill(180);
  rect(0, height - loadingBarHeight, width, loadingBarHeight); // rect(x, y, width, height)
  
  // Draw the progress part of the loading bar (blue)
  fill(0, 150, 255);
  rect(0, height - loadingBarHeight, currentLoadingWidth, loadingBarHeight);
  
  // Draw the loading text on top of the loading bar
  fill(255); // White text
  text(loadingText, 10, height - loadingBarHeight / 2); // Position text at bottom-left
}

// This function is called automatically whenever the browser window is resized
function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // Adjust the canvas size to the new window dimensions
  
  // Re-initialize ball position to keep it centered on resize
  ballX = width / 2;
  ballY = height / 2;
}