p5.js를 사용한 마우스 상호작용의 예

이 글은 주로 p5.js 입문 튜토리얼에서 마우스 상호 작용의 예를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

1. 마우스 상호 작용에 일반적으로 사용되는 키워드

p5.js는 마우스 작업에 대해 많은 키워드와 기능을 제공합니다. 일반적으로 사용되는 키워드는 다음과 같습니다.

mouseIsPressed: 키워드, 마우스를 누르면 true가 됩니다. 그 반대는 거짓입니다

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" 각각 화면에 표시됩니다.

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; 
}

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); 
}

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