Share
p5.js ist eine JavaScript-Bibliothek für Künstler, Designer und Pädagogen mit einem besonderen Fokus auf die bildenden Künste. Es ist eine extrem einfache Möglichkeit, interaktive Kunstwerke, Animationen und Prototypen im Browser zu erstellen.
Es ist stark von der Programmiersprache Processing inspiriert, die sich selbst als "flexibles Software-Skizzenbuch" bezeichnet. Processing wurde 2001 mit dem Ziel gegründet, Nicht-Programmierern das Programmieren von Code beizubringen, ist jedoch seitdem zur bevorzugten Sprache für Zehntausende Künstler, Designer und Studenten geworden.
p5.js verfolgt jedoch ein etwas anderes Ziel. p5 bringt die Leistung und Einfachheit der Verarbeitung ins Web. In diesem Tutorial erfahren Sie, wie Sie Ihre erste p5 "Skizze" erstellen und einige lustige Dinge, die Sie damit machen können.
Da p5 für das Web entwickelt wurde, benötigen wir eine Webseite. Erstellen Sie ein neues Verzeichnis auf Ihrem Computer und erstellen Sie ein index.html Datei darin. Wir brauchen hier nicht viel, nur die Standard-Bits und Bobs.
Meine erste p5-Skizze
Als Nächstes benötigen wir die p5-Bibliothek selbst, die wir leicht von der p5-Downloadseite herunterladen können. Wir benötigen nur die Basisbibliothek, laden Sie also einfach die einzelne Dateiversion von p5 herunter.
Legen Sie die heruntergeladene Datei in demselben Verzeichnis ab wie Ihre HTML-Datei. Wir können es dann in unserem HTML-Code wie folgt referenzieren:
Meine erste p5-Skizze
Wir benötigen auch eine JavaScript-Datei für unsere Skizze. Eine Skizze heißt Verarbeitung sprechen für die Zeichnung oder Animation, die wir mit p5 erstellen. Erstellen Sie erneut eine Datei im selben Verzeichnis und rufen Sie sie an meine-erste-sketch.js. Darauf muss verwiesen werden nach dem die p5-Bibliothek, so dass unser Skript alle von p5 bereitgestellten Methoden kennt.
Das ist alles Setup! Wir sind jetzt bereit, unser Meisterwerk zu schaffen.
p5 gibt uns zwei Methoden, die beim Erstellen einer Skizze wesentlich sind: Konfiguration() und zeichnen(). Sie können wahrscheinlich erraten, wofür jeder von ihnen ist, aber sie haben einen wichtigen versteckten Unterschied. Aufmachen meine-erste-sketch.js und füge folgendes hinzu:
Accentsconagua
// Setup Code Funktion setup () console.log ('Hi from setup!'); // Zeichnungscode-Funktion draw () console.log ('Hi from draw!'); Auch wenn wir diese Funktionen gerade definiert und nichts anderes getan haben, führt p5 dies aus, da es von p5 erwartet wird. Es wird sie jedoch automatisch ausführen, wenn wir die Seite laden. Öffne dein index.html in Ihrem bevorzugten Browser und öffnen Sie die JavaScript-Konsole. Folgendes sehe ich:
Wie Sie sehen können, wurden beide Funktionen automatisch aufgerufen Konfiguration() Funktion wurde nur einmal aufgerufen, während zeichnen() wurde immer wieder-768 mal innerhalb weniger Sekunden aufgerufen! Wir werden die Bedeutung davon später erkennen.
OK, um mit dem Zeichnen zu beginnen, benötigen wir etwas, das alle Künstler benötigen: eine Leinwand. Wir müssen nur p5 verwenden createCanvas () Funktion und geben Sie eine Breite und Höhe als Argumente. Woher sollen wir diese Funktion nennen?? Konfiguration() Na sicher.
function setup () // Erstelle eine Leinwand mit 200px Breite und 200px Höhe createCanvas (200, 200);
Wenn Sie Ihre Seite aktualisieren, wird nichts anderes angezeigt. Dies liegt daran, dass die Leinwand standardmäßig transparent ist. Lassen Sie uns es mit etwas Farbe verfeinern. Wie wäre es mit einem schönen Rot? Stecken Sie diese Linie in Konfiguration() auch.
Hintergrund ('rot');p5 ist klug genug, um zu wissen, ob wir einen HTML-Farbnamen oder einen Hex-Wert verwendet haben Hintergrund ('# FF0000'); ist gleichermaßen gültig.
Lass uns zeichnen. Wir haben einige eingebaute Formen zur Verfügung. Beginnen wir mit einem einfachen Rechteck. In unserer Zeichnungsfunktion können wir Folgendes schreiben. Denken Sie daran, dass alle Koordinaten bei (0, 0) beginnen, der oberen linken Ecke der Leinwand.
Funktion draw () rect (0, 0, 50, 50);
Wenn Sie Ihre Seite aktualisieren, sollten Sie Folgendes sehen: ein Rechteck, das bei (0, 0) beginnt und 50 px breit und 50 px hoch ist (ein Quadrat)..
Dieses Quadrat kann genauso einfach eingefärbt werden wie unser Hintergrund. Wir müssen nur eine Füllfarbe angeben Vor Wir zeichnen das Rechteck. Lass uns diesmal ein Hex benutzen.
füllen ('# CC00FF'); rect (0, 0, 50, 50);Jetzt haben wir ein lila Quadrat. Nicht gerade ein Meisterwerk, aber wir kommen irgendwo hin. Wie wäre es mit einer anderen Form? Ein Kreis, ich höre dich sagen? Kein Problem.
// Zeichne eine Ellipse, die 25 Pixel von oben und // 25 Pixel von der linken Seite der Leinwandkante entfernt ist. // Die Ellipse ist 25px groß und 25px breit, wodurch // ein Kreis entsteht. Ellipse (25, 25, 25, 25);
Sie werden feststellen, dass unser Kreis nicht nur über unserem Rechteck gezeichnet wurde, er hat auch dieselbe Farbe wie das Rechteck.
Dies liegt daran, dass die Reihenfolge, in der wir diese Funktionen aufrufen, äußerst wichtig ist. Wenn wir das Rechteck nach der Ellipse gezeichnet hätten, würden wir den Kreis überhaupt nicht sehen, da er übermalt worden wäre. Die Füllfarbe des Kreises ist dieselbe wie das Quadrat, da jede Form hinter dem Symbol gezeichnet wird füllen() Funktion heißt, wird diese Farbe verwenden. Um die Farbe des Kreises zu ändern, rufen Sie einfach die Füllfarbe erneut mit einem anderen Wert auf.
füllen ('# 66CC66'); Ellipse (25, 25, 25, 25);Wir haben jetzt folgendes:
Hmm, immer noch nicht so aufregend. Mal sehen, was wir tun können. Denken Sie daran, dass der Großteil unseres Codes hier im Code enthalten ist zeichnen() Funktion, und wie wir zuvor gesehen haben, wird alles in der Draw-Funktion immer wieder aufgerufen. Im Wesentlichen werden also unser Quadrat und unser Kreis immer wieder auf das Quadrat und den Kreis gezeichnet, die im vorherigen Aufruf der Draw-Funktion gezeichnet wurden.
Was wäre, wenn wir unsere Formen jedes Mal an einem anderen Ort zeichnen würden??
Um Ihre Formen an einem anderen Ort zu zeichnen, werden Sie möglicherweise versucht, ihre Koordinatenwerte zu ändern. Dies ist absolut akzeptabel und eine großartige Möglichkeit, Ihre Zeichnung vollständig zu kontrollieren.
Es gibt auch eine Alternative. Wir können den Versatz der gesamten Leinwand ändern, was bedeutet, dass wir den Ursprung und die oberen linken Koordinaten (0, 0) in etwas anderes ändern können. Das Ergebnis davon ist, dass unsere Formen mit diesem Versatz gezeichnet werden. Wenn wir schreiben würden übersetzen (10, 10); wir würden damit enden.
Beachten Sie, dass unsere Formen jetzt 10 Pixel von links und 10 Pixel von oben gezeichnet werden.
Dies hat unser ursprüngliches Problem, dass die Formen wiederholt übereinander gezeichnet wurden, nicht wirklich behoben, aber was wäre, wenn wir den Ursprung der Leinwand mit jedem ändern würden zeichnen() Anruf? Die Formen würden jedes Mal an einer anderen Position gezeichnet. Aber welche Position? Und wie würden wir uns jedes Mal ein anderes vorstellen? zeichnen() wird genannt? Zum Glück hat uns p5 mit der zufällig() Funktion - eine einfache Möglichkeit, eine Zufallszahl zu generieren. Wir verwenden dies, um den Versatz unserer Leinwand zufällig zu ändern.
function draw () // Offset der Leinwand // zufällig (0, Breite) gibt einen Wert zwischen // 0 und der Breite der Leinwand zurück. // Wie zufällig (0, Höhe) für Höhe. übersetzen (zufällig (0, Breite), zufällig (0, Höhe)); // vorhandener Code hier
Dies gibt uns eine animierte Version davon:
Whee! Sie können diese Animation etwas schnell finden. Dies liegt daran, dass p5 unsere Formen so schnell wie möglich zeichnet, mit zeichnen() immer wieder angerufen werden. Wenn Sie dies etwas verlangsamen möchten, können Sie die Framerate ändern, um die Frequenz zu verringern zeichnen() wird genannt. Rufen Sie an frameRate () in Ihrer Setup-Funktion.
function setup () createCanvas (200, 200); Hintergrund ('rot'); FrameRate (5); Das ist besser. Wieder ist es ein bisschen langweilig, da Quadrat und Kreis immer übereinander liegen. Versuchen wir, unsere Formen zu drehen, um die Dinge interessanter zu machen. Wie machen wir das? Siehst du, P5 hat uns noch einmal abgedeckt. Zuerst sagen wir p5, dass wir Grad anstatt Radiant drehen möchten und dass wir uns zufällig drehen wollen, bevor wir jede Form zeichnen.
angleMode (GRAD); // verwendet globale DEGREES-Konstante drehen (zufällig (1, 360)); // bis zufällige Winkelfüllung drehen ('# CC00FF'); rect (0, 0, 50, 50); drehen (zufällig (1, 360)); füllen ('# 66CC66'); Ellipse (25, 25, 25, 25);Wir haben ein Monster geschaffen.
Ich bin mir ziemlich sicher, dass ich 1991 ein Shirt mit demselben Muster hatte…
Nein, mein Fehler, da waren einige gelbe Dreiecke. Lass uns alle rein gehen und ein paar hinzufügen.
// Zufällig positioniertes gelbes Dreieck drehen (zufällig (1, 360)); füllen ('gelb'); // 3 Paare von Dreieckspunkten Dreieck (25, 0, 50, 50, 0, 50);Schön. Schlechtes 90er-Shirt oder moderner Jackson Pollock? Das liegt an dir. Kunst liegt im Auge des Betrachters, wie sie sagen.
Ich hoffe, Sie haben in diesem Tutorial gesehen, wie einfach es ist, mit p5.js im Browser zu zeichnen. p5 bietet viele hilfreiche und bequeme Methoden, mit denen wir Formen zeichnen, animieren und Benutzereingaben verarbeiten können. Wenn Sie mehr erfahren möchten, besuchen Sie die p5-Referenzseite oder besuchen Sie meinen Envato Tuts + -Kurs Interactive Art With p5.js.
Hier finden Sie die vollständige Quelle unserer p5-Skizze:
function setup () createCanvas (200, 200); Hintergrund ('rot'); FrameRate (5); function draw () translate (zufällig (0, Breite), zufällig (0, Höhe)); angleMode (GRAD); drehen (zufällig (1, 360)); füllen ('# CC00FF'); rect (0, 0, 50, 50); drehen (zufällig (1, 360)); füllen ('# 66CC66'); Ellipse (25, 25, 25, 25); drehen (zufällig (1, 360)); füllen ('gelb'); Dreieck (25, 0, 50, 50, 0, 50);
