집 > 기사 > 웹 프론트엔드 > p5.js 입문 튜토리얼의 마우스 상호작용 예

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

亚连원래의: 2018-05-29 17:12:482194검색

이 글은 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); 
}

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

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

관련 기사