vj.js

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const startBtn = document.getElementById('startBtn');
const presetSelect = document.getElementById('preset');
const sensitivitySlider = document.getElementById('sensitivity');

let audioCtx, analyser, source, dataArray, bufferLength;
let running = false;
let animId;

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);

async function startAudio() {
  audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  source = audioCtx.createMediaStreamSource(stream);
  analyser = audioCtx.createAnalyser();
  analyser.fftSize = 256;
  bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  source.connect(analyser);
}

function getFreqData() {
  analyser.getByteFrequencyData(dataArray);
  const sens = parseFloat(sensitivitySlider.value);
  return Array.from(dataArray).map(v => Math.min(255, v * sens));
}

// ── Presets ───────────────────────────────────────────────────────────────────

function drawBars(data) {
  const w = canvas.width, h = canvas.height;
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  ctx.fillRect(0, 0, w, h);

  const barW = w / data.length;
  data.forEach((val, i) => {
    const hue = (i / data.length) * 280 + 200;
    const barH = (val / 255) * h * 0.85;
    ctx.fillStyle = `hsl(${hue}, 100%, ${40 + val / 10}%)`;
    ctx.fillRect(i * barW, h - barH, barW - 1, barH);
  });
}

function drawWave(data) {
  const w = canvas.width, h = canvas.height;
  ctx.fillStyle = 'rgba(0,0,0,0.18)';
  ctx.fillRect(0, 0, w, h);

  const avg = data.reduce((a, b) => a + b, 0) / data.length;
  const hue = (avg / 255) * 360;

  ctx.beginPath();
  ctx.strokeStyle = `hsl(${hue}, 100%, 65%)`;
  ctx.lineWidth = 2;
  ctx.shadowColor = `hsl(${hue}, 100%, 70%)`;
  ctx.shadowBlur = 18;

  data.forEach((val, i) => {
    const x = (i / data.length) * w;
    const y = h / 2 + ((val - 128) / 255) * (h * 0.45);
    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
  });
  ctx.stroke();
  ctx.shadowBlur = 0;
}

function drawRadial(data) {
  const w = canvas.width, h = canvas.height;
  ctx.fillStyle = 'rgba(0,0,0,0.2)';
  ctx.fillRect(0, 0, w, h);

  const cx = w / 2, cy = h / 2;
  const radius = Math.min(w, h) * 0.22;
  const step = (Math.PI * 2) / data.length;

  ctx.beginPath();
  data.forEach((val, i) => {
    const angle = i * step - Math.PI / 2;
    const r = radius + (val / 255) * radius * 1.4;
    const x = cx + Math.cos(angle) * r;
    const y = cy + Math.sin(angle) * r;
    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
  });
  ctx.closePath();

  const avg = data.reduce((a, b) => a + b, 0) / data.length;
  const hue = (avg / 255) * 360;
  ctx.strokeStyle = `hsl(${hue}, 100%, 65%)`;
  ctx.lineWidth = 2;
  ctx.shadowColor = `hsl(${hue}, 100%, 70%)`;
  ctx.shadowBlur = 24;
  ctx.stroke();
  ctx.shadowBlur = 0;
}

// ── Loop ──────────────────────────────────────────────────────────────────────

function loop() {
  if (!running) return;
  const data = getFreqData();
  const preset = presetSelect.value;

  if (preset === 'bars') drawBars(data);
  else if (preset === 'wave') drawWave(data);
  else if (preset === 'radial') drawRadial(data);

  animId = requestAnimationFrame(loop);
}

startBtn.addEventListener('click', async () => {
  if (!running) {
    if (!audioCtx) await startAudio();
    else audioCtx.resume();
    running = true;
    loop();
    startBtn.textContent = 'Stop';
  } else {
    running = false;
    cancelAnimationFrame(animId);
    audioCtx.suspend();
    startBtn.textContent = 'Start / Stop';
  }
});