Was ist p5.js und wie benutzt man es?
Heute möchte ich p5 erklären.js. Ich bin auch ein p5.js Anfänger Versuchen wir also, mit p5 vertraut zu sein.js zusammen!
p5.js ist in JavaScript geschrieben, aber ursprünglich verarbeitet es (https://processing.org/). Processing ist ein visuelles Codierungstool für bildende Kunst. Das Interessante ist, dass die Verarbeitung nicht nur für Entwickler, sondern auch für Künstler, Designer, Forscher und diejenigen gedacht ist, die gerne Kunst machen möchten. p5.js wird in JavaScript verwendet, damit wir es mit DOM verwenden können.
Das Folgende ist das p5.js offizielle Seite.
https://p5js.org/
Wie benutzt man p5.js
Lassen Sie uns heute ein einfaches Zeug machen. Unser Ziel ist es, kleine Tipps zu kennen und eine Animation zu machen.
Schritt 1: Erstellen Sie eine HTML-Datei und erstellen Sie einen Link zu p5.js und Ihre eigene JavaScript-Datei.
Der einfachste Weg, um einen Link zu erhalten, ist zu gehen offizielle Seite und finde CDN. Kopiere etwas …/p5.min.js und fügen Sie es in Ihren HTML-Code ein.
Schritt 2: Machen Sie einen Kreis
creativeCanvas(Breite der Leinwand, Höhe der Leinwand) Funktion legt die Leinwandgröße fest.
background() Funktion legt eine Farbe der Leinwand, die wir machen. * Ich verwende Farbparameter, aber Sie können andere Parameter verwenden. Bitte beachten Sie die offizielle Website (https://p5js.org/reference/#/p5/background).
noStroke() Funktion bedeutet keine Gliederung der Ellipse.
Ellipse(x Position der Ellipse, y Position der Ellipse, die Breite der Ellipse, die Höhe der Ellipse) .funktion zeichnet die Ellipse.
Vergessen Sie nicht, Ihren HTML-Code in Ihrem Browser zu öffnen!
Schritt 3: Lass uns deine Ellipse bewegen!
Die Funktion draw() schleift für immer. Das einzige, was Sie tun müssen, ist, die y-Position auf 0 zu setzen und sie dann zu erhöhen. Dann erhalten Sie eine Animation, bei der sich Ihre Ellipse vom oberen zum unteren Rand Ihrer Leinwand bewegt.
Schritt 4: Mache viele Punkte und bewege sie unendlich
Machen wir den letzten Schritt hier.
random() Funktion macht eine zufällige Gleitkommazahl. In meinem Code setze ich „random (width)“. Dies bedeutet, dass sie 0 bis 500 zurückgeben würden, dh die maximale Breite der Leinwand. Wenn es nur random() , würde es von 0 bis 1 gesetzt. Dann bemerken Sie vielleicht schon … Wenn es zufällig ist (6, 10), würde es 6 bis 10 zurückgeben. Es ist ziemlich einfach zu verstehen, nicht wahr?
Das ist es heute! Ich hoffe, dass Sie einen Tipp von meinem Post bekommen können. Ich werde versuchen, kompliziertere Dinge zu tun und meine Erfahrungen hier später noch einmal zu teilen.