🌟 p5.js 사운드 : 마이크 입력 받기

◆ 설계

• 캔버스 크기 : 800 x 800
• 배경 색상 : grayscale 15, 매 프레임마다 40의 알파값 주어서 부드럽게 페이드 아웃
• 사운드 반응하는 원의 반지름 : 최소 $100$ ~ 최대 $330$
• 원의 색상 : grayscable 255, alpha 150
• 입력값 : amp.getLevel() → 0.1 ~ 0.3 정도로 설정
• 사운드 값 → 원 반지름으로 변환 로직 : map(), constrain() 사용

◆ 사용하는 객체

p5.js에서 마이크 입력을 시각화할 때는 아래 두 객체를 사용합니다.

1. p5.AudioIn

• 사용자의 마이크 입력을 받아오는 객체입니다.
• 브라우저 보안 정책상 사용자의 제스처(화면 클릭 등) 이후에 활성화되어야 합니다.

1. p5.Amplitude

• 현재 오디오 신호의 평균 진폭을 $0.0$ ~ $1.0$ 범위로 전환합니다.
• 실시간 오디오 레벨을 측정할 때 적합합니다.
• 주파수 분석이 아닌 전체 음량의 크기만 측정합니다.

◆ 뼈대 코드

• 아래 코드는 동작하지 않습니다.

let mic;
let amp;

function setup() {
  createCanvas(800, 800);
  background(15);
  
  // 마이크 입력 객체 생성
  mic = new p5.AudioIn();
  mic.start();
  
  // 진폭을 분석하는 객체 생성
  amp = new p5.Amplitude();
  amp.setInput(mic);
}

function draw() {
  background(15, 40);
  
  // 현재 마이크 입력 레벨 (0.0 ~ 1.0)을 저장하는 변수
  let level = amp.getLevel();

  // 레벨 값을 반지름을 변환
  // 입력 범위(0 - 0.3)을 반지름 범위(30 - 330)으로 맵핑
  // 반지름을 30 - 330 범위로 제한
  let radius = map(level, 0, 0.3, 30, 330);
  radius = constrain(radius, 30, 330);
  
  noStroke();
  fill(255, 150);
  
  ellipse(width / 2, height / 2, radius * 2, radius * 2);
}

// 브라우저의 오디오 컨텍스트를 활성화하기 위한 액션
function mousePressed() {
  getAudioContext().resume();
}

이렇게 기본 뼈대를 잡고 브라우저에서 마이크 권한도 주었지만 반응이 없습니다. 이유는 브라우저의 보안 정책 때문으로 다음의 내용을 추가해야지 정상 작동합니다.

● 마우스를 클릭해야만 마이크가 시작되도록 명시
● AudioContext 상태를 직접 확인

Sound Interactive Circle

let mic;
let amp;
let started = false;   // 초기 상태를 false로 설정

function setup() {
  createCanvas(800, 800);
  background(15);

  mic = new p5.AudioIn();
  amp = new p5.Amplitude();
}

function draw() {
  background(15, 40);

  if (!started) {
    fill(200);
    textAlign(CENTER, CENTER);
    textSize(16);
    text("화면을 클릭하면 마이크가 활성화됩니다", width / 2, height / 2);
    return;
  }

  let level = amp.getLevel();

  let radius = map(level, 0.0, 0.2, 30, 330);
  radius = constrain(radius, 30, 330);

  noStroke();
  fill(255, 150);
  ellipse(width / 2, height / 2, radius * 2, radius * 2);
}

function mousePressed() {
  // 오디오 컨텍스트 강제 시작
  userStartAudio();

  mic.start(() => {
    amp.setInput(mic);
    started = true;    		 // 상태를 true로 전환
    console.log("마이크 시작됨");
  });
}

입력 레벨을 조정하여 비주얼라이제이션에 변화를 줄 수 있습니다.
map(level, 0.0, 0.2, 30, 330);
에서 레벨 값의 범위를 0.0 ~ 0.2로 설정하였는데, 이 수치를 작은 소리에도 크게 반응하도록 민감도를 올리거나 반대로 할 수도 있습니다.

• 민감 : 0.002 - 0.07
• 둔감 : 0.1 - 0.7

◆ 이후 발전 방향

다음 단계로는

• 부드러운 변화를 위한 lerp 적용
• 전체 레벨값이 아닌 FFT(고속 푸리에 변환)기반으로 형태를 변환
• 레벨 값에 따라 색 변화, 노이즈 값 변화, 속도 변화
  등을 추가할 수 있습니다.