[javascript] P5.js에서 컨트롤러 및 센서와의 통합을 어떻게 진행하나요?

04 Dec 2023

javascript

P5.js는 사용자 인터페이스를 만들고 센서와의 상호 작용을 위한 컨트롤러를 이용하는데에 매우 편리한 기능을 제공합니다. 이를 위해 ‘p5.dom’ 라이브러리를 사용하여 컨트롤러 및 센서와의 연결을 가능하게 할 수 있습니다.

먼저, p5.dom 라이브러리를 스케치에 추가합니다. 이를 위해 <script> 태그를 사용하거나, <head> 태그 안에서 p5.dom 라이브러리 스크립트를 로드합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.dom.min.js"></script>

이제 컨트롤러를 만들어 보겠습니다.

let slider;

function setup() {
  createCanvas(400, 400);
  
  // 슬라이더 생성
  slider = createSlider(0, 255, 0);
  slider.position(10, 10);
}

function draw() {
  background(220);
  
  // 슬라이더 값을 이용하여 원 그리기
  let val = slider.value();
  fill(val);
  circle(width/2, height/2, 100);
}

위의 예제에서는 createSlider() 함수를 사용하여 슬라이더를 만들고, position() 함수를 사용하여 슬라이더의 위치를 지정합니다. slider.value()를 통해 슬라이더 값에 접근할 수 있고, 이 값을 가지고 그림을 그릴 때 사용할 수 있습니다.

위의 예제는 슬라이더를 이용하여 배경 색을 변경하는 간단한 예시입니다. P5.js에서는 다른 종류의 컨트롤러도 제공하며, 이를 사용하여 다양한 상호 작용을 구현할 수 있습니다.

이제 센서와의 통합을 살펴보겠습니다. 주로 웹 브라우저에서 접근 가능한 센서를 이용할 수 있습니다. 예를 들어, 가속도계 센서를 이용하여 스마트폰의 기울기를 감지하거나, 마이크를 이용하여 소리의 크기를 측정할 수 있습니다.

이러한 센서와의 통합은 p5.dom 라이브러리와 브라우저의 Web API를 함께 이용하여 구현할 수 있습니다. 여기서는 가속도계 센서를 이용한 예시를 보여드리겠습니다.

let xAcceleration = 0;

function setup() {
  createCanvas(400, 400);
  
  if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', handleMotion);
  }
}

function handleMotion(event) {
  xAcceleration = event.accelerationIncludingGravity.x;
}

function draw() {
  background(220);
  
  // 센서 값을 이용하여 원 그리기
  let x = map(xAcceleration, -10, 10, 0, width);
  circle(x, height/2, 100);
}

위의 예제에서는 handleMotion() 함수를 통해 가속도계의 x축 가속도 값을 가져옵니다. map() 함수를 사용하여 센서 값의 범위를 캔버스의 범위로 변환한 후, 그래픽을 그립니다.

참고로, 센서를 이용한 통합은 사용자의 동의를 얻어야 할 수도 있습니다. 이를 위해 브라우저의 권한 요청 기능을 이용하거나, HTTPS를 통해 앱을 배포하는 등의 방법을 사용할 수 있습니다.

이것은 P5.js에서 컨트롤러 및 센서와의 통합을 진행하는 방법에 대한 간단한 예시입니다. 더 많은 정보는 P5.js 공식 문서를 참조하십시오.

참고 문서: