Beachvibes

function setup() {
  createCanvas(windowWidth, windowHeight);
  noiseDetail(8, 0.5); // Set noise detail for smoother visuals

  // --- Initialize all p5.sound related objects at the start of setup() ---
  // This helps prevent the 'setADSR' error by ensuring objects are defined
  // before any methods are called on them.
  noiseGen = new p5.Noise('white');
  waveFilter = new p5.Filter('lowpass');
  crashNoise = new p5.Noise('white');
  crashEnvelope = new p5.Envelope();
  crashFilter = new p5.Filter('bandpass');

  // --- Continuous Wave Audio Setup ---
  noiseGen.start();
  noiseGen.amp(0); // Start silent

  waveFilter.freq(200);
  waveFilter.res(1.5);

  noiseGen.disconnect();
  noiseGen.connect(waveFilter);
  waveFilter.connect();

  // --- Crashing Wave Audio Setup ---
  crashNoise.start();
  crashNoise.amp(0); // Start silent

  // Adjusted ADSR parameters for a 5-second crash
  crashEnvelope.setADSR(0.01, 1, 0.1, 4); // Attack, Decay, Sustain, Release
  crashEnvelope.setRange(1, 0); // Max amplitude, Min amplitude

  crashFilter.freq(2000); // Higher frequency for splash sound
  crashFilter.res(2); // Some resonance

  crashNoise.disconnect(); // Disconnect crashNoise from master
  crashNoise.connect(crashFilter); // Connect crashNoise to crashFilter
  crashFilter.connect(); // Connect crashFilter to master output

  // Important: User must interact with the page for audio to start in most browsers
  userStartAudio();

  // --- UI Elements ---
  // Volume slider for continuous wave
  volumeSlider = createSlider(0, 1, 0.5, 0.01);
  volumeSlider.position(10, 10);
  volumeSlider.style('width', '180px');
  volLabel = createDiv('Continuous Vol');
  volLabel.position(200, 10);
  volLabel.style('color', 'black');
  volLabel.style('font-size', '14px');

  // Filter frequency slider (Wave Depth)
  pitchSlider = createSlider(50, 1000, 200, 1);
  pitchSlider.position(10, 40);
  pitchSlider.style('width', '180px');
  pitchLabel = createDiv('Wave Depth / Filter Freq');
  pitchLabel.position(200, 40);
  pitchLabel.style('color', 'black');
  pitchLabel.style('font-size', '14px');

  // Crash Interval slider - default increased to avoid immediate overlap
  crashIntervalSlider = createSlider(60, 300, 360, 10); // Min frames, Max frames, Initial, Step
  crashIntervalSlider.position(10, 70);
  crashIntervalSlider.style('width', '180px');
  crashIntervalLabel = createDiv('Crash Interval (frames)');
  crashIntervalLabel.position(200, 70);
  crashIntervalLabel.style('color', 'black');
  crashIntervalLabel.style('font-size', '14px');

  // Crash Volume slider
  crashVolumeSlider = createSlider(0, 1, 0.7, 0.01);
  crashVolumeSlider.position(10, 100);
  crashVolumeSlider.style('width', '180px');
  crashVolumeLabel = createDiv('Crash Volume');
  crashVolumeLabel.position(200, 100);
  crashVolumeLabel.style('color', 'black');
  crashVolumeLabel.style('font-size', '14px');

  // Instructions for audio start
  audioInstructions = createDiv('Click or press a key to start audio');
  audioInstructions.position(10, 130);
  audioInstructions.style('color', 'black');
  audioInstructions.style('font-size', '14px');

  // Hide instructions after first user interaction (for audio)
  document.addEventListener('mousedown', hideAudioInstructions);
  document.addEventListener('keydown', hideAudioInstructions);
}

function draw() {
  // Update continuous wave audio based on slider values
  let overallVol = volumeSlider.value();
  let filterFreq = pitchSlider.value();
  let audioDynamicVol = noise(audioNoiseOffset) * overallVol * 0.5 + overallVol * 0.5;
  noiseGen.amp(audioDynamicVol, 0.1);
  waveFilter.freq(filterFreq, 0.1);
  audioNoiseOffset += 0.002;

  // --- Crashing Wave Audio Logic ---
  let crashVol = crashVolumeSlider.value();
  let crashFilterCenterFreq = map(pitchSlider.value(), 50, 1000, 1000, 4000); // Map pitch slider to higher range for crash filter
  crashFilter.freq(crashFilterCenterFreq, 0.01); // Update crash filter frequency
  crashNoise.amp(crashVol, 0.01); // Set base volume for crash noise

  // Trigger crash sound and visual effect periodically
  crashTrigger++;
  if (crashTrigger >= crashIntervalSlider.value()) {
    crashEnvelope.play(crashNoise); // Play the crash envelope
    crashTrigger = 0; // Reset timer

    // Reset visual splash effect
    splashX = random(width * 0.2, width * 0.8); // Random x-position for splash
    splashY = height * 0.9; // Splash at the front wave's base
    splashSize = 0;
    splashAlpha = 255;
  }

  // --- Visuals ---
  background(135, 206, 235); // Light blue for the sky

  // Draw a simple sun
  noStroke();
  fill(255, 200, 0);
  ellipse(width * 0.2, height * 0.2, 80);

  // Draw multiple layers of waves for depth
  drawWave(height * 0.8, 60, color(0, 100, 200, 180), 0.05);
  drawWave(height * 0.9, 80, color(0, 150, 255, 220), 0.10);
  drawWave(height * 1.0, 100, color(0, 200, 255, 255), 0.15);

  // Draw visual splash effect
  if (splashAlpha > 0) {
    fill(255, splashAlpha);
    noStroke();
    ellipse(splashX, splashY, splashSize, splashSize * 0.5); // Oval splash
    splashSize += SPLASH_GROW_SPEED;
    splashAlpha -= SPLASH_FADE_SPEED;
    if (splashSize > MAX_SPLASH_SIZE) splashSize = MAX_SPLASH_SIZE;
    if (splashAlpha < 0) splashAlpha = 0;
  }

  // Increment timeOffset for wave animation and loop it
  timeOffset += 0.005;
  if (timeOffset > TWO_PI) {
    timeOffset = 0;
  }
}

/**
 * Draws a single layer of ocean waves using p5.js noise and curveVertex.
 * The wave is designed to loop seamlessly across the screen and over time.
 * @param {number} yOffset - The base y-position for the wave (e.g., height * 0.8).
 * @param {number} amplitude - The maximum height of the wave crests and troughs.
 * @param {p5.Color} waveColor - The color to fill the wave shape.
 * @param {number} speed - A multiplier for the timeOffset to control wave animation speed.
 */
function drawWave(yOffset, amplitude, waveColor, speed) {
  fill(waveColor);
  noStroke();

  beginShape();
  curveVertex(-width * 0.1, height);
  curveVertex(-width * 0.1, height);

  for (let x = 0; x <= width; x += wavePointsStep) {
    let angle = map(x, 0, width, 0, TWO_PI);
    let noiseVal = noise(cos(angle) + timeOffset * speed, sin(angle) + timeOffset * speed);
    let y = map(noiseVal, 0, 1, yOffset - amplitude, yOffset + amplitude);
    curveVertex(x, y);
  }

  curveVertex(width * 1.1, height);
  curveVertex(width * 1.1, height);
  endShape();
}

function hideAudioInstructions() {
  if (audioInstructions) {
    audioInstructions.hide();
    document.removeEventListener('mousedown', hideAudioInstructions);
    document.removeEventListener('keydown', hideAudioInstructions);
  }
}

/**
 * Adjusts canvas size and repositions UI elements when the window is resized.
 */
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  volumeSlider.position(10, 10);
  volLabel.position(200, 10);
  pitchSlider.position(10, 40);
  pitchLabel.position(200, 40);
  crashIntervalSlider.position(10, 70);
  crashIntervalLabel.position(200, 70);
  crashVolumeSlider.position(10, 100);
  crashVolumeLabel.position(200, 100);
  if (audioInstructions) audioInstructions.position(10, 130);
}