P5.js로 오디오 시각화

15681 단어 processingp5.js
GRAND FRONTEND OSAKA 2016 의 해커슨으로 만든 p5.js를 사용한 오디오 시각화입니다.

Mac의 마이크에서 소리를 들고 볼륨에 따라 그림의 크기가 변경됩니다.
먼저 완성도와 프로그램. 브라우저는 Chrome에서만 확인되었습니다.



index.html
<!DOCTYPE html>
<html>
<head>
  <title>p5j</title>
  <meta charset="UTF-8">
</head>
<body>
<style type="text/css">

body{
  background: #000;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/addons/p5.sound.min.js"></script>
<script src="audio_visual.js" type="text/javascript"></script>

</body>
</html>

audio_visual.js
var theta;
var colorH = 0;
var startColor = 0;
var rotate_arg;
var mic;

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

  background(0);
  colorMode(HSB,100);
  colorH = random(100);
  startColor = colorH;
  strokeWeight(1);
  rotate_arg = random(3);

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

function draw() {
  background(0,5);
  frameRate(30);
  stroke(colorH,80,255,10);

  //macから音声を取得
  var sound_volume = mic.getLevel();
  var change_sound_volume = map(sound_volume,0,1,0,1000);
  theta = radians(change_sound_volume);

  translate(width/2,height/2);

  branch(change_sound_volume);

  // 色相の調整
  colorH = colorH + 4;

  if(abs(colorH - startColor) > 25){
    colorH = startColor;
  }

}


function branch(h) {

  //ボリュームによってhの値を変化させる
  h *= 0.4;

  if (h > 2) {
    push();    
    rotate(theta);
    strokeWeight(h);
    line(0, 0, 0, -h);
    translate(0, -h);
    branch(h);
    pop();

    push();
    rotate(-theta);
    strokeWeight(h);
    line(0, 0, 0, -h);
    translate(0, -h);
    branch(h);
    pop();

    push();
    rotate(theta+radians(180));
    strokeWeight(h);
    line(0, 0, 0, -h);
    translate(0, -h);
    branch(h);
    pop();

    push();
    rotate(-theta-radians(180));
    strokeWeight(h);
    line(0, 0, 0, -h);
    translate(0, -h);
    branch(h);
    pop();

  }
}

경위나 프로그램의 해설을 기술해 갑니다.

음성으로 변경하고 싶은 그림 만들기



이번 프로그램은 Processing의 Example에 있는 Tree 스케치 에서, 나무의 흩어져 있는 부분만 유용하고 있습니다.



Processing 사이트는 Processing용 코드로 작성되었으므로 p5.js용으로 다시 작성해야 합니다.
이번은 멘토의 Keita씨가 코드를 재작성해, GitHub로 업 해 주셨습니다.

그 밖에도 Processing과 p5.js에서의 쓰는 방법의 차이를 기술하고 있는 사이트가 있으므로, 그 근처도 참고가 될까 생각합니다.

branch 함수의 해설에 대해서는 Processing의 프로그램에 기재되어 있으므로, 여기서는 생략합니다.

js 로드



만든 js와 p5.js 파일을 html로 로드하는 것을 잊지 마십시오.
p5.js는 CDN으로 로드하기로 결정했습니다.

p5.js의 공식 사이트에서 다운로드 페이지에서 Single Files > CDN을 선택하고 https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.jshttps://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/addons/p5.sound.min.js를 복사하여 html에 붙여 넣습니다.
단순히 p5.js를 사용하고 싶다면 p5.min.js 그냥 충분하지만 음성 인식도 사용하기 때문에 p5.sound.js도 읽습니다.

index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/addons/p5.sound.min.js"></script>
<script src="audio_visual.js" type="text/javascript"></script>

이제 브라우저에서도 볼 수 있습니다.

마이크에서 입력



Processing 코드에서는 마우스의 x 좌표에 따라 나무가 닫히거나 열려 있었지만 마우스의 x 좌표를 Mac의 마이크에서 입력으로 변경합니다.

audio_visual.js
var mic;

function setup() {
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {

  //macから音声を取得
  var sound_volume = mic.getLevel();
  var change_sound_volume = map(sound_volume,0,1,0,1000);

  branch(change_sound_volume);
}
mic.getLevel() 는 0~1 사이의 값으로 반환되므로 map 함수를 사용하여 마이크의 볼륨을 0~1000까지 늘리고 변수 change_sound_volume 에 대입합니다.
매 프레임 branch 함수를 호출하고 인수에 change_sound_volume 를 넣는 것으로 볼륨의 크기에 의해 비주얼이 변화되도록 하고 있습니다.

미세 조정



그리고는 기호로 선의 굵기·회전·색등의 조정입니다.

볼륨에 의해 선의 굵기나 회전을 변화시켜, 또, 프레임마다 다른 색조에서도 정돈된 외형이 되도록 했습니다.startColor 와 colorH 의 값을 비교해, 차이가 지나치게 나오지 않도록 조정하고 있습니다.
if(abs(colorH - startColor) > 25){
    colorH = startColor;
  }

참고



p5.js
처리
p5aholic/GFO2016
Processing transition
p5js,ES6에서 파티클을 움직여보세요
p5.js에서 크리에이티브 코딩을 시작하세요!

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage