Beispiel einer Mausinteraktion im Einführungs-Tutorial zu p5.js

In diesem Artikel werden hauptsächlich die Beispiele der Mausinteraktion im Einführungs-Tutorial von p5.js vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

In diesem Artikel wird ein Beispiel für die Mausinteraktion im Einführungs-Tutorial von p5.js vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

1. Gängige Schlüsselwörter für die Mausinteraktion

p5.js bietet viele Schlüsselwörter und Funktionen für Mausoperationen:

mouseIsPressed: Schlüsselwort. es ist wahr und umgekehrt. Ist falsch

mouseButton: Schlüsselwort, das verwendet wird, um zu bestimmen, welche Taste von der Maus gedrückt wird

Der Fall ist wie folgt:

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

Wenn die linke, mittlere und rechte Maustaste gedrückt wird, werden „LINKS“, „MITTE“ bzw. „RECHTS“ auf dem Bildschirm angezeigt.

Sehen Sie sich den Effekt an:

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

2. Allgemeine Mausinteraktionsfunktionen

Häufig verwendete Funktionen für Mausoperationen sind wie folgt, außerdem:

mouseClicked(): Funktion, die einmal ausgelöst wird, wenn mit der Maus geklickt wird
mousePressed() : Funktion, wird ausgelöst, wenn die Maus einmal gedrückt wird
mouseReleased(): Funktion, wird einmal ausgelöst, wenn die Maus losgelassen wird

Mit diesen Funktionen können wir steuern, wann Grafiken auf dem Bildschirm angezeigt werden wie folgt:

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

Effekt anzeigen: http://alpha.editor.p5js.org/full/BkHEY8OUZ

3. Ziehen Sie das Objekt mit der Maus

Mit den oben genannten Schlüsselwörtern und Funktionen können Sie viele Funktionen erstellen.

Der Code lautet wie folgt:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es für alle hilfreich sein wird Zukunft.

Verwandte Artikel:

Über den Unterschied zwischen v-if und v-show in Vuejs und das Problem, dass v-show nicht funktioniert

Eine Zusammenfassung von 10 fortgeschrittenen Techniken zur Verwendung der Konsole zum Debuggen

Detailliertes Verständnis des Node-Moduls

Das obige ist der detaillierte Inhalt vonBeispiel einer Mausinteraktion im Einführungs-Tutorial zu p5.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!