p5.js Einführungs-Tutorial, Beispielcode für die Ballanimation

In diesem Artikel wird hauptsächlich der Beispielcode für die kleine Ballanimation des Einführungs-Tutorials von p5.js vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

1. Ein sich bewegender Ball

In diesem Abschnitt werden wir p5.js verwenden, um einen kleinen Ball zu erstellen, der sich auf dem Bildschirm bewegt.

Die Idee besteht darin, Variablen zu verwenden, um die Position des Balls aufzuzeichnen und sie dann in der Funktion draw() zu ändern. Da die Funktion draw() weiterhin ausgeführt wird (Frequenz beträgt FPS, Standard 60 Bilder/). zweitens), also bewegt sich der Ball.

Der Code lautet wie folgt:

var x=0; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //width和height是关键词，分别是Canvas的宽和高 
 x+=2; 
 ellipse(x,height/2,20,20); 
}

2. Der springende Ball

Nach einer Weile bewegt sich der Ball aus dem Bildschirm. Um zu verhindern, dass der Ball den Bildschirm verlässt, fügen wir eine Variable hinzu, um die Geschwindigkeit zu steuern und die Geschwindigkeit umzukehren, wenn der Ball den Bildschirm verlässt.

Der Code lautet wie folgt:

var x=0; 
var speed=2; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 ellipse(x,height/2,20,20); 
 //width和height是关键词，分别是Canvas的宽和高 
 x+=speed; 
 if(x>width||x<0){ 
 speed*=-1; 
}

Weiter können wir zwei Variablen verwenden, um die Geschwindigkeit in x- und y-Richtung zu realisieren die Bewegung des Balls auf der Leinwand. Auswurffunktion.

Der Code lautet wie folgt:

var x=200; 
var y=200; 
var Vx=2; 
var Vy=3; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 ellipse(x,y,20,20);//width和height是关键词，分别是Canvas的宽和高 
 x+=Vx; 
 y+=Vy; 
  if(x>width||x<0){ 
    Vx*=-1; 
 } 
 if(y>height||y<0){ 
    Vy*=-1; 
 } 
}

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

Verwandte Artikel:

Beispiel für eine einfache Methode zum Lesen und Schreiben von Excel-Inhalten in nodejs

node.js-Blogprojekt Entwicklungshinweise

Detaillierte Erklärung des Unterschieds zwischen „==" und „===" in JavaScript

Das obige ist der detaillierte Inhalt vonp5.js Einführungs-Tutorial, Beispielcode für die Ballanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!