YouTube

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

  // Initialize the sound effect
  clickSound = new p5.Oscillator('sine'); // A simple sine wave
  clickSound.freq(440); // A-note frequency
  clickSound.amp(0);   // Start with 0 amplitude
  clickSound.start();

  // Set text properties
  textSize(24);
  textAlign(CENTER, CENTER);
  fill(0); // Black text
}

function draw() {
  background(220); // Light gray background

  // Calculate button size and position based on canvas size
  xButtonSize = min(width, height) * 0.08; // 8% of the smaller dimension
  xButtonX = xButtonMargin + xButtonSize / 2;
  xButtonY = height - xButtonMargin - xButtonSize / 2;

  // --- Draw the "video thumbnail" (represented by text) ---
  let thumbnailWidth = width * 0.8;
  let thumbnailHeight = height * 0.6;
  let thumbnailX = (width - thumbnailWidth) / 2;
  let thumbnailY = (height - thumbnailHeight) / 2;

  // Draw a placeholder rectangle for the video
  fill(200); // Darker gray for the thumbnail background
  noStroke();
  rect(thumbnailX, thumbnailY, thumbnailWidth, thumbnailHeight, 10); // Rounded corners

  // Draw the video title
  fill(0); // Black text
  noStroke();
  textSize(min(width, height) * 0.04); // Responsive text size
  text(videoTitles[currentVideoIndex], thumbnailX + thumbnailWidth / 2, thumbnailY + thumbnailHeight / 2);

  // --- Draw the "X" button ---
  fill(255); // White circle background
  stroke(0); // Black border
  strokeWeight(2);
  ellipse(xButtonX, xButtonY, xButtonSize);

  // Draw the "X" lines
  stroke(0); // Black lines
  strokeWeight(3);
  let lineLength = xButtonSize * 0.6;
  line(xButtonX - lineLength / 2, xButtonY - lineLength / 2, xButtonX + lineLength / 2, xButtonY + lineLength / 2);
  line(xButtonX + lineLength / 2, xButtonY - lineLength / 2, xButtonX - lineLength / 2, xButtonY + lineLength / 2);

  // --- Draw the "Videos Skipped" counter ---
  textSize(min(width, height) * 0.03);
  fill(0);
  noStroke();
  textAlign(RIGHT, TOP);
  text(`Videos Skipped: ${videosSkipped}`, width - xButtonMargin, xButtonMargin);

  // Highlight button on hover/touch
  if (isHoveringXButton()) {
    noFill();
    stroke(255, 0, 0); // Red border on hover
    strokeWeight(4);
    ellipse(xButtonX, xButtonY, xButtonSize + 5); // Slightly larger highlight
  }
}

// Check if mouse/touch is over the "X" button
function isHoveringXButton() {
  let d = dist(mouseX, mouseY, xButtonX, xButtonY);
  return d < xButtonSize / 2;
}

// Handle mouse clicks (also works for touch on p5.js)
function mouseClicked() {
  if (isHoveringXButton()) {
    // Play a short click sound
    clickSound.amp(0.5, 0.05); // Ramp up to 0.5 amplitude over 0.05 seconds
    clickSound.amp(0, 0.2, 0.1); // Ramp down to 0 amplitude over 0.2 seconds after 0.1 second delay

    // Move to the next video
    currentVideoIndex = (currentVideoIndex + 1) % videoTitles.length;
    videosSkipped++;

    // Optional: display special messages for specific videos
    if (videoTitles[currentVideoIndex] === "Me at the zoo") {
      alert("You've found the FIRST ever YouTube video!");
    } else if (videoTitles[currentVideoIndex] === "Oblivion guards being Oblivion guards for 20 minutes") {
      alert("You've found the LATEST ever (for this game!) YouTube video!");
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized
}