P5.js는 사용자 정의 이벤트를 만들어 사용할 수 있는 JavaScript 라이브러리입니다. 사용자 정의 이벤트를 만들면 원하는 시점에 이벤트를 트리거하고 이를 처리할 수 있습니다. 이를 통해 코드를 구조화하고 상호작용을 개선할 수 있습니다.

다음은 P5.js에서 사용자 정의 이벤트를 만들고 처리하는 방법입니다.

이벤트 생성

먼저, 사용자 정의 이벤트를 생성해야 합니다. 이벤트를 생성하려면 Event 객체를 만들어야 합니다. 해당 이벤트에는 특정 이름과 원하는 데이터를 포함할 수 있습니다. 예를 들어, “customEvent”라는 이벤트를 만들고 “Hello, P5.js!”라는 데이터를 포함하는 경우 다음과 같이 작성할 수 있습니다.

let customEvent = new Event('customEvent');
customEvent.data = "Hello, P5.js!";

이벤트 트리거

이벤트를 트리거하려면 dispatchEvent() 메서드를 사용해야 합니다. 이를 통해 이벤트를 원하는 시점에 발생시킬 수 있습니다. 예를 들어, 마우스를 클릭할 때 “customEvent”를 트리거하는 코드는 다음과 같습니다.

function mouseClicked() {
  dispatchEvent(customEvent);
}

이벤트 처리

이제 이벤트를 처리해야 합니다. 이벤트를 처리하려면 addEventListener() 메서드를 사용하여 이벤트를 수신할 함수를 등록해야 합니다. 예를 들어, “customEvent”를 수신하여 데이터를 콘솔에 출력하는 함수는 다음과 같습니다.

function handleCustomEvent(event) {
  console.log(event.data);
}

document.addEventListener('customEvent', handleCustomEvent);

위의 코드에서 addEventListener()를 통해 “customEvent”를 수신하도록 등록하고, 이벤트가 발생하면 handleCustomEvent() 함수가 호출됩니다.

이제 “customEvent”를 트리거하면 해당 이벤트가 발생하고 처리 함수가 호출됩니다. 이를 통해 사용자 정의 이벤트를 만들고 사용하여 코드를 논리적으로 구성하고 상호작용을 개선할 수 있습니다.

참고 자료

• P5.js 공식 문서