AI Laser Harp - Rainbow Light Instrument Play music with light! Move your mouse across the rainbow

  constructor(index, total, freq) {
    this.index = index;
    this.total = total;
    this.freq = freq;

    // Hue from 0..360 across beams for rainbow
    this.hue = map(index, 0, total - 1, 0, 360);

    this.isActive = false;          // mouse currently inside this beam
    this.lastTriggerTime = -1000;   // for glow flash
    this.started = false;           // has osc.start() been called yet?

    // Create oscillator (from p5.sound)
    // https://p5js.org/reference/#/p5.Oscillator
    this.osc = new p5.Oscillator('triangle'); // nice, slightly harp-like
    this.osc.freq(this.freq);
    this.osc.amp(0); // start silent
    // We will actually start() after user enables audio
  }

  startOsc() {
    if (!this.started) {
      this.osc.start();
      this.started = true;
    }
  }

  getX() {
    return (this.index + 0.5) * (width / this.total);
  }

  getW() {
    return (width / this.total) * 0.6; // beam width as fraction of slot
  }

  update(mx, my) {
    const x = this.getX();
    const w = this.getW();

    const inside =
      mx >= x - w / 2 &&
      mx <= x + w / 2 &&
      my >= 0 &&
      my <= height;

    // Mouse just entered the beam
    if (inside && !this.isActive) {
      this.isActive = true;
      this.trigger();
    }
    // Mouse just left the beam
    else if (!inside && this.isActive) {
      this.isActive = false;
      this.release();
    }
  }

  trigger() {
    this.lastTriggerTime = millis();

    if (!audioStarted) return;

    this.startOsc();
    // Smooth attack to avoid clicks
    // osc.amp(amp, rampTime) — see https://p5js.org/reference/#/p5.Oscillator/amp
    this.osc.amp(0.7, 0.05);
  }

  release() {
    if (!audioStarted || !this.started) return;
    // Smooth release
    this.osc.amp(0, 0.2);
  }

  display() {
    const x = this.getX();
    const w = this.getW();

    // How "bright" should the beam be?
    const now = millis();
    const timeSinceTrigger = now - this.lastTriggerTime;

    // Short flash after triggering
    const flash = constrain(1 - timeSinceTrigger / 250.0, 0, 1); // 0..1
    const activeBoost = this.isActive ? 1 : 0;

    // Overall intensity: max of being active and flash decay
    const intensity = max(flash, activeBoost); // 0..1

    // Outer glowing beam
    push();
    rectMode(CENTER);
    noStroke();

    // Neon glow using canvas shadow
    // https://p5js.org/reference/#/p5/drawingContext
    drawingContext.shadowColor = color(this.hue, 100, 100, 90);
    drawingContext.shadowBlur = 40 + intensity * 40;

    fill(this.hue, 80, 60 + intensity * 40, 90);
    rect(x, height / 2, w, height * 1.1);
    pop();

    // Inner bright core
    push();
    rectMode(CENTER);
    noStroke();
    fill(0, 0, 100, 60 + intensity * 40); // white core
    rect(x, height / 2, w * 0.25, height * 1.1);
    pop();
  }

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  noCursor(); // Let the glowing dot act as our cursor

  // Create beams, each with its own oscillator frequency
  for (let i = 0; i < NUM_BEAMS; i++) {
    const freq = SCALE_FREQS[i % SCALE_FREQS.length];
    beams.push(new Beam(i, NUM_BEAMS, freq));
  }
}

function draw() {
  // Dark background, slightly tinted
  background(240, 80, 2); // HSB: dark purplish

  // Add a subtle vignette / spotlight
  push();
  noStroke();
  for (let r = max(width, height); r > 0; r -= 40) {
    const b = map(r, 0, max(width, height), 20, 0);
    fill(240, 80, b, 10);
    ellipse(width / 2, height / 2, r * 1.5, r * 1.5);
  }
  pop();

  // Draw beams with additive blend for extra glow
  blendMode(ADD);
  for (let beam of beams) {
    beam.update(mouseX, mouseY);
    beam.display();
  }
  blendMode(BLEND);

  // Base bar at the bottom for “instrument” feel
  push();
  stroke(0, 0, 40, 80);
  strokeWeight(3);
  line(0, height * 0.9, width, height * 0.9);
  pop();

  // Glowing cursor dot
  push();
  noStroke();
  fill(180, 80, 100, 80); // bright cyan
  ellipse(mouseX, mouseY, 14, 14);
  fill(180, 40, 100, 90);
  ellipse(mouseX, mouseY, 6, 6);
  pop();

  // Instructions before audio is enabled
  if (!audioStarted) {
    push();
    textAlign(CENTER, CENTER);
    textSize(18);
    fill(0, 0, 90);
    text(
      'Click or tap once to enable sound,\nthen move across the rainbow lasers',
      width / 2,
      height * 0.15
    );
    pop();
  }
}

function mousePressed() {
  if (!audioStarted) {
    userStartAudio();
    audioStarted = true;
    beams.forEach(b => b.startOsc());
  }
}

function touchStarted() {
  if (!audioStarted) {
    userStartAudio();
    audioStarted = true;
    beams.forEach(b => b.startOsc());
  }
  // Prevent default scrolling on touch
  return false;
}

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