1-4 Waveform

let mic, fft;
let isStarted = false;

// 波形を描画するための頂点配列を保存しておくリスト
let history = [];

function setup() {
  createCanvas(windowWidth, windowHeight);

  mic = new p5.AudioIn();

  fft = new p5.FFT(1024);
  mic.connect(fft);
}

function draw() {
  background(20);

  if (!isStarted) {
    fill(255);
    textAlign(CENTER, CENTER);
    textSize(24);
    text("Click to Start Microphone", width / 2, height / 2);
    return;
  }

  // 波形の配列を取得（-1.0〜1.0 の値が入った配列、デフォルト1024個）
  let waveform = fft.waveform();

  // 線を描画するための設定
  noFill();
  stroke(0, 255, 150);
  strokeWeight(3); // 線の太さ

  // === 波形の描画 ===
  beginShape();
  for (let i = 0; i < waveform.length; i++) {
    // x座標: 画面左から右へのマッピング
    let x = map(i, 0, waveform.length, 0, width);

    // y座標: 振幅（-1.0〜1.0）を画面の高さへマッピング（中央が0）
    let y = map(waveform[i], -1, 1, height, 0);

    // 頂点を追加
    vertex(x, y);
  }
  endShape();

  // テキスト表示
  noStroke();
  fill(255);
  textAlign(LEFT, TOP);
  textSize(24);
  text("Waveform (Time Domain)", 20, 20);
}

function mousePressed() {
  if (!isStarted) {
    userStartAudio();
    mic.start();
    isStarted = true;
  }
}

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