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><p>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! </p>
<p>추천 자료: </p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-396005.html" target="_blank">vue+Echarts를 사용하여 클릭 강조 표시(코드 포함) 구현 </a><br></p>
<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395998.html" target="_blank">마우스 오버레이 강조 표시 노드 관계 번호 구현 단계 </a><br></p></r>

위 내용은 p5.js 마우스 상호작용 구현 및 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!