Ein Buchcover mit JavaScript und p5.js erstellen

Ich habe kürzlich ein Buch und einen interaktiven Kurs mit dem Titel Coding for Visual Learners veröffentlicht. Es vermittelt Programmieren für Anfänger von Grund auf mit der weit verbreiteten JavaScript-Programmiersprache und der p5.js-Programmierbibliothek. Da p5.js eine großartige und einfach zu bedienende Zeichenbibliothek ist, wollte ich sie nutzen, um auch das Cover meines Buches und Kurses zu erstellen. Dies ist eine Anleitung, wie Sie diese spezielle Grafik mit JavaScript und p5.js erstellen.

p5.js ist eine Zeichen- & kreative Coding-Bibliothek, die auf der Idee des Skizzierens basiert. So wie Skizzieren als minimalistischer Ansatz zum schnellen Prototypisieren einer Idee betrachtet werden kann, ist p5.js auf dem Konzept aufgebaut, die minimale Codezeilenmenge zu schreiben, um Ihre visuellen Ideen, Interaktionen oder Animationen auf den Bildschirm zu übertragen. p5.js ist eine JavaScript-Implementierung der beliebten Bibliothek namens Processing, die auf der Java-Programmiersprache basiert.

Die prägnante Natur von p5.js macht es zu einer sehr einfach zu erlernenden Bibliothek. Aber lassen Sie sich von dieser Einfachheit nicht täuschen, dass p5.js nur begrenzte Fähigkeiten hat. p5.js verfügt über eine beeindruckende Funktionalität, Geschichte und Community, die es zu einer wertvollen Lerninvestition machen, wenn Sie jemals Kunst, Design, Bewegungs- oder interaktive Stücke mit Code erstellen möchten. Ein p5.js-Programm kann von wenigen Codezeilen bis zu Tausenden reichen.

Sie können p5.js verwenden, um komplexe Datenvisualisierungen zu erstellen

Siehe den Pen p5.js data visualization von Engin Arslan (@enginarslan) auf CodePen.

Oder generative Kunst

Siehe den Pen p5.js generative art von Engin Arslan (@enginarslan) auf CodePen.

In diesem Tutorial gehe ich von etwas JavaScript-Kenntnissen aus, wie z. B. Kenntnisse von If-Else-Strukturen, Arrays usw. Wenn Sie Ihre JavaScript-Kenntnisse auffrischen oder diese mächtige Sprache von Grund auf neu lernen möchten, empfehle ich Ihnen dringend, mein Buch und den Kurs Coding for Visual Learners zu besuchen. Es ist für absolute Anfänger maßgeschneidert.

Ich gehe auch von einem gewissen Kenntnisstand in Computergrafik aus, sodass Konzepte wie Koordinatensysteme oder Farbmodi nicht zu viel Erklärung erfordern. Aber falls etwas unklar ist, können Sie sich gerne an mich wenden, und ich werde mein Bestes tun, um die Dinge zu klären.

Sie können diese Anleitung entweder mit dem p5.js Editor auf Ihrem Betriebssystem verfolgen oder einen Online-Code-Editor verwenden. Hier ist ein Pen, der als Vorlage für Ihre p5.js-Projekte dienen kann.

Legen wir los!

Teil Eins: p5.js Grundlagen

setup & draw Funktionen

Die meisten p5.js-Skripte enthalten zwei Funktionsdeklarationen namens setup und draw. Sie werden allen Ihren p5.js-bezogenen Code innerhalb dieser beiden Funktionen schreiben, und p5.js wird diese Funktionen auf bestimmte Weise für Sie ausführen. Es ist wichtig zu verstehen, wie diese Funktionen von p5.js ausgeführt werden, da sie das Rückgrat jedes p5.js-Programms bilden.

1. Die setup-Funktion ist der Ort, an dem Sie Code schreiben, der sich auf die Initialisierung Ihres Programms bezieht. Alles, was innerhalb der setup-Funktion geschrieben wird, wird einmal ausgeführt und zu Beginn des Programms ausgeführt.
2. Die draw-Funktion ist der Ort, an dem Sie den Großteil der Zeichenfunktionalität schreiben. Die draw-Funktion wird nach der setup-Funktion ausgeführt und läuft kontinuierlich (standardmäßig fast 60 Mal, Frames pro Sekunde), was es Ihnen ermöglicht, mit dieser Bibliothek alle Arten von interaktiven und animierten Grafiken zu erstellen.

Da die Funktionen draw und setup für die Funktionsweise von p5.js unerlässlich sind, ist dies der Boilerplate-Code, den Sie für fast jeden p5.js-Code verwenden müssen, den Sie schreiben.

Siehe den Pen book-cover-step-01 von Engin Arslan (@enginarslan) auf CodePen.

Wenn Sie es nicht ausdrücklich angeben, erstellt p5.js eine Leinwand (den Zeichenbereich innerhalb der Webseite, den Sie verwenden werden) mit einer Standardgröße, die wahrscheinlich zu klein für Ihre Zwecke ist. Deshalb rufen Sie die Funktion createCanvas auf, die eine Leinwand mit den angegebenen x- und y-Dimensionen explizit erstellt. Sie rufen auch die Funktion background innerhalb der draw-Funktion auf, um der Leinwand eine Farbe zu geben. Dies ist für Boilerplate-Zwecke möglicherweise nicht notwendig, hilft aber dabei, die erstellte Leinwand zu sehen.

Farben & Formen in p5.js

Farbsetzfunktionen in p5.js, wie die hier verwendete background-Funktion, funktionieren mit einem, zwei, drei oder vier Argumenten. Ein einzelnes Argument erstellt eine Volltonfarbe mit dem angegebenen Wert für die R-, G- und B-Komponenten (Rot, Grün, Blau). Das Aufrufen einer Farbsetzfunktion mit einem einzelnen Wert ist dasselbe wie das Aufrufen mit demselben Wert als drei separaten Argumenten. Diese beiden Deklarationen würden dasselbe Ergebnis erzielen

background(150);
background(150, 150, 150);

Ein viertes Argument, wenn es bereitgestellt wird, setzt die Transparenz (Deckkraft) für die Farbe. Ein zweites Argument, wenn es als letztes Argument verwendet wird, steuert ebenfalls die Deckkraft der Farbe und damit die Deckkraft der Formen, die Sie danach zeichnen. Apropos Formen, lassen Sie uns eine Form erstellen. Hier ist ein Rechteck, gezeichnet mit der Funktion rect.

Siehe den Pen book-cover-step-02 von Engin Arslan (@enginarslan) auf CodePen.

Die ersten beiden Argumente der Funktion rect legen die Position des Rechtecks fest, und die letzten beiden Argumente dienen der Größeneinstellung. Beachten Sie, wie das Rechteck bei Verwendung der Argumente 0 und 0 oben links auf dem Bildschirm gezeichnet wird. 0, 0 ist der Ursprungspunkt für die Leinwand und befindet sich in der oberen linken Ecke. Rechteckformen werden standardmäßig von ihrer oberen linken Ecke in p5.js gezeichnet. Wenn Sie dieses Verhalten ändern möchten, können Sie eine Funktion namens rectMode mit der p5.js-Variable CENTER deklarieren, um den Zeichenmodus für Rechtecke zu ändern. Es ist sinnvoll, diese Deklaration in die setup-Funktion zu platzieren, da Sie dies nur einmal im Laufe eines Programms tun müssen.

Siehe den Pen book-cover-step-03 von Engin Arslan (@enginarslan) auf CodePen.

Wenn Sie dieses Rechteck genau in der Mitte des Bildschirms zeichnen möchten, haben Sie mehrere Möglichkeiten. Sie könnten ihm den Wert 700/2 geben, sodass es die Hälfte der Breite und die Hälfte der Höhe verwendet. Aber die Festverdrahtung von Werten wie diesen ist keine gute Programmierpraxis. Sie könnten versuchen, Variablen zwischen der rect-Funktion und den setup- und draw-Funktionen zu teilen. Aber glücklicherweise, da das Platzieren von Dingen relativ zur Breite und Höhe der Leinwand eine gängige Operation ist, bietet Ihnen p5.js eine Abkürzung. Sie können die p5.js-Variablen width und height verwenden, um die aktuelle Breite und Höhe der Leinwand zu ermitteln. Teilen Sie diese Variablen durch zwei, um sie für die Platzierung des Rechtecks zu verwenden.

Siehe den Pen book-cover-step-04 von Engin Arslan (@enginarslan) auf CodePen.

Bisher wissen Sie, wie Sie die Farbe für den Hintergrund festlegen, haben aber noch nicht gesehen, wie Sie die Farbe für die Formen festlegen. Es gibt zwei Funktionen, mit denen Sie dies tun können. Eine davon ist die Funktion fill, die die Füllfarbe für die Formen festlegt, die nach dieser Funktionsdeklaration kommen, und dann gibt es die Funktion stroke, die die Farbe für den Umriss festlegt.

Wie Farbfunktionen funktionieren, kann etwas unintuitiv sein, da sie die Formen beeinflussen, die nach der Deklaration kommen, und nicht davor. Um zu verstehen, wie sie funktionieren, können Sie sich das Aufrufen dieser Funktionen als Setzen der aktiven Farbe für die nachfolgenden Zeichenoperationen vorstellen.

Eine weitere verwandte Funktion ist strokeWidth, die die Dicke des Umrisses der Formen festlegt. Sie werden alle diese drei Funktionen verwenden, um ein transparentes Rechteck mit weißen Rändern zu erstellen.

Siehe den Pen book-cover-step-05 von Engin Arslan (@enginarslan) auf CodePen.

Sie werden auch einen Text in der Mitte des Bildschirms erstellen. Zu diesem Zweck werden Sie die Funktion text verwenden. Die Funktion text benötigt 3 Eingaben: den Text, der auf dem Bildschirm gezeichnet werden soll, sowie die x- und y-Position für die Textplatzierung. Sie können auch die Funktion textFont verwenden, um die gewünschte Schriftart für den Text festzulegen.

Siehe den Pen book-cover-step-06 von Engin Arslan (@enginarslan) auf CodePen.

Hier gibt es ein paar Dinge zu beheben. Erstens beachten Sie, dass der Text nicht zentriert ausgerichtet ist. Wie Sie jetzt erraten können, gibt es eine Funktion zum Festlegen der Textausrichtung, die textAlign-Funktion. Sie werden die textAlign-Funktion in der setup-Funktion verwenden, da Sie diese Eigenschaft nicht erneut ändern werden. Sie werden ihr zwei Argumente übergeben: CENTER, CENTER. Dies bewirkt, dass die Textzeichnungen horizontal und vertikal ausgerichtet werden.

Das zweite, was zu beachten ist, ist, dass die Textform von den Füll- und Umrisswerten des darüber liegenden Rechtecks beeinflusst wird, aber Sie möchten diese Werte wahrscheinlich nicht beim Zeichnen des Textes verwenden. Lassen Sie uns neue Werte festlegen, bevor wir den Text zeichnen, um die vorherigen Werte zu entfernen.

Siehe den Pen book-cover-step-07 von Engin Arslan (@enginarslan) auf CodePen.

Um den Umriss anzupassen, hätten Sie entweder die Umrissfarbe transparent machen oder die strokeWeight auf 0 setzen können. Es gibt auch die Funktion noStroke, die hier verwendet wird und den Umriss vollständig entfernt. Es spielt meiner Meinung nach keine Rolle, welche Sie wählen, sie haben alle den gleichen Effekt in diesem Anwendungsfall.

Sie werden nun die Form des Rechtecks anpassen, um diesen Text besser einzuschließen. Außerdem machen wir den Hintergrund schwarz, um die Lesbarkeit zu verbessern.

Siehe den Pen book-cover-step-08 von Engin Arslan (@enginarslan) auf CodePen.

Derzeit sind Text und Rechteck zu klein. Sie wissen bereits, wie Sie das Rechteck skalieren können. Um die Größe des Textes zu ändern, könnten Sie die Funktion textSize verwenden. Aber Sie werden stattdessen eine p5.js-Transformationsfunktion, scale, verwenden, um die Skalierung zu handhaben, da sie es Ihnen ermöglicht, die Skalierung für das Rechteck und den Text gemeinsam auf geradlinigere Weise zu steuern. Leider sind Transformationen nicht sehr intuitiv, wenn man mit p5.js arbeitet, daher erfordern sie weitere Erklärungen.

p5.js Transformationsfunktionen

Transformationen in p5.js erfolgen relativ zum Ursprungspunkt. Es gibt eine Funktion scale, die Sie verwenden können und die die Formen, die danach kommen, um den angegebenen Betrag skaliert, aber die Dinge werden vom Ursprungspunkt (der oberen linken Ecke des Bildschirms) skaliert. Das ist selten wünschenswert. Wenn Sie mit Formen arbeiten, möchten Sie sie im Allgemeinen relativ zu ihrem Mittelpunkt skalieren.

Beachten Sie, wie das Aufrufen der Funktion scale alles größer macht, es aber auch verschiebt, da die Skalierung relativ zur oberen linken Ecke erfolgt.

Siehe den Pen book-cover-step-09 von Engin Arslan (@enginarslan) auf CodePen.

Wenn die Form nur am Ursprung wäre, hätte diese Skalierungsoperation für unsere Zwecke funktioniert. Glücklicherweise gibt es eine Möglichkeit, dies zu erreichen. Dazu sollten Sie die Funktion scale zusammen mit der Funktion translate verwenden. So funktioniert es:

Siehe den Pen book-cover-step-10 von Engin Arslan (@enginarslan) auf CodePen.

Sie haben die x- und y-Position sowohl für das Rechteck als auch für den Text auf 0 gesetzt. Dadurch werden die Formen zum Ursprung verschoben. Dann rufen Sie die Transformationsfunktion translate auf, um die Formen an ihre ursprüngliche Position bei width/2 und height/2 zu verschieben. Dies funktioniert, weil die Funktion translate die Formen nicht wirklich bewegt, sondern das gesamte Koordinatensystem verschiebt. Da sich der Ursprung des Koordinatensystems nun in der Mitte des Bildschirms befindet, können Sie die Funktion scale aufrufen, die die Skalierung von diesem gewünschten Punkt aus durchführt.

Wenn Ihnen das jetzt etwas kompliziert erscheint, versichere ich Ihnen, dass Sie nicht allein sind. Das Verschieben des gesamten Koordinatensystems zum Transformieren einer Form ist nicht nur ein Overkill für das, was Sie erreichen wollen, sondern kann auch unpraktisch sein, da es bedeutet, dass alles andere, was nach diesen Formen kommt, dieses neu transformierte Koordinatensystem verwenden muss, was den Prozess sehr komplex macht. Sehen wir uns das an einem Beispiel an, indem wir eine neue Form zeichnen.

Siehe den Pen book-cover-step-10-B von Engin Arslan (@enginarslan) auf CodePen.

Wie Sie sehen, zeichnen Sie nun einen Kreis mit der Funktion ellipse an den x- und y-Koordinaten 120 und 0. Aber das Problem ist, dass, obwohl der angegebene y-Wert 0 ist, Sie deutlich sehen, dass der Kreis nicht oben auf dem Bildschirm ist, sondern in der Mitte, was zufällig der neue Wert 0 für die y-Achse ist. Dies wäre unter den meisten Umständen höchst unerwünscht, aber glücklicherweise gibt es in p5.js eine Möglichkeit, damit umzugehen. Hier kommen die Funktionen push und pop!

push & pop

Die p5.js-Funktion push ermöglicht es Ihnen, einen neuen Zustand zu erstellen, und die Funktion pop stellt den Zustand auf die vorherigen Bedingungen wieder her. Dies ermöglicht es Ihnen, völlig unterschiedliche Einstellungen für einzelne Objekte anzuwenden, ohne sich Sorgen machen zu müssen, dass diese Einstellungen die nachfolgenden Formen beeinflussen, solange Sie alles zwischen einem push- und einem pop-Aufruf tun. So funktioniert es:

Siehe den Pen book-cover-step-11 von Engin Arslan (@enginarslan) auf CodePen.

Perfekt! Alle Transformationsänderungen, die Sie gerade vornehmen, bleiben zwischen den Aufrufen der Funktionen push und pop lokalisiert. Es ist wichtig zu beachten, dass Sie die Funktionen push und pop immer zusammen aufrufen sollten. Die Verwendung der einen, aber nicht der anderen, ergibt keinen Sinn. Nachdem Sie die Probleme mit Transformationen behoben haben, können Sie die Kreisform entfernen. Eine letzte Sache, die wir hinzufügen werden, bevor wir diesen Text auf dem Bildschirm fertigstellen, ist, ihm ein wenig Animation zu verleihen. Skalieren wir ihn für die ersten 200 Frames der Animation ein wenig hoch, um dem Ganzen mehr Dynamik zu verleihen. Zu diesem Zweck können Sie die p5.js-Variable frameCount verwenden. Die p5.js-Variable frameCount zählt die Anzahl der Aufrufe der draw-Funktion während der Lebensdauer eines p5.js-Programms.

Siehe den Pen book-cover-step-12 von Engin Arslan (@enginarslan) auf CodePen.

Der folgende Code-Schnipsel wird dem Programm hinzugefügt. Wenn frameCount kleiner als 200 ist, wird 1/400 des aktuellen frameCount-Werts zur aktuellen Skalierung hinzugefügt. Der Grund, warum Sie die Zahl 400 verwenden, ist, dass Sie, wenn frameCount 200 ist, 0,5 zur Gesamtskalierung hinzufügen möchten. Aber dies ist nicht die eleganteste oder skalierbarste Methode, dieses Problem anzugehen.

if (frameCount < 200) {
  scale(1.5 + frameCount/400);
} else {
  scale(2);
}

Eine p5.js-Funktion, mit der Sie diesen inkrementellen Skalierungswert ableiten können, ist die Funktion map. Die Funktion map ordnet den gegebenen Wert, der zwischen dem angegebenen Minimum und Maximum liegen soll, einer Zahl im gewünschten Minimum und Maximum zu. Die folgende Deklaration

map(frameCount, 0, 200, 0, 0.5);

ordnet die Variable frameCount, die zwischen 0 und 200 liegt, einem Wert zwischen 0 und 0,5 zu. Verwenden wir sie im Code

Siehe den Pen book-cover-step-13 von Engin Arslan (@enginarslan) auf CodePen.

Das ist viel besser. Und der Code ist auch sehr skalierbar. Sie könnten einfach die Variablen scaleFactor und maxLimit ändern, um anzupassen, wie stark und wie schnell der Text wächst. Im nächsten Teil dieses Tutorials werden wir den Hintergrundeffekt der endgültigen Grafik erstellen, was wohl der aufregendere Teil dieser Grafik ist. Aber die bisher behandelten Teile sollten ausreichen, um Sie mit den Grundlagen von p5.js vertraut zu machen.

Teil Zwei: Erstellung der Ringformen

In diesem zweiten Teil des Tutorials lernen Sie, wie Sie die animierten, ringartigen Formen im Hintergrund erstellen. Aber zuerst verschieben wir den Code zum Zeichnen von Text in seine eigene Funktion, damit er nicht so viel Platz in der draw-Funktion einnimmt.

Siehe den Pen book-cover-step-14 von Engin Arslan (@enginarslan) auf CodePen.

Diese Aktualisierung hat keine Funktionsänderung eingeführt, sondern ist nur eine strukturelle Aktualisierung des Codes, um ihn lesbarer zu machen. Wir werden die Funktion drawTitleText vorerst nicht benötigen, daher können Sie sie auskommentieren, um uns auf die Hintergrundformen konzentrieren zu können.

Wir verwenden ein JavaScript-Objekt, um die Zahlen für die endgültige Grafik auf dem Bildschirm darzustellen. Die Verwendung eines Objekts zur Erstellung einer Form erleichtert es, die Form als eigenständige Entität mit einem bestimmten Satz von Eigenschaften und Verhaltensweisen zu betrachten. Es hilft auch dabei, die für die Form relevanten Funktionalitäten unter der Form selbst zu kapseln, was gut für die Codeorganisation ist.

Hier erstellen wir eine JavaScript-Konstruktorfunktion namens Num, um die Zahlen darzustellen, die im Ring verwendet werden. Sie nimmt einige Argumente entgegen: eine Nachricht, die die Form anzeigen soll, die x-, y-Position, die Drehung und die Farbwerte für die Form. Wir haben die Funktion rotate bisher nicht gesehen, aber sie ist der scale- oder translate-Funktion sehr ähnlich. Wie der Name schon sagt, transformiert sie die Form, indem sie sie dreht.

function Num(msg, x, y, rot, clr) {
    this.x = x;
    this.y = y;
    this.rot = rot;
    this.msg = msg;
    this.color = clr;

    this.render = function() {
        push();
        fill(this.color);
        translate(this.x, this.y);
        rotate(this.rot);
        text(this.msg, 0, 0);
        pop();
    }
}

Die Konstruktorfunktion hat eine Methode render, die das Zeichnen der Form auf dem Bildschirm handhabt. Sie können nun diese Konstruktorfunktion verwenden, um eine Instanz dieses Objekt zu initialisieren und es auf dem Bildschirm zu zeichnen.

Siehe den Pen book-cover-step-15 von Engin Arslan (@enginarslan) auf CodePen.

Ein paar Dinge, die erwähnenswert sind.

Erstens, beachten Sie, wie die Funktion Num sehr generisch ist. Sie könnte verwendet werden, um jeden Text flexibel auf dem Bildschirm darzustellen. Sie ist auch einfach zu bedienen, da Sie die Drehung einfach durch Angabe des gewünschten Rotationswerts steuern können, anstatt extern die Funktionen push und pop zu verwenden.

Zweitens, sehen Sie, wie bestimmte Wörter bei der Deklaration von Funktionen vermieden werden. Sie hätten die Konstruktorfunktion Number anstelle von Num nennen können, aber Number ist eine bereits existierende Funktion in JavaScript, also sollten Sie versuchen, sie zu vermeiden. Die Dinge würden nicht unbedingt explodieren, wenn Sie Number verwenden würden, aber es ist generell eine gute Idee, Namenskonflikte zu vermeiden. Auch für die Argumente verwenden wir nicht rotate oder color als Parameternamen, da dies die Namen von eingebauten p5.js-Funktionen sind. Wenn Sie diese Namen für Argumente verwenden, können Sie die Funktionen, die denselben Namen verwenden, im Kontext dieser Funktion nicht nutzen. Das Erlernen, wie man diese Namen vermeidet, kommt mit der Übung.

Schließlich, beachten Sie, wie wir einen Rotationswert von 90 für das Zahlenobjekt angeben, aber die Zahl scheint sich nicht um 90 Grad gedreht zu haben. Das liegt daran, dass p5.js standardmäßig *Radiant* anstelle von *Grad* für Rotationen verwendet. Sie können es so einstellen, dass es Grad als Standard-Rotationseinheit verwendet, indem Sie die p5.js-Funktion angleMode mit der Variable DEGREES innerhalb der setup-Funktion aufrufen.

angleMode(DEGREES);

Es ist großartig, dass jetzt eine einzige Zahl auf dem Bildschirm ist, aber das Ziel ist es, mehrere Zahlen in Ringform zu haben. Lassen Sie uns herausfinden, wie wir das für eine einzelne Zahl machen und dann können Sie den Vorgang skalieren, um die Platzierung für eine beliebige Anzahl von Zahlen durchzuführen.

Siehe den Pen book-cover-step-16 von Engin Arslan (@enginarslan) auf CodePen.

Der Code wächst in der Größe! Das ist der Code, der für die Erstellung des Ringlayouts hinzugefügt wird.

var radius = 100;
var amount = 15;

push();
translate(width / 2, height / 2);

for (var i = 0; i < amount; i++) {
    rotate(i);
    var num = new Num(1, 0 + radius, 0, 90, 255);
    num.render();
}

pop();

Hier haben wir eine for-Schleife, die eine gegebene Anzahl von Num-Objekten erstellt, die vom aktuellen Ursprung um den gegebenen radius-Betrag entfernt sind. Dies erstellt derzeit nur 15 Objekte. Das dient dazu, einen Punkt zu veranschaulichen. Sehen Sie, wie der Abstand um die Formen herum nicht gleichmäßig ist. Das passiert, weil Aufrufe von Transformationen in p5.js (wie translate, rotate, scale) eine kumulative Wirkung haben. Zum Beispiel würden diese beiden unten aufgeführten Aufrufe zu einer Gesamtverschiebung von 20 Pixeln auf der x-Achse führen.

translate(10, 0);
translate(10, 0);

Um dies zu beheben, können Sie push und pop verwenden, damit die Transformationseffekte lokalisiert bleiben und sich nicht ansammeln. Das sollte für den ungleichmäßigen Abstand der Formen sorgen. Sie sollten auch dafür sorgen, dass die Formen gleichmäßig um den imaginären Kreis verteilt sind. Um dies zu tun, können Sie einfach 360 (den gesamten Winkel eines Kreises) durch die Anzahl der Formen teilen, um abzuleiten, wie stark jede Form gedreht werden sollte, um eine gleichmäßige Verteilung zu erreichen.

Siehe den Pen book-cover-step-17 von Engin Arslan (@enginarslan) auf CodePen.

Perfekt, im nächsten Schritt werden wir eine Funktion aus dieser Ringzeichnungsoperation erstellen. Wir werden die Funktion so gestalten, dass sie radius und amount als Argumente akzeptiert. Auch innerhalb der Funktion werden wir ein Array von Zufallszahlen generieren, die der Num-Objekt übergeben werden, damit wir einen zufälligen Wert von 0 oder 1 an das Objekt übergeben können, anstatt immer die Zahl 1 zu verwenden.

Zu diesem Zweck verwenden wir die p5.js-Funktion random. Hier ist ein Snippet, das eine zufällige Gleitkommazahl zwischen 0 und 2 (exklusiv 2) generiert, die mit der JavaScript-Funktion parseInt in eine Ganzzahl umgewandelt und in ein Array gepusht wird.

var randomNumbers = [];
for (var i = 0; i <= amount; i++) {
    randomNumbers.push(parseInt(random(2), 10));
}

Jetzt können Sie ein Element aus dieser Sammlung randomNumbers an das Num-Objekt übergeben, anstatt immer die Zahl 1 zu verwenden. Hier ist der gesamte Code:

Siehe den Pen book-cover-step-18 von Engin Arslan (@enginarslan) auf CodePen.

Das Problem ist im Moment, dass die p5.js-Funktion random bei jedem Aufruf der draw-Funktion einen zufälligen Wert generiert, aber für unsere Zwecke möchten wir, dass diese Zufallswerte während der gesamten Programmausführung gleich bleiben. Um dies zu erreichen, sollten Sie die p5.js-Funktion randomSeed verwenden. randomSeed stellt sicher, dass Sie für den angegebenen Seed-Wert dieselben "zufälligen" Werte erhalten. Wir werden dafür sorgen, dass der Seed von außerhalb der Funktion konfiguriert werden kann.

Siehe den Pen book-cover-step-19 von Engin Arslan (@enginarslan) auf CodePen.

Die Zahlen flackern nicht mehr. Da Sie die Funktion zur Erstellung eines einzelnen Rings erstellt haben, ist es zu diesem Zeitpunkt überhaupt nicht schwer, mehrere Ringe mit unterschiedlichen Mengen an Num-Objekten mithilfe einer Schleife zu erstellen. Um das Beispiel einfach zu halten, verwenden wir eine numerische Konstante, um die Dichte der Ringe ähnlich zu halten.

Siehe den Pen book-cover-step-19-B von Engin Arslan (@enginarslan) auf CodePen.

Wir sind fast fertig! Tatsächlich zeige ich an dieser Stelle nur den endgültigen Code, da er nichts enthält, was Sie nicht gelernt haben.

Hier sind ein paar Dinge, die in dieser Version aktualisiert wurden.

• Der Hintergrund für den Text "Coding for Visual Learners" wurde aktualisiert, damit er halbtransparent ist.
• Rotation wurde für die Ringe eingeführt.
• Zufälligkeit wurde auch für die Farbe der Num-Objekte eingeführt.

Siehe den Pen Coding for Visual Learners – Cover von Engin Arslan (@enginarslan) auf CodePen.

Wenn Sie nicht möchten, dass die Form animiert wird, können Sie einfach eine Funktion namens noLoop innerhalb der setup-Funktion aufrufen, um nur das erste Bild der Animation anzuzeigen. Wenn Sie die Form anpassen möchten, können Sie damit beginnen, die Parameter amount, spacing, radius und rotSpeed anzupassen.

Ich habe das statische Bild für mein Buchcover verwendet, aber die animierte Form, um Animationen für den Kurs zu erstellen. Fairerweise muss ich sagen, dass ich auch ein wenig Photoshop für die Platzierung einiger Elemente verwendet habe, aber die Basisform wurde mit JavaScript und p5.js erstellt, was mich als Programmierer glücklich macht.

---

Ich hoffe, Ihnen hat diese kurze Einführung in p5.js gefallen! Wenn Sie Fragen haben, können Sie sich gerne an mich wenden! Meine Website finden Sie unter enginarslan.com und ich bin auf Twitter unter @inspiratory zu finden.