Exemple d'interaction avec la souris dans le didacticiel d'introduction de p5.js

Cet article présente principalement les exemples d'interaction avec la souris dans le tutoriel d'introduction de p5.js. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente un exemple d'interaction avec la souris dans le didacticiel d'introduction de p5.js et le partage avec tout le monde. Les détails sont les suivants :

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

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

mouseIsPressed: mot-clé si la souris est enfoncée. c'est vrai, et vice versa. Est faux

mouseButton : mot-clé, utilisé pour déterminer quel bouton est enfoncé par la souris

Le cas est le suivant :

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. Fonctions d'interaction communes avec la souris<. 🎜 >

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

mouseClicked() : fonction, déclenchée une fois lorsque l'on clique sur la souris

mousePressed() : fonction, déclenchée lorsque la souris est enfoncée une fois
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 sont affichés à l'écran. comme suit :

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

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 ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. à l'avenir.

Articles connexes :

À propos de la différence entre v-if et v-show dans vuejs et du problème selon lequel v-show ne fonctionne pas

Un résumé de 10 techniques avancées d'utilisation de la console pour déboguer

Compréhension approfondie du module Node

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!