사운드

사운드 입출력 기능 연동 셋업 코드

• 마이크 소리의 기본 값 자체가 매우 작음.

• map함수로 매핑하고, mouseClicked() 함수로 체크해보기.

• 브라우저 주소 창에 알림 창이 뜸.

• openprocessing 스케치의 사운드 볼륨 아이콘이 활성화되었는지 체크하기.

• https://p5js.org/ko/examples/sound-mic-input.html

let mic;
let original_mic = 0;
let mic_value = 0;
function setup() {
    mic = new p5.AudioIn();      // 마이크 연결
    mic.start();                 // 마이크 시작
}
function draw() {
    original_mic = mic.getLevel();     // 마이크 원래 소리 크기
    // mic.getLevel() * 100
    mic_value = original_mic; 
    // map(original_mic, 0, 100, 10, 600);
}
function mouseClicked() {
    console.log(original_mic);
    console.log(mic_value);
}

사운드 데이터를 변수로

• 글로벌 변수: 여러 함수에서 쓰이는 변수들은 함수 밖에서 생성.

• 지역 변수: 한 개의 함수 안에서만 쓰이면 함수 안에서 생성.

• (javascript 외의 다른 언어에서는 관련 문법이 조금 다를 수 있음)

/* 함수 밖에서 만들면 글로벌 변수. 아무데서나 가져다 쓸 수 있음 */
let mic;
let original_mic = 0;
let mic_value = 0;

function setup() {
    /* 함수 안에서 처음 만들면 지역 변수*/
    let localVar = 0;
}
function draw() {
    /* 함수 안에서 처음 만들면 지역 변수*/
    let localVar = 0;
}

---

map(), constrain() 함수로 사운드 데이터 값 조정하기

값이 최소값과 최대값을 넘어가면 반응하지 않도록 한다.

• constrain()

• (원래값, 최소값, 최대값)

  • 원래값이 최소, 최대 숫자를 오버하면 반응하지 않음.

function draw() {
    constrain(mouseX, 100, 200);
    sphere(mouseX);
}

---

map() 함수로 값을 환산한다.

• 예: 원래 숫자 값이 1 ~ 10 범위 => 새로운 최소 ~ 최대 숫자 range로 환산할 수 있다.

• map(실제값, 실제 최소값, 실제 최대값, 변환할 최소값, 변환할 최대값)

• 마이크 데이터는 원래 0~1 사이이다. 너무 숫자가 작으니, 더 큰 숫자 범위로 매핑해서 사용하자.

function draw() {
    let map_mic = map(original_mic, 0, 1, 5, 50);
    ellipse(width/2, height/2, map_mic, 50);
}

---

사운드 값을 다른 함수의 파라미터에 응용하기.

• 도형의 사이즈: scale 함수 혹은 도형 함수 파라미터

  • scale 함수: x축으로 몇 배? y축으로 몇 배? z축으로 몇 배?

• 도형의 위치: translate

• 반지름: 삼각함수 * radius

• 회전: rotateX, rotateY, rotateZ

• 단, 사운드 숫자 값은 1초에도 몇 번씩 바뀌기 때문에, 모든 곳에 쓰면 어지럽다. 여러 방면으로 실험해보고 취향에 따라 적절하게 배치할 것.

테크닉 소개

https://openprocessing.org/sketch/1692966

• noise 함수

• beginShape, vertex, endShape

• 검정색 라인도 같이 그리면서 지워지는 효과