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<. 🎜 >

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

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. Faites glisser l'objet de la souris

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

À 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!