p5.js 입문 튜토리얼의 마우스 상호작용 예

이 글은 p5.js 입문 튜토리얼에서 주로 마우스 상호작용의 예시를 소개하고 있으니 참고용으로 올려보겠습니다.

이 글에서는 p5.js 입문 튜토리얼에서 마우스 상호 작용의 예를 소개하고 이를 모든 사람과 공유합니다. 자세한 내용은 다음과 같습니다.

1. 마우스 상호 작용에 대한 일반적인 키워드

p5.js는 다양한 기능을 제공합니다. 마우스 작업에 사용되는 키 일반적으로 사용되는 단어 및 기능은 다음과 같습니다.

mouseIsPressed: 키워드, 마우스를 누르면 true, 그렇지 않으면 false

mouseButton: 키워드, 마우스가 누르는 버튼을 결정하는 데 사용됨

경우는 다음과 같습니다.

function setup() {  
 createCanvas(400, 400); 
}  
function draw() {  
 background(220); 
 if (mouseIsPressed) { 
  textAlign(CENTER); 
  textSize(30); 
  if (mouseButton == LEFT) 
   text("LEFT",200,height/2); 
  if (mouseButton == RIGHT) 
   text("RIGHT",200,height/2); 
  if (mouseButton == CENTER) 
   text("CENTER",200,height/2); 
 } 
}

마우스의 왼쪽, 가운데, 오른쪽 버튼을 누르면 화면에 각각 "LEFT", "CENTER", "RIGHT"가 표시됩니다.

효과 보기:

http://alpha.editor.p5js.org/full/BkEcwrdUb

2. 마우스 상호 작용에 일반적으로 사용되는 기능

마우스 작업에 일반적으로 사용되는 기능은 다음과 같습니다. :

mouseClicked() : 마우스를 클릭할 때 한 번 실행되는 함수
mousePressed(): 마우스를 눌렀을 때 한 번 실행되는 함수
mouseReleased(): 마우스를 놓을 때 한 번 실행되는 함수

다음을 사용할 수 있습니다. 화면에 그래픽이 표시될 때 제어하는 ​​기능, 사례는 다음과 같습니다:

var showEllipse=false; 
var showRect=false; 
function setup() {  
 createCanvas(400, 400); 
}  
function draw() {  
 background(220); 
 if (mouseIsPressed){ 
  ellipse(50, height/2, 50, 50); 
 } 
 if(showEllipse){ 
    ellipse(200, height/2, 50, 50); 
 } 
 if(showRect){ 
  rectMode(CENTER); 
  rect(350,height/2,50,50);  
 } 
} 
function mouseClicked(){ 
 showEllipse=!showEllipse; 
} 
 
function mousePressed(){ 
 showRect=true; 
} 
function mouseReleased(){ 
 showRect=false; 
}

효과 보기: http://alpha.editor.p5js.org/full/BkHEY8OUZ

3. 마우스로 개체

위의 키워드와 기능을 유연하게 사용하면 다양한 기능을 수행할 수 있습니다. 마우스로 개체를 드래그하는 예입니다.

코드는 다음과 같습니다.

var x=200; 
var y=200 
var r=50; 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r){ 
  x=mouseX; 
  y=mouseY; 
 } 
 ellipse(x,y,r,r); 
}

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

vuejs의 v-if와 v-show의 차이점과 v-show가 작동하지 않는 문제에 대해

콘솔을 사용하여 디버그하는 10가지 고급 기술 요약

노드 모듈에 대한 심층적인 이해

위 내용은 p5.js 입문 튜토리얼의 마우스 상호작용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!