AI Music Visualizer Rings - Audio Frequency Art Watch neon concentric rings pulse to your music! Us

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 255);
  angleMode(RADIANS);

  // p5.FFT(smoothing, bins) – smoothing ~0.8 keeps motion smooth
  fft = new p5.FFT(0.85, 1024);

  initRings();

  textFont('sans-serif');
  textSize(13);
}

function initRings() {
  rings.length = 0;
  const minDim = min(width, height);

  for (let i = 0; i < bands.length; i++) {
    const baseRadius = minDim * 0.18 + i * (minDim * 0.13);
    rings.push({
      index: i,
      band: bands[i].name,
      label: bands[i].label,
      hue: bands[i].hue,
      baseRadius,
      currentRadius: baseRadius,
      targetRadius: baseRadius
    });
  }
}

function draw() {
  // Very dark blue-ish background for neon contrast
  background(230, 70, 4);

  // Center of canvas
  const cx = width / 2;
  const cy = height / 2;

  // Get band energies if audio is running
  const energies = {
    bass: 0,
    mid: 0,
    treble: 0
  };

  if (audioStarted) {
    fft.analyze(); // Fill internal spectrum data
    // getEnergy(bandName) returns 0–255
    energies.bass   = fft.getEnergy('bass');
    energies.mid    = fft.getEnergy('mid');
    energies.treble = fft.getEnergy('treble');

    // Optional: animate oscillator a bit if that's the source
    if (!useMic && osc) {
      const freq = map(sin(frameCount * 0.01), -1, 1, 80, 420);
      osc.freq(freq);
    }
  }

  // Update ring radii with smooth easing
  const minDim = min(width, height);
  const maxOffset = minDim * 0.16; // max extra radius due to energy

  for (let r of rings) {
    const energy = energies[r.band] || 0;
    const energyNorm = energy / 255; // 0..1

    // Map energy to a radius offset
    const energyOffset = energyNorm * maxOffset;

    // Subtle breathing so rings move even when quiet
    const breath = sin(frameCount * 0.03 + r.index * 0.8) * (minDim * 0.01);

    r.targetRadius = r.baseRadius + energyOffset + breath;

    // Smooth easing towards target radius
    // lerp() ref: https://p5js.org/reference/#/p5/lerp
    r.currentRadius = lerp(r.currentRadius, r.targetRadius, 0.12);
  }

  // Draw rings with neon glow
  for (let r of rings) {
    drawNeonRing(cx, cy, r.currentRadius, r.hue);
  }

  drawHUD(energies);
}

function mousePressed() {
  if (!audioStarted) {
    startAudio();
  }
}

function keyPressed() {
  // Toggle between microphone and oscillator after audio has started
  if (!audioStarted) return;

  if (key === 'm' || key === 'M') {
    if (useMic) {
      // Switch to oscillator
      if (mic) {
        mic.stop();
      }
      startOscillatorOnly();
    } else {
      // Switch back to microphone
      if (osc) {
        osc.stop();
        if (osc.dispose) osc.dispose();
      }
      startMicOnly();
    }
  }
}

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

function startAudio() {
  if (audioStarted) return;

  // Required on browsers for starting audio in a user gesture
  // https://p5js.org/reference/#/p5/userStartAudio
  userStartAudio().then(() => {
    startMicOnly();
  }).catch(err => {
    console.warn('Audio context start error, using oscillator instead:', err);
    startOscillatorOnly();
  });
}

function startMicOnly() {
  mic = new p5.AudioIn();

  // mic.start(successCallback, errorCallback)
  mic.start(() => {
    console.log('Microphone started');
    fft.setInput(mic);
    useMic = true;
    audioStarted = true;
  }, err => {
    console.warn('Mic error, falling back to oscillator:', err);
    startOscillatorOnly();
  });
}

function startOscillatorOnly() {
  if (osc) {
    osc.stop();
    if (osc.dispose) osc.dispose();
  }
  osc = new p5.Oscillator('sawtooth');
  osc.freq(120);
  osc.amp(0.3);
  osc.start();

  fft.setInput(osc);
  useMic = false;
  audioStarted = true;
}

function drawNeonRing(cx, cy, radius, hue) {
  push();
  noFill();

  const glowLayers = 6;

  // Soft glow layers (outer to inner)
  for (let i = glowLayers; i >= 1; i--) {
    const alpha = map(i, 1, glowLayers, 200, 20); // stronger alpha inside
    const weight = map(i, 1, glowLayers, 3, 24);  // thicker outer halo

    stroke(hue, 100, 100, alpha);
    strokeWeight(weight);
    circle(cx, cy, radius * 2);
  }

  // Bright core ring
  stroke(hue, 100, 100, 255);
  strokeWeight(2);
  circle(cx, cy, radius * 2);

  pop();
}

function drawHUD(energies) {
  push();
  resetMatrix();
  textAlign(LEFT, TOP);
  noStroke();

  let x = 16;
  let y = 16;
  const lineH = 18;

  // Instructions
  fill(0, 0, 100, 230);
  const instr = audioStarted
    ? 'Press M to toggle between microphone and internal oscillator.'
    : 'Click anywhere to start audio (mic). If blocked, it will use an internal oscillator.';
  text(instr, x, y, width * 0.7);
  y += lineH * 1.6;

  // Source info
  fill(0, 0, 90, 230);
  const src = audioStarted ? (useMic ? 'Microphone' : 'Oscillator') : 'None';
  text(`Audio source: ${src}`, x, y);
  y += lineH * 1.2;

  // Ring / band energy readout
  if (audioStarted) {
    for (let r of rings) {
      const e = energies[r.band] || 0;
      fill(r.hue, 80, 100, 220);
      text(`${r.label}: ${nf(e, 3, 0)}`, x, y);
      y += lineH;
    }
  } else {
    fill(0, 0, 80, 220);
    text('Rings are idling with a subtle breathing animation.', x, y);
  }

  pop();
}