Oscilating Sound WebGL

function setup() {
  // WEBGL mode: https://p5js.org/reference/#/p5/createCanvas
  createCanvas(windowWidth, windowHeight, WEBGL);
  pixelDensity(1); // mobile-friendly: keeps GPU/CPU load saner

  colorMode(HSB, 360, 100, 100, 100);

  // Use browser default sans-serif font for HUD.
  // We do NOT call loadFont(), to avoid OpenType parsing errors.
  textFont("sans-serif");
  textAlign(CENTER, CENTER);
  textSize(16);

  noStroke();
}

function draw() {
  // Use current frequency to drive background color
  const bgHue = map(currentFreq, 200, 800, 220, 320, true);
  background(bgHue, 60, 15);

  // Basic lights for 3D
  ambientLight(40);
  directionalLight(255, 255, 255, 0.5, 1, -0.5);

  // Drag/touch to rotate the camera:
  // https://p5js.org/reference/#/p5/orbitControl
  orbitControl(1, 1, 0.1);

  const t = millis() * 0.001; // smoother than frameCount
  const baseRadius = min(width, height) * 0.2;

  // Horizontal position controls orbit size and color
  const mx = constrain(mouseX, 0, width);
  const orbitRadius =
    baseRadius + map(mx, 0, width, -baseRadius * 0.4, baseRadius * 0.4);
  const zRadius = baseRadius * 0.6;

  // 3D Lissajous-ish path for orb
  const x = orbitRadius * cos(t);
  const y = orbitRadius * sin(t * 1.15);
  const z = zRadius * sin(t * 0.7);

  // Audio: map orb height (y) to frequency
  if (audioStarted && osc) {
    // In WEBGL, origin is center; y positive is down.
    // Top (negative y) -> higher pitch; bottom (positive y) -> lower pitch.
    const maxY = orbitRadius;
    const minY = -orbitRadius;
    const freq = map(y, maxY, minY, 200, 800, true); // clamp to [200,800]
    currentFreq = freq;
    osc.frequency.rampTo(freq, 0.05); // smooth 50 ms glide
  }

  // Main ring in the center
  push();
  rotateY(t * 0.4);
  rotateX(t * 0.25);
  const ringHue = map(mx, 0, width, 160, 360);
  ambientMaterial(ringHue, 80, 80);
  torus(baseRadius * 0.7, baseRadius * 0.18, 32, 24);
  pop();

  // Orbiting orb
  push();
  translate(x, y, z);
  const orbHue = (ringHue + 60) % 360;
  ambientMaterial(orbHue, 90, 100);
  sphere(baseRadius * 0.18, 32, 24);
  pop();

  drawHUD();
}

function drawHUD() {
  // Draw 2D UI text overlay in WEBGL:
  // resetMatrix + translate to make (0,0) top-left again
  push();
  resetMatrix();
  translate(-width / 2, -height / 2, 0);

  noStroke();
  fill(0, 0, 100, 90); // bright white, slightly transparent

  const topY = height * 0.08;

  if (!audioStarted) {
    text(
      "Tap / click anywhere to start the sound.\n" +
        "Drag to orbit the camera.\n" +
        "Move finger/mouse horizontally to change color & orbit size.",
      width / 2,
      topY
    );
  } else {
    const status = isMuted ? "Muted (tap to unmute)" : "Tap / click to mute";
    text(
      "Drag to orbit the camera.\n" +
        "Move horizontally to change color & orbit size.\n" +
        "Pitch follows the orb's height.\n" +
        status,
      width / 2,
      topY
    );

    // Smaller line for current pitch
    textSize(14);
    text(
      "Current pitch: " + nf(currentFreq, 3, 0) + " Hz",
      width / 2,
      topY + 40
    );
    // Restore default size for next frame
    textSize(16);
  }

  pop();
}

// Shared handler for mouse + touch so mobile works nicely
function handleUserGesture() {
  if (!audioStarted) {
    // Must be called from a user gesture for browsers' autoplay policy
    Tone.start().then(() => {
      osc = new Tone.Oscillator(currentFreq, "sine").toDestination();
      osc.start();
      audioStarted = true;
      isMuted = false;
    });
  } else if (osc) {
    // After started, tap/click toggles mute
    isMuted = !isMuted;
    osc.mute = isMuted;
  }
}

function mousePressed() {
  handleUserGesture();
}

function touchStarted() {
  handleUserGesture();
  // Prevent page scroll on mobile when touching canvas
  return false;
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}