Sketch 2026-05-15 16:34

function preload() {
  // No external assets to load in preload()
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas

  // Set color mode to HSB for easier hue manipulation
  // HSB values are typically 0-360 for Hue, 0-100 for Saturation and Brightness
  colorMode(HSB, 360, 100, 100);

  // Initialize the ball's position in the center of the canvas
  ballX = width / 2;
  ballY = height / 2;

  // Initialize the base speeds
  baseBallSpeedX = random(3, 7);
  baseBallSpeedY = random(3, 7);

  // Initialize the bounce sound oscillator
  bounceOsc = new p5.Oscillator();
  bounceOsc.setType('triangle'); // A triangle wave sounds a bit like a ping
  bounceOsc.freq(440); // Standard A4 note
  bounceOsc.amp(0); // Start with zero amplitude (silent)
  bounceOsc.start();

  // userStartAudio() is required to start audio playback in most modern browsers
  // It must be called on a user gesture (like a mouse click or key press),
  // or in setup() if the sketch is initiated by a user gesture.
  userStartAudio();
}

function draw() {
  // Draw the animated background gradient
  // Instead of completely clearing the background, we draw a semi-transparent rectangle
  // over it. This creates a fading trail effect.
  // The alpha value (last parameter) controls the transparency. Lower values mean longer trails.
  fill(0, 0, 100, 10); // White color (0 hue, 0 saturation, 100 brightness) with 10% opacity
  noStroke();
  rect(0, 0, width, height); // Draw a rectangle over the entire canvas

  // Calculate the current ball speed based on the multiplier
  ballSpeedX = baseBallSpeedX * speedMultiplier;
  ballSpeedY = baseBallSpeedY * speedMultiplier;

  // 1. Update the ball's position based on its speed
  ballX += ballSpeedX;
  ballY += ballSpeedY;

  // 2. Check for collisions with canvas edges and reverse speed
  // A flag to ensure sound is played only once per collision direction
  let collidedX = false;
  let collidedY = false;

  // If the ball hits the right edge or left edge
  if (ballX + ballRadius >= width || ballX - ballRadius <= 0) {
    baseBallSpeedX *= -1; // Reverse the base X speed
    collidedX = true;
  }

  // If the ball hits the bottom edge or top edge
  if (ballY + ballRadius >= height || ballY - ballRadius <= 0) {
    baseBallSpeedY *= -1; // Reverse the base Y speed
    collidedY = true;
  }

  // Play the sound if a collision occurred in either direction
  if (collidedX || collidedY) {
    // Quickly set amplitude to 0.5 (volume), then fade out over 0.3 seconds
    bounceOsc.amp(0.5, 0.05); // Turn on quickly
    bounceOsc.amp(0, 0.3);   // Fade out
  }

  // 3. Draw the ball
  // Map the ball's horizontal position to a hue value (0 to 360)
  let ballHue = map(ballX, 0, width, 0, 360);
  fill(ballHue, 80, 100); // Dynamic hue, high saturation, full brightness
  noStroke();
  ellipse(ballX, ballY, ballRadius * 2); // Draw an ellipse for the ball

  // Display current speed multiplier
  fill(0); // Black color for text
  textSize(16);
  noStroke();
  text(`Speed: x${speedMultiplier.toFixed(1)} (Up/Down Arrows, Space to Reset)`, 10, 30);
}

function drawBackgroundGradient() {
  noStroke(); // No border for the gradient rectangles

  let startHue = (frameCount * 0.5) % 360; // Shift hue slowly
  let endHue = (startHue + 60) % 360;     // 60-degree offset from start hue

  for (let i = 0; i <= height; i++) {
    let interHue = map(i, 0, height, startHue, endHue);
    fill(interHue, 30, 95); // Low saturation, high brightness for a subtle background
    rect(0, i, width, 1);   // Draw a rectangle across the canvas
  }
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    speedMultiplier += speedIncrement;
    // Constrain the speed multiplier to stay within the defined range
    speedMultiplier = constrain(speedMultiplier, minSpeedMultiplier, maxSpeedMultiplier);
  } else if (keyCode === DOWN_ARROW) {
    speedMultiplier -= speedIncrement;
    // Constrain the speed multiplier to stay within the defined range
    speedMultiplier = constrain(speedMultiplier, minSpeedMultiplier, maxSpeedMultiplier);
  } else if (key === ' ') { // Check for spacebar
    speedMultiplier = 1.0; // Reset speed to normal
    // Generate new random base speeds for a fresh start
    baseBallSpeedX = random(3, 7);
    baseBallSpeedY = random(3, 7);
    // Re-center the ball as well
    ballX = width / 2;
    ballY = height / 2;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized
  // Re-center the ball if the canvas size changes significantly
  ballX = width / 2;
  ballY = height / 2;
}