[javascript] P5.js에서 키보드와 마우스 입력을 처리하는 방법은 무엇인가요?

04 Dec 2023

javascript

p5.js는 JavaScript 기반의 크리에이티브 코딩 라이브러리로, 키보드와 마우스 입력을 간편하게 처리할 수 있는 기능을 제공합니다.

키보드 입력 처리하기

키보드 입력을 처리하기 위해서는 keyIsPressed 변수와 key 변수를 사용할 수 있습니다. keyIsPressed 변수는 현재 키보드가 눌려있는지를 나타내는 불리언 값이며, key 변수는 현재 눌린 키의 값을 문자열로 나타냅니다.

function draw() {
  if (keyIsPressed) {
    // 키보드가 눌려있는 동안 실행할 코드 작성
    console.log("Pressed key: " + key);
  }
}

위의 예제에서는 draw 함수 내에서 keyIsPressed 변수를 이용해 현재 키보드가 눌려있는지를 확인하고, key 변수를 이용해 눌린 키 값을 출력하는 방법을 보여줍니다. 필요에 따라 if문 안에 원하는 코드 작성을 할 수 있습니다.

마우스 입력 처리하기

마우스 입력을 처리하기 위해서는 mouseIsPressed 변수와 mouseButton 변수를 사용할 수 있습니다. mouseIsPressed 변수는 현재 마우스 버튼이 눌려있는지를 나타내는 불리언 값이며, mouseButton 변수는 현재 눌린 마우스 버튼의 값을 나타냅니다. 마우스 버튼은 LEFT, CENTER, RIGHT 중 하나의 값을 가질 수 있습니다.

function mousePressed() {
  // 마우스 버튼이 눌릴 때 실행할 코드 작성
  console.log("Mouse button: " + mouseButton);
}

위의 예제에서는 mousePressed 함수를 사용하여 마우스 버튼이 눌릴 때 실행할 코드를 작성하는 방법을 보여줍니다. 이외에도 mouseReleased 함수와 mouseClicked 함수를 사용하여 마우스 버튼 이벤트에 대한 처리를 할 수도 있습니다.

p5.js에서는 키보드와 마우스 입력을 처리하는 다양한 함수와 변수를 제공하므로, 필요에 따라 문서를 참고하며 다양한 기능을 활용할 수 있습니다.

키보드 입력 처리하기

마우스 입력 처리하기

참고자료