Example of mouse interaction using p5.js

This article mainly introduces you to the example of mouse interaction in the p5.js introductory tutorial. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

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

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

2. Commonly used functions for mouse interaction

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

mouseClicked(): function , triggers once when the mouse is clicked
mousePressed(): function, triggers once when the mouse is pressed
mouseReleased(): function, triggers once when the mouse is released

We can use these functions to control when Display graphics 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; 
}

3. Mouse dragging objects

##Flexible Using the above keywords and functions, you 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); 
}

The above is the detailed content of Example of mouse interaction using p5.js. For more information, please follow other related articles on the PHP Chinese website!