Exemple d'interaction avec la souris à l'aide de p5.js

Cet article vous présente principalement l'exemple d'interaction avec la souris dans le tutoriel d'introduction de p5.js. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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 » seront affichés respectivement à l’écran.

2. Fonctions couramment utilisées pour l'interaction avec la souris

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

mouseClicked() : fonction, se déclenche une fois lorsque la souris est cliquée
mousePressed() : fonction, se déclenche une fois lorsque la souris est enfoncée
mouseReleased() : fonction, se déclenche une fois lorsque la souris est relâchée

Nous pouvons utiliser ces fonctions pour contrôler le moment où afficher les graphiques à l'écran, l'exemple 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; 
}

3. l'objet souris

Utilisez les mots-clés et les fonctions ci-dessus de manière flexible pour 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); 
}

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!