Heim > Web-Frontend > js-Tutorial > Hauptteil

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

亚连
Freigeben: 2018-05-30 10:01:13
Original
1980 Leute haben es durchsucht

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); 
}
Nach dem Login kopieren

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; 
}
Nach dem Login kopieren

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; 
 } 
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage