p5.js와 Max for Live를 연결해 보자,
여러 가지 방법이 있다고 생각하지만, [jWeb] 객체를 사용하여 연결하는 것이
제일 좋은 느낌이었으므로 소개합니다.

템플릿

Github 리포지토리의 샘플 코드입니다.

여기!
다운로드

사용법

Github에서 폴더별로 받으면,
다음과 같은 파일이 있다고 생각합니다.

README.md 　 　 　

index.html

sketch.js

template.maxpath

기본적으로 만나는 것은 'sketch.js'와 'template.maxpat'입니다.

Max측(M4L)

template.maxpath를 두 번 클릭하여 열어보십시오.
※Max를 가지고 있지 않은 분은, 먼저 인스톨 할 필요가 있습니다.
(무료판에서도 열 수 있습니다!저장을 할 수 없을 뿐!)

다음과 같은 패치로되어 있습니다.



검은 색 큰 영역에 마우스를 올리면 영역이 움직일 것입니다.
이 영역에 P5.js로 만든 그리기 결과가 표시됩니다.

오른쪽의 빨간색, 녹색 및 파란색 슬라이더는 [pak] 객체를 전달하고 값을 p5.js에 전달합니다.

검은 영역 아래쪽에 [route output] 객체가 있고, 어쨌든 숫자가 움직이고 있다고 생각합니다.

p5.js 측에서 output이라는 이름으로 지정한 변수의 값이 반환되고 있습니다.
이 샘플에서는 p5.js의 내장 변수 인 frameCount가 반환됩니다.

P5.js 측

그런 다음 sketch.js를 열어보십시오.

var s = function(p) {
       var v1 = 0;
       var v2 = 0;
       var v3 = 0;
//--------------- Setup ---------------------
   p.setup = function() {
       p.createCanvas(innerWidth, innerHeight);
       window.max.bindInlet('set_value', function(_v1, _v2, _v3) {
           v1 = _v1;
           v2 = _v2;
           v3 = _v3;
   });
 };
//--------------- Draw ---------------------
   p.draw = function() {
       p.background(0);
       let mx = p.mouseX;
       let my = p.height / 2;
       p.rect(0, 0, mx, my);
       window.max.outlet('output', p.frameCount);
       p.fill(255);
       p.text(v1, 10, p.height - 20);
       p.text(v2, 10, p.height - 40);
       p.text(v3, 10, p.height - 60);
   };
   p.mousePressed = function(){

   }
//--------------- ReSize---------------------
 p.windowResized = function() {
       p.resizeCanvas(innerWidth, innerHeight);
 }

};
const myp5 = new p5(s);

여기는 p5.js의 인스턴스 모드라는 쓰는 방법으로 작성되었습니다.

인스턴스 모드 설명 은, The Cording Train 시리즈 중, Daniel shiffman 선생님이 가 주시고 있으므로 즐겁게 공부할 수 있다고 생각합니다!

Setup 함수 내에서 다음과 같은 설명이 있음을 확인할 수 있다고 생각합니다.

window.max.bindInlet('set_value', function(_v1, _v2, _v3) {

           v1 = _v1;
           v2 = _v2;
           v3 = _v3;
   });

여기에서 Max 측에서 값을 받고 있습니다.
window.max.bindInlet() 함수에서
방금 확인한 적색, 녹색, 청색 슬라이더에서 [pak] 객체에서 입력되었습니다.
세 가지 값을 받고 변수에 할당합니다.

다음에 출력입니다만, 「window.max.outlet()」함수로 Max측에 출력할 수 있습니다.

window.max.outlet('output', p.frameCount);

이상이 간단한 P5.js를 Max 안에서 이용하는 방법이 됩니다.

M4L 장치에서 p5.js 사용

M4L 디바이스 중에서 활용하고 싶다면,
Ableton Live를 시작하고 M4L의 새로운 장치를 모든 트랙으로 드래그 앤 드롭합니다.



해당 장치를 모든 폴더에 저장하고,
방금 전 템플릿 세트를 동일한 폴더에 복사하고,
"template.maxpat"를 복사하여 붙여 넣으면 같은 방식으로 시작할 수 있습니다.

요약

이번에는 Mac for Live에서 P5.js를 호출하는 비행 도구적인 노하우의 공유가 되었습니다. 크리에이티브 코딩의 스킬을 가로 전개하거나, 반대로 P5.js나 Processing에서 놀고 있는 여러분이 Max에 흥미를 가져 주면 좋겠다, 라고 생각하면서 기사를 써 보았습니다. 그럼 또!

Taito Otani