How to implement and use p5.js mouse interaction-JS Tutorial-php.cn

How to implement and use p5.js mouse interaction

php中世界最好的语言

Release： 2018-05-10 15:13:12

Original

2994 people have browsed it

This time I will show you how to implement and use p5.js mouse interaction. What are the precautions for implementing and using p5.js mouse interaction. Here are practical cases, let’s take a look.

1. Commonly used keywords for mouse interaction

p5.js provides many keywords and functions for mouse operations. Commonly used keywords are:

mouseIsPressed: Keyword, if the mouse is pressed, it is true, otherwise it is false

mouseButton: Keyword, used to determine which key is pressed by the mouse

Case As follows:

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

Copy after login

When the left, middle, and right buttons of the mouse are pressed, "LEFT", "CENTER", and "RIGHT" will be displayed on the screen respectively.

View the effect:

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

##2. Mouse interactionCommonly used Function

Commonly used functions for mouse operations are as follows, as well as:

mouseClicked(): function, which is triggered once when the mouse is clicked

mousePressed(): function , triggered once when the mouse is pressed
mouseReleased(): function, triggered once when the mouse is released

We can use these functions to control when graphics are displayed on the screen, the case is as follows:

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

Copy after login

View the effect: http://alpha.editor.p5js.org/full/BkHEY8OUZ

3. Mouse dragging objects

Flexible use of the above keywords and functions can create many functions. Here is an example of dragging objects with the mouse.

The code is as follows:

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!