Example of mouse interaction in p5.js introductory tutorial

This article mainly introduces the examples of mouse interaction in the p5.js introductory tutorial. Now I share it with you and give it as a reference.

This article introduces the example of mouse interaction in the p5.js introductory tutorial and shares it with everyone. The details are as follows:

1. Commonly used keywords for mouse interaction

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

mouseIsPressed: Keyword, if the mouse is pressed, it is true, and vice versa. Is false

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

The case is 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.

View the effect:

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

## 2. Common mouse interaction functions

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

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

mousePressed(): function, triggered when the mouse is pressed Once
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; 
}

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

3. Drag the mouse to objects

Flexibly use the above keywords and functions to 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 what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About the difference between v-if and v-show in vuejs and the problem that v-show does not work

A summary of 10 advanced techniques for using Console to debug

In-depth understanding of Node module module

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