Comment implémenter et utiliser l'interaction avec la souris p5.js

Cette fois, je vais vous montrer comment implémenter et utiliser l'interaction avec la souris p5.js. Quelles sont les précautions pour implémenter et utiliser l'interaction avec la souris p5.js. Voici un cas pratique, jetons un coup d'œil. .

1. Mots-clés couramment utilisés pour l'interaction avec la souris

p5.js fournit de nombreux mots-clés et fonctions pour les opérations de la souris sont :

mouseIsPressed : Mot-clé, si la souris est enfoncée, c'est vrai, sinon c'est faux

mouseButton : Mot-clé, utilisé pour déterminer quelle touche est enfoncée par la souris

Case Comme suit :

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

Lorsque les boutons gauche, central et droit de la souris sont enfoncés, « GAUCHE », « CENTRE » et « DROITE » s'afficheront respectivement à l'écran.

Voir l'effet :

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

2. Interaction avec la souris Fonction couramment utilisée

Les fonctions couramment utilisées pour les opérations de la souris sont les suivantes, ainsi que :

mouseClicked() : fonction, qui est déclenchée une fois lorsque le on clique sur la souris
mousePressed() : fonction, déclenchée une fois lorsque la souris est enfoncée
mouseReleased() : fonction, déclenchée une fois lorsque la souris est relâchée

Nous pouvons utiliser ces fonctions pour contrôler le moment où les graphiques s'affichent à l'écran, le cas est le suivant :

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

Voir l'effet : http://alpha.editor.p5js.org/full/BkHEY8OUZ

3. Faites glisser l'objet de la souris

En utilisant les mots-clés et les fonctions ci-dessus de manière flexible, vous pouvez créer de nombreuses fonctions. Voici un exemple de déplacement d'objets avec la souris.

Le code est le suivant :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le. Site Web chinois PHP !

Lecture recommandée :

vue+Echarts pour implémenter la mise en surbrillance des clics (avec code)

superposition de souris echarts surlignage Étapes pour implémenter le numéro de relation de nœud

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!