Audio reactive visuals using p5.js

---

 

p5.js로 음악에 반응하는 아트워크 만들기

 

Awwwards의 다음 강의를 수강한 후 정리한 내용입니다.

https://www.awwwards.com/academy/course/audio-reactive-visuals-with-code

Audio Reactive Visuals with Code

 

---

 

1. p5.js 시작하기

 

1) p5.js 다운로드

 

우선 p5.js와 p5.sound를 다운로드한 후 index.html에 다음과 같이 작성하거나,

<script src="../p5.min.js"></script>

script src를 통해 link해야 한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/[p5_version]/p5.js"></script>

 

 

http://staging.p5js.org/get-started/

get started | p5.js

 

 

 

2) p5.js 기본 틀

 

function preload() {      audio = loadSound('');      img = loadImage('img/myimg.png');  }

 

• preload(): setup 함수 이전에, 외부 파일을 비동기적으로 로드하기 위해 사용된다.
• setup(): 처음 프로그램을 시작할 때 한 번만 실행된다. 보통 canvas를 생성하는 함수를 setup에서 실행한다.
• draw(): 이 안에 있는 명령은 프로그램이 끝날 때까지 반복적으로 실행된다. 각 구문은 순서대로 실행되고, 마지막 줄이 실행되면 다시 첫 번째 줄로 돌아가 실행된다.

 

 

2. Audio analysis

 

사운드 파일에는 다음과 같은 다양한 요소들이 있다.

각 요소들의 값에 따라 캔버스 내 도형들의 모양이나 색 등이 달라지게 만드는 것이 본 프로젝트의 목표이다.

 

1) Amplitude

   진폭. 사운드에서 amplitude는 소리의 크기를 나타낸다.

   다음 코드와 같이 setup에서 amplitude 객체를 얻고 draw 함수에서 매 순간의 amplitude 크기를 getLevel 메서드를 통해 얻을 수 있다.

let amplitude; function setup(){      amplitude = new p5.Amplitude(); }  function draw(){      let level = amplitude.getLevel(); }

 

 

 

2) FFT

    FFT는 audio에서 각 frequency(진동수)에 따른 소리의 크기를 분리해주는 알고리즘이다.

    소리의 진동수는 곧 소리의 높낮이인데,  FFT를 통한 분석(하기 코드의 fft.analyze)을 거치면 

    각 진동수 구간의 진폭(소리의 크기)을 담은 배열을 얻을 수 있다.

   

    예를 들어 분석 후 크기가 32인 spectrum 배열을 얻었다고 하자.

    spectrum[0]은 가장 낮은 소리의 크기를 나타내고 index의 크기가 커질 수록 더 높은 소리의 크기를 나타낸다.

 

 

 

Syntax

 

new p5.FFT([smoothing], [bins]);

     

     - 여기서 smoothing은 0초과 1미만의 값으로, 0.8이 기본값이다. 1에 가까울수록  각 진동수 구간의 진폭 차이가 줄어든다= smooth 해진다. 

     - bins는 구간의 개수이다. (배열의 요소 수) 16이상 1024이하의 2의 제곱수여야 한다.

 

출처: https://www.cuidevices.com/blog/understanding-audio-frequency-range-in-audio-design

 

https://p5js.org/reference/#/p5.FFT

reference | p5.js

 

     예시 코드.

let fft; function setup(){      fft = new p5.FFT(0.7, bins); }  function draw(){      let spectrum = fft.analyze();          for (let i=0; i<spectrum.length; i++) {             let r = map(spectrum[i], 0, 120, 0, 6);             let x = starVertex[i][0];             let y = starVertex[i][1];             star(starVertex[i][0], starVertex[i][1], r/4, r, starVertex[i][2]);      } }

 

 

 

3) 그 외 p5.js의 주요 함수

 

- map

  각 구간의 진폭 값에 따라 사각형 높이가 달라지게 하고 싶을 때, 진폭 값 범위와 사각형 높이 값 범위를 고려해 값을 변환해야 한다.

  map은 이와 같은 상황에 변환을 아주 쉽게 해준다.

 

- rect

  대표적으로 rect(사각형)를 예시로 가져왔는데, 도형을 그리는 방법은 다음과 같다.