🎓15주차: 오디오 반응 (Audio-Reactive)

마이크/사운드 입력 → FFT/Amplitude 분석 → 형태 변화
파티클 색/속도/크기/진동이 모두 오디오에 반응함

✅ 예제 1 : Reactive Particle

// p5.sound 라이브러리 필요

let mic;
let fft;
let particles = [];
let audioStarted = false;

function setup() {
  createCanvas(800, 500);
  noStroke();
}

function draw() {
  background(12, 12, 12);

  // 오디오 시작 전 안내 메시지
  if (!audioStarted) {
    fill(255);
    textAlign(CENTER, CENTER);
    textSize(24);
    text("클릭해서 시작", width / 2, height / 2);
    return;
  }

  // ✅ 오디오 분석
  let spectrum = fft.analyze();

  let bass = fft.getEnergy("bass") * 2; // 저음 20–140Hz
  let mid = fft.getEnergy("mid") * 2; // 중음 400–2600Hz
  let treble = fft.getEnergy("treble") * 2; // 고음 6000Hz~

  // ✅ 가운데 원 — 전체 에너지 반응(확실하게 보이도록 강화)
  let level = fft.getEnergy("lowMid");
  let r = map(level, 0, 255, 30, 160);

  fill(255, 255, 255, 255);
  circle(width / 2, height / 2, r * 2);

  // ✅ 파티클 업데이트 및 렌더
  particles.forEach((p) => {
    p.update(bass, mid, treble);
    p.show();
  });
}

// 클릭 시 오디오 시작
function mousePressed() {
  if (!audioStarted) {
    // ✅ 마이크 입력 시작
    mic = new p5.AudioIn();
    mic.start();

    // ✅ FFT 초기화
    fft = new p5.FFT(0.9, 256);
    fft.setInput(mic);

    // ✅ 파티클 생성
    for (let i = 0; i < 200; i++) {
      particles.push(new Particle());
    }

    audioStarted = true;
  }
}

// ---------------------------------------------
// ✅ Particle Class
// 오디오 주파수 값에 따라 속도·색·크기·jitter 모두 반응
// ---------------------------------------------

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = p5.Vector.random2D().mult(random(0.5, 2));
    this.size = random(3, 6);

    // 색상 초기값
    this.col = color(180, 150, 255, 200);
  }

  update(bass, mid, treble) {
    // ✅ 오디오 반응 강도 조절(확실하게 보이도록 과장)
    let bassAmp = map(bass, 0, 255, 0, 8); // 크고 강렬한 반응
    let midAmp = map(mid, 0, 255, 0, 4); // 이동 속도
    let trebleAmp = map(treble, 0, 255, 0, 3); // 색 반짝임

    // ✅ 속도 증가 — mid에 강하게 반응
    this.pos.add(this.vel.copy().mult(0.4 + midAmp * 1.3));

    // ✅ jitter — 고음 treble 기반 작은 진동
    this.pos.add(p5.Vector.random2D().mult(trebleAmp * 3.5));

    // ✅ 화면 밖으로 나가면 wrap-around
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.y > height) this.pos.y = 0;
    if (this.pos.y < 0) this.pos.y = height;

    // ✅ 색상 반응 — bass/mid/treble 모두 반영
    this.col = color(
      map(bass, 0, 255, 0, 255), // 저음 → 빨강 최대치까지
      map(mid, 0, 255, 50, 255), // 중음 → 초록 강하게 반영
      map(treble, 0, 255, 100, 255), // 고음 → 파란 반짝임
      240
    );

    // ✅ 크기 — bass에 반응
    this.currentSize = this.size + bassAmp * 2.2;
  }

  show() {
    fill(this.col);
    circle(this.pos.x, this.pos.y, this.currentSize);
  }
}

✅ 구조 설명
1) 마이크 입력

mic = new p5.AudioIn();
mic.start();

2) FFT 분석

fft = new p5.FFT(0.8, 128);
fft.setInput(mic);

• smoothing: 0.8
• bins: 128 (적당히 가벼운 해상도)

3) 주파수 대역값 추출

fft.getEnergy("bass");
fft.getEnergy("mid");
fft.getEnergy("treble");

4) 각 주파수 대역 → 형태 변화 매핑

• bass(저음) → 크기 / 팽창 / 진동
• mid(중음) → 파티클 이동
• treble(고음) → jitter / sparkle 효과

5) 파티클 시스템

• 매 프레임마다 오디오의 에너지에 따라 속도, 방향, 크기 변동

✅ 확장 아이디어
1) 스펙트럼 바(Visualizer) 스타일

• music player처럼 막대 그래프가 흔들림

2) Circles / Lines / Mesh vibrating

• 저역/중역/고역을 형태 deformation으로 연결

3) 쉐이더(Shaders)와 결합한 Audio-Reactive

• WebGL + FFT → 강력한 VJ 스타일 구현

4) 오디오 파일 업로드 (.mp3)

5) 3D 오디오 반응 Visual (Three.js)

• Box height = FFT
• Point cloud vibration

✅ 예제 2 : Reactive Spiral Spectrum

let mic, fft;
let audioStarted = false;

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
}

function draw() {
  background(5);
  translate(width / 2, height / 2);

  // 오디오 시작 전 안내 메시지
  if (!audioStarted) {
    fill(255);
    textAlign(CENTER, CENTER);
    textSize(24);
    text("클릭해서 시작", 0, 0);
    return;
  }

  let spectrum = fft.analyze();
  let rotateSpeed = map(fft.getEnergy("bass"), 0, 255, 0, 9);

  rotate(frameCount * -0.5 + rotateSpeed);

  noStroke();

  for (let i = 0; i < spectrum.length; i++) {
    let r = map(i, 0, spectrum.length, 40, 250);
    let angle = i * 6;

    let amp = spectrum[i];

    let x = r * cos(angle);
    let y = r * sin(angle);

    fill(
      map(amp, 0, 255, 100, 255),
      map(i, 0, spectrum.length, 50, 200),
      255,
      200
    );
    circle(x, y, map(amp, 0, 255, 2, 72));
  }
}

// 클릭 시 오디오 시작
function mousePressed() {
  if (!audioStarted) {
    mic = new p5.AudioIn();
    mic.start();

    fft = new p5.FFT(0.8, 512);
    fft.setInput(mic);

    audioStarted = true;
  }
}

✅ 예제 3 : Reactive Undulating Circle

let mic, fft;
let particles = [];
let audioStarted = false;

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  colorMode(RGB, 255);

  mic = new p5.AudioIn();
  fft = new p5.FFT(0.8, 64);
  fft.setInput(mic);

  for (let i = 0; i < 160; i++) {
    particles.push(new Particle());
  }

  noStroke();
}

function draw() {
  background(15, 15, 20, 10);

  if (!audioStarted) {
    displayStartMessage();
    return;
  }

  fft.analyze();
  let bass = fft.getEnergy("bass");
  let mid = fft.getEnergy("mid");
  let treble = fft.getEnergy("treble");

  renderUndulatingCircle(bass, mid, treble);
  updateParticles(bass, mid, treble);
}

function displayStartMessage() {
  fill(220);
  textSize(24);
  textAlign(CENTER, CENTER);
  noStroke();
  text("클릭해서 시작", width / 2, height / 2);
}

function mousePressed() {
  if (getAudioContext().state !== "running") {
    getAudioContext()
      .resume()
      .then(() => {
        mic.start();
        audioStarted = true;
      })
      .catch((err) => {
        console.error("Error starting audio context:", err);
      });
  } else if (!audioStarted) {
    mic.start();
    audioStarted = true;
  }
}

function renderUndulatingCircle(bass, mid, treble) {
  push();
  translate(width / 2, height / 2);

  // 노이즈 기반 언듈레이팅 서클
  // 수치를 올리면 변화가 더 커짐
  let baseRadius = 180;
  let noiseScale = map(mid, 0, 255, 0.01, 0.5);  // 중음에 따라 노이즈 강도 변화
  let amplitude = map(bass, 0, 255, 30, 200);    // 저음에 따라 진폭 변화

  // 색상 - 고음과 중음에 따라 더 화려하게 변화
  let hue = (frameCount * 0.5 + treble * 0.3) % 360;
  let r = map(sin(hue), -1, 1, 80, 255);
  let g = map(sin(hue + 120), -1, 1, 100, 255);
  let b = map(sin(hue + 240), -1, 1, 150, 255);

  // 중음에 따라 채도 강도 조절
  let saturation = map(mid, 0, 255, 0.3, 1);
  r = lerp(150, r, saturation);
  g = lerp(150, g, saturation);
  b = lerp(150, b, saturation);

  fill(r, g, b, 200);

  beginShape();
  for (let angle = 0; angle < 360; angle += 2) {
    let xoff = cos(angle) * noiseScale;
    let yoff = sin(angle) * noiseScale;

    // 노이즈 값 계산 - 0.01을 높이면 노이즈 빨라짐
    let n = noise(xoff + frameCount * 0.01, yoff + frameCount * 0.01);
    let offset = map(n, 0, 1, -amplitude, amplitude);

    let r = baseRadius + offset;
    let x = r * cos(angle);
    let y = r * sin(angle);

    vertex(x, y);
  }
  endShape(CLOSE);

  pop();
}

function updateParticles(bass, mid, treble) {
  for (let p of particles) {
    p.update(bass, mid, treble);
    p.show();
  }
}

class Particle {
  constructor() {
    this.reset();
  }

  reset() {
    this.pos = createVector(width / 2, height / 2);
    this.vel = p5.Vector.random2D().mult(random(0.3, 1.0));
    this.size = random(4, 8); // 크기 증가
    this.life = random(150, 250);
    this.maxLife = this.life;
  }

  update(bass, mid, treble) {
    this.life -= 1;

    let speedBoost = 0.4 + mid * 0.004;
    this.pos.add(this.vel.copy().mult(speedBoost));

    // 미세한 흔들림
    this.pos.add(p5.Vector.random2D().mult(treble * 0.002));

    if (this.life <= 0) {
      this.reset();
    }
  }

  show() {
    let alpha = map(this.life, 0, this.maxLife, 0, 220);

    // 파티클
    noStroke();
    fill(200, 220, 255, alpha);
    circle(this.pos.x, this.pos.y, this.size);

    // 글로우 효과
    fill(200, 220, 255, alpha * 0.3);
    circle(this.pos.x, this.pos.y, this.size * 1.8);
  }
}