Generative Kunst für NFTs mit JavaScript und p5js

1. Einführung: Hallo und willkommen zu meinem Kurs. Mein Name ist Dan Burgess und ich bin unter anderem Musiker und Webentwickler. Und wir werden lernen, wie man ein generatives Kunstprogramm erstellt, das mit JavaScript und einer JavaScript-Bibliothek namens p5.js im Browser ausgeführt das mit JavaScript und einer JavaScript-Bibliothek namens p5.js im Browser wird. Also zeichnen wir eine NFT, ein Stildesign mit Code. Und dann generiert das Programm bei jeder Seitenaktualisierung eine einzigartige Variante des Designs. Sie müssen auch die von Ihnen generierten Images auf Ihrer Festplatte speichern . Was Sie jetzt auf dem Bildschirm sehen, sind einige Beispiele. Wenn Sie sich also gefragt haben, wie NFT-Variationen gemacht werden, wird dieser Kurs eine großartige Einführung sein. Also klicke einfach auf die nächste Lektion und rufe sie zusammen mit mir an. Ich war heute hier. Danke. Einer davon ist mehr, dass ich gehen muss. Ihr seid beide ein 2. Environment: Okay, also für dieses Projekt werden wir Visual Studio Code in unserem Code-Editor verwenden. Ich habe es bereits auf meinem Computer installiert. Aber wenn Sie dies nicht tun, können Sie es herunterladen und direkt von der Website installieren, die Visual Studio.com genannt wird. Also habe ich es schon hier. In Visual Studio Code erstellen wir also erstellen wir zwei Dateien und speichern sie im selben Ordner. Also klicke ich auf Neue Datei und wir speichern sie. Und ich nenne es Indexpunkt HTML. Ich speichere das einfach auf meinem Desktop in einem neuen Ordner namens Jan art. Okay? Wir brauchen eine oder Akte. Ich speichere es im selben Ordner und nenne es Script Dot js. Ich bin jetzt in der Datei index.html. Wir brauchen etwas Boilerplate-HTML, das sehr einfach zu machen ist und den Code ressourcen , den wir gerade HTML eingeben. Und es gibt uns, hier gibt es verschiedene Optionen für verschiedene Formate. Ich wähle das aus, das mit fünf endet. Und hier haben wir unser grundlegendes Boilerplate HTML. Das letzte, was wir tun müssen, ist dass wir hier drei Abhängigkeiten sowie von Abhängigkeiten plus unserem Skript in die HTML-Datei aufnehmen müssen drei Abhängigkeiten sowie von Abhängigkeiten plus unserem Skript in die HTML-Datei . Dafür fügen wir direkt unter dem Titel-Tag ein Skript-Tag hinzu. Frag die Quelle. Wir werden p5.js hinzufügen. Dies ist eine Abhängigkeit, die wir verwenden werden , und der Link wird in der folgenden Beschreibung angezeigt. Also kopiere ich es diese Version, 1 Punkt für Punkt 0, Min und füge es hier ein. Und wir brauchen noch einen. Das hier. Der Link befindet sich ebenfalls in der Beschreibung. Es ist dieses Paket namens p5.js, SVG. Und wenn wir hier auf GitHub scrollen, ist es gleich hier am Anfang. Wir müssen diese Zeile nur zum Projekt hinzufügen. Es hat also schon das Script-Tag. Also werde ich das Ganze ersetzen. Und wir brauchen auch unser Drehbuch, dieses hier. Es ist also ein Skript, Script Dot js. Wir sparen. Wir sind gut, die script.js zu gehen. Wir lassen es vorerst leer. 3. Unser Design zeichnen: Wenn ich also den allgemeinen Ordner mit unserem Projekt gerade auf meinem Desktop öffne den allgemeinen Ordner mit , einen Augenöffner, index.html und meinen Browser. Nichts wird passieren, weil das Drehbuch es noch nicht da drin haben. Lassen Sie uns also die Basisversion des Skripts schreiben , in dem wir unser Basisdesign zeichnen. Okay, also fügen wir in unserer Datei script.js eine JavaScript-Funktion hinzu. Wir werden es durch all das wirklich alles nennen , was wir brauchen, wir können hier reinwerfen. Zuallererst stelle ich unser Schlaggewicht ein. Lasst uns das auf fünf setzen. Lasst uns jetzt unseren Hintergrund machen. Sagen wir zum Beispiel Hintergrundblock. Lasst uns sparen. Und ich öffne die Datei index.html erneut in meinem Browser und sehe, was passiert. Okay, also haben wir hier einen Hintergrund. Es ist ziemlich klein, aber es ist hier. Das heißt also, dass es funktioniert. Okay, also werden wir kurz vor der Trog-Funktion eine weitere Funktion hinzufügen . Und wir nennen es Setup ganz Kleinbuchstaben. Und innerhalb dieser Funktion werden wir in der Lage sein, die Größe unserer Leinwand festzulegen. Das wird also Create Canvas sein. Ich werde 600 mal 600 Pixel übergeben. Und als drittes Argument wollen wir nur als VG in allen Großbuchstaben setzen. Also öffne ich unsere Datei wieder mit meinem Browser. Und im Moment sind es 600 mal 600. Okay, also verwende ich für meinen Hintergrund, anstatt Schwarz zu verwenden, eine Hexadezimalzahl der Axt, naja, HTML-Farbhexadezimalzahl. Und ich bin hier bei HTML color codes.com. Ich lasse diesen Link in der Beschreibung und ich kann einfach eine Farbe auswählen und es wird mir den Hex-Code geben. Also zum Beispiel so etwas, dieses Rot. Ich kopiere das. Okay, also speichere und aktualisiere ich das Dokument, um zu sehen, ob es funktioniert und einfach einwandfrei funktioniert. Also zeichne ich den Körper meines Designs. Also verwende ich vorerst eine andere Farbe. Ich sage, fülle die Füllung. Und machen wir zum Beispiel eine Art Gelb in einzelnen Anführungszeichen. Und wir werden eine Ellipse zeichnen, geben wir sie als Koordinaten plus 2, dreihundertsechshundertsechsundneunzig vierzig für 40 an. Ich werde aktualisieren. Und hier ist unser Körper. Wo komme ich in diesen beiden Funktionen, einrichten und daraus ziehen, wie funktionieren sie? Nun, im Grunde genommen, da wir p5.js verwenden, tut mir leid, p5 js als Abhängigkeit. Wir benutzen nur ihre Konventionen. Wenn wir zu ihrer Dokumentation gehen, lasse ich diesen Link in der Beschreibung. Wir sehen, dass es genau so funktioniert. Wir brauchen eine Funktion , die darin als Setup bezeichnet wird , create canvas. Und wir passieren die Breite und die Höhe. Und dann eine Funktion Draw, in der wir Sachen zeichnen. Und es gibt verschiedene Dinge, die wir wie einen Hintergrund zeichnen werden, wie wir es getan haben, oder wir können eine Ellipse zeichnen wie hier drin. In der Ellipse geben wir hier vier verschiedene Parameter ein. Wenn wir also zur p5.js Dokumentation gehen und zur Referenz gehen. Hier unter Shape ist hier die Ellipsenfunktion. Und wir sehen, dass es vier Parameter benötigt, genau wie wir n übergeben. Und hier sagt es, was sie bedeuten sagt standardmäßig, dass die ersten beiden Parameter die Position des Zentrums der Ellipse festlegen . Also geben wir es 306, 90. Und der dritte, vierte Parameter legt die Formen, die Breite und die Höhe fest. Und hier werden wir bei 640 und für 40 gegeben. Okay, also werden wir nach der Leiche die Ohren ziehen. Wir werden sagen, dass Sie für eine Umfrage keine andere Farbe wählen , etwas Grün. Und dann brauchen wir zwei Ellipsen. Zum ersten werde ich also eingehen, sagen wir eine 125, 135. Lass uns 170 machen. 170 Für das rechte Ohr. Lasst uns vier, 75, 135 anschwellen. Sie sind also auf gleicher Höhe im Hintergrund. Und auch 140, tut mir leid, 170, 170. Sie haben also die gleiche Größe, k. Also lasst uns aktualisieren. Und da sind wir los. Hier sind die Ohren. Okay, also lasst uns jetzt den inneren Teil des Ohres machen. Fülle eine andere Farbe auf ein dunkleres Grün. Und das werden zwei weitere Ellipsen sein. Also lasst uns also 125, genau wie das Außenohr. Lass uns 135 machen, dasselbe Zentrum, und dann lass uns 140 und 140 machen. Es ist also kleiner, kleiner. Und übrigens verwenden wir das Ellipsenwerkzeug, aber das sind alles Kreise weil die Höhe und die Breite der Ellipse, hier ist hi, hier ist die Breite gleich. Und die andere, die du gerade gemacht hast, wird eine Ellipse sein und es wird 475 und dann 135 und dann 140 und 140 sein. Lasst uns also auffrischen und sehen, wie das aussieht . Und da sind wir los. Also lasst uns das Gesicht machen. Ich wollte „Fill“ sagen. Geben wir ihm eine andere Farbe. Lass uns etwas Blau machen, noch eine Ellipse. Und wir geben ihm 300. Machen wir vierunddreißig, fünfzig, vierundvierzig. Lasst uns auffrischen. Und da sind wir los. Da ist unser Gesicht. Also lasst uns die Augen machen. Fiel auf noch eine andere Farbe. Lass uns lila machen. Okay. Das ist eine Ellipse. Und lass uns zu 30 bis 50 gehen. Zeichnen wir eine 22 auf das andere Auge. Also noch eine Ellipse. Wir werden 370 machen. Und die gleichen Werte, 250, wir wollen es auf der gleichen Höhe und dann der gleichen Größe, 282. Okay, lasst uns auffrischen. Da sind wir los. Also lasst uns die PBLS machen. Sie werden also das gleiche Zentrum haben, aber der Fehler wird schwarz sein. Also könnten wir einfach Schwarz schreiben, oder wir können den Hexadezimalcode verwenden, was genau das ist. Alle Nullen. Also Ellipse. Und natürlich wird das Zentrum das gleiche sein, also wird es zweidreißig und zweihundertfünfzig sein. Und wir wollen den Schüler kleiner machen. Also lasst uns zum Beispiel 30 machen. Der richtige. Es wird also 375, 250 und dann 30 und 32 Jahre sein . Nun, lasst uns auffrischen. Und da sind wir los. Okay, also lasst uns diese Notiz machen. Scheitern. Nun, lasst uns eine andere Farbe wählen. Okay, und das wird eine weitere Ellipse sein. Also lasst uns 100, 390 durchgehen. Und lasst uns 200 mal 200 machen. Es ist also wieder ein Kreis. Lasst uns auffrischen. Und da sind wir los. Und lass uns den Mund machen. Also mache ich es schwarz. Auf dem Code für Schwarz sind alle Nullen. Das sind also sechs Nullen. Und hier drin mache ich etwas anderes. Ich mache einen Bogen, einen Bogen. Und wenn wir uns die Dokumentation ansehen, werden wir darauf verweisen. Hier ist unser Bogen. So funktioniert es. Wenn er nur mit x, y, w, a aufgerufen wird, um zu starten und zu stoppen, wird der Bogen Drohnen ausgefallen sein. Es ist ein offenes Tortensegment. Was wir also hier drin machen wollen, ist dass wir genau tun werden Das stimmt. 300, das ist x. Lass uns 420 machen, und lass uns 70 und 65 machen, die Breite und die Höhe. Und dann werden wir für Start und Stopp tun, fangen wir gleich bei 0 an. Und lasst uns bei Pi k enden. Mal sehen, wie das aussieht. Ja, perfekt. Und uns fehlt nur die Nase. Ich werde auch nur schwarz sein. Wenn wir also nichts getan haben, wird es immer noch schwarz sein, denn das letzte Mal, als wir Fail anrufen, sagten wir, es sei schwarz, aber wir werden es auch hier noch einmal schreiben. Es ist also Xeon hat seine Farbe wie die Clara explizit. Also 000, 000, 000, 000. Und das wird eine Ellipse sein. Und lass uns 300, 350 machen. Und lass es uns wieder zu einem Kreis machen. Also nur 80 mal 80. Okay, also lasst uns auffrischen. Und hier ist unser Bär. 4. Random aus einer Liste holen: Okay, also haben wir alle unsere Farben fest codiert, Rechteck mit einer Chlorophyll-Art. Wir haben es gerade, wir haben eine Farbe die Claire, also ändern sich diese, aber wir möchten, dass sich die Farben jedes Mal ändern , wenn wir die Seite aktualisieren, nur um sie allgemein zu machen. Dafür werden wir Farben hier aus der Füllfunktion herausnehmen. Und wir platzieren sie in einem JavaScript-Array und lassen den Computer nach dem Zufallsprinzip eine dieser Farben auswählen. Dafür fügen wir ganz oben ein Array hinzu. Okay, Nachteile, Farben. Es wird ein Array sein. Und hier drin fügen wir alle Farben hinzu, die wir verwenden möchten. Also können wir dieses hinzufügen. Und wir können alle anderen hinzufügen. Also hier ist noch eins. Oh, okay, also los geht's. Ich habe alle Farben hinzugefügt, die wir in unserem Beispiel verwendet hatten. Jetzt ist es an der Zeit, dass wir die Fill-Funktion aufrufen. Anstatt die Farbe wie zuvor fest zu codieren. Jetzt sind alle Farben da. Wir werden eine Funktion übergeben , die nach dem Zufallsprinzip eine der Farben dieser Liste dieses JavaScript-Arrays auswählt der Farben dieser Liste dieses , die alle Farben enthält , die wir verwenden möchten. Lasst uns diese Funktion schreiben. Okay, also nennen wir es Funktion Grand Color. Wir werden keine Argumente vorlegen. Und so werden wir es machen. Lassen Sie uns eine Variable namens Index erstellen , die Math.Floor sein wird . Und es wird mathematische Punktzufälligkeit multipliziert mit der Punktlänge der Anrufer, was der Länge dieses Arrays entspricht. Das ist also 1234567. Und dann geben wir einfach das Array des Anrufers mit dem Zufallsindex zurück , wir generiert haben. Okay? Also hier wählt dieser Index eine Zahl für eine Position im Array hier drin aus. Und dann geben wir die Farbe in diese Position zurück, er verklagt. Jetzt rufen wir jedes Mal, wenn wir unsere Farbe verwendet haben, anstatt die Färbung hier zu haben, die Rand-Caller-Funktion auf. Okay, also mache ich das auch für die Leiche. Für die Ohren, für die Innenohren, für das Gesicht, die Augen. Ich lasse die Schüler schwarz, rauchen. Okay. Ich lasse den Mund und die Nase schwarz. Okay. Also werde ich speichern und aktualisieren und sehen, ob es funktioniert. Okay. Also hat es nicht funktioniert. Lasst uns herausfinden, was hier passiert ist. Okay, ja, ich hab die Klammer vergessen. Wir möchten die Funktion ausführen. Stellen wir sicher, dass ich alle anderen hineinlege. Lasst uns also aktualisieren und sehen, ob es diesmal funktioniert. Und es funktioniert nicht. Ja, ich habe einen Tippfehler hier drin. Es ist Länge. Okay, also bekommen wir etwas sehr Trippiges und das ist nicht das, was wir wollen. Der Grund dafür ist , dass wir die Funktion direkt hier in der Draw-Funktion aufrufen die Funktion direkt hier in . Anstatt nach unten zu gehen, werden wir die Farben für die verschiedenen Körperteile auf einige Variablen außerhalb der Funktion einstellen die verschiedenen Körperteile . Und dann verwenden wir einfach die Variable hier drin. Zum Beispiel können wir sagen, dass BG-Farbe gleich FRAND-Farbe ist. Und dann sagen wir hier drin B zum Ausmalen. Also lasst uns das versuchen. Und da sind wir los. Jetzt ist der Hintergrund statisch, also werde ich das Gleiche für alle anderen Körperteile tun. Also lasst uns das machen. Die Körperfarbe entspricht R1-Farbe. Wir ersetzen hier drin. Gleiches gilt für die Steuerbehörde, Gleiche für die Innenohren und das Gleiche für die Augen. Und schließlich auch für die Schneit. Also lasst uns auffrischen. Und wir haben die Innenohren vergessen. Was stimmt da nicht? Ja, hier ist es. Wir haben zwei durch die Variable ersetzt . Okay, perfekt. Und Sie werden sehen, dass unser Skript jedes Mal, wenn wir aktualisieren, nach dem Zufallsprinzip verschiedene Farben auswählt. Das ist jedoch ein bisschen zu bunt für mich. Ich möchte, dass einige Farben übereinstimmen, zum Beispiel zur Phase und zu den Ohren. Wir werden also weniger Variablen für die verschiedenen Farben verwenden . Also behalte ich einen für den Hintergrund behalte einen für das Gesicht. Und ich behalte einen für die Augen, aber das war's schon. Also für die Ohren, innen und außen, und für diese Notiz verwende ich einfach die Körperfarbe. Hier ist also, dass die Phase auch die Körperfarbe verwendet. Dieser Knoten verwendet die Körperfarbe. Okay? Ja, das ergibt ein bisschen sinnvoller. Manchmal wiederholen sich Anrufer jedoch, zum Beispiel hier drin, dieses Skript verwendet die gleichen Farben, die gleiche Farbe für die Augen und für den Körper, das Gesicht usw. Und das will ich nicht. Also werden wir unsere zufällige Farbfunktion ändern. Und wir werden folgendes sagen. Zuallererst werden wir hier ein Array erstellen , das wir aufrufen werden. Verwenden Sie Anrufer, Indizes, okay, und dies ist ein leeres Array. Also jetzt hier in der Funktion werden wir sagen, während wir verwendet werden, Anrufer sind vorhanden, Punkt enthält Index. Das heißt, wenn wir in diesem Array bereits diesen Index haben, schreiben wir den Wert des Indexes neu , indem wir einen neuen generieren. Wenn es derzeit nicht in diesem Array wie diesem ist, weil dieses leer ist, bleibt dieser Wert erhalten. Und das Letzte, was wir tun wollen, ist danach, nachdem wir einen Index haben, werden wir diesen Index zu diesem Array hinzufügen. Wir werden also sagen, dass Sie Farben im Porsche-Index verwenden . Okay? Wenn wir uns jetzt aktualisieren, werden wir sehen, dass die drei Farben jetzt immer unterschiedlich sind. 5. Eyes: Okay, also funktioniert unser Drehbuch gut. Ich füge den Augen nur ein kleines Detail hinzu. Ich füge einfach etwas Weiß hinzu. Was haben wir dafür unsere Augen hier? Nun, wir werden das ganze Ding kopieren. Okay? Und wir werden eine äußere Ellipse haben, dass es wirklich ein Kreis ist , der den ganzen Raum einnimmt. Aber dieses hier werden wir es weiß machen. Wir könnten hier einfach weiß schreiben. Oder wir können die HTML-Farbcodes verwenden, die FF, FF, FF, FF sind. Und dann die zweite, wir werden es mit der Eisfarbe belassen , die vom Skript erzeugt wird. Aber wir werden es kleiner machen. Sagen wir also 59 bis 59. Dasselbe bei diesem. Okay, ich werde speichern und aktualisieren. Das wird gehen. Das ist besser. 6. Einige Farben festigen: Okay, also verwenden wir die gleiche Farbe für den Körper, die Phase, das Schneit , die Ohren usw. Aber ich füge eine kleine Funktion hinzu, nur damit wir verschiedene Schattierungen dieser Farbe haben. Was ich vorhabe, ist, dass ich das Gesicht, das Außenohr und den Körper etwas leichter machen werde , und ich werde das eigentliche Auto verlassen, das für das Innenohr und für diesen Knoten ausgewählt wurde . Und dann werde ich den Hintergrund immer heller machen als die tatsächliche Farbe. Dafür wird es in der Beschreibung einen Link zu dieser GitHub-Datei geben. Und es ist eine Funktion für Leiden in einer Farbe, diese ist irgendwie kompliziert. Nun, wir können es einfach kopieren und einfügen und dann werden wir es in unser Skript aufnehmen. Also kopiere ich und füge es ein. Und ich füge es ganz unten ein. Da sind wir los. Diese Funktion nimmt also eine Farbe im HTML-Format an, die mit dem Pfundzeichen beginnt, und dann wird es ein Prozent dauern. Okay? Also werde ich diese Funktion benutzen. Mal sehen wir im Hintergrund. Anstelle der Hintergrundfarbe verwenden wir also verwenden wir die Funktion Licht und Farbklammer. Und wir geben die Hintergrundfarbe durch. Und dann sagen wir 30. Also lasst uns auffrischen. Okay, ja, wählen wir eine Farbe für den Hintergrund und es macht sie automatisch leichter als ursprünglich. Also werden wir das Gleiche mit der Körperfarbenklammer machen. Und dann geben wir die Körperfarbe ein. Und dann lasst uns einfach 10 Prozent hier drin machen. Und ich kopiere diese ganze Zeile. Ich benutze es auch in den äußeren Ohren. Ich werde das auch in ihrem Gesicht benutzen . Und ich werde auch dieses Ding benutzen , das im Körper, im Ohr und im Gesicht steht. Und das sollte klappen. Also lasst uns auffrischen. Ja, perfekt. 7. die Dateien herunterladen: Okay, und das allerletzte, was wir tun werden, ist, dass wir unten eine kleine Funktion hinzufügen werden. Und diese Funktion lässt uns die Datei herunterladen. Es ist Zeit, dass wir uns auffrischen. Also geht es so. Es geht um Dokument, Punkt, Ereignis hinzufügen, Listener. Die Art des Ereignisses, das wir hören werden, Es wird DOM-Inhalte geladen sein. Und was wir sagen ist wenn der Dokumentinhalt vollständig auf das Folgende geladen ist und wir eine Funktion übergeben werden. Dies wird in JavaScript als Pfeilfunktion bezeichnet. Es ist also eine Reihe von Klammern und R0, was das gleiche Plus größer als das Zeichen ist. Und dann geschweifte Klammern mit einem Semikolon. Und hier innerhalb einer Funktion, mit der wir tun werden, ist Timeout eingestellt. Und dies wird eine weitere Pfeilfunktion als erstes Argument nehmen . Und hier drin werden wir geschweifte Klammern öffnen und geschweifte Klammern schließen. Und drinnen werden wir Save as V, g Klammer und dann SVG sagen , alles in Kleinbuchstaben. Und dann ein Komma nach der schließenden geschweiften Klammer. Und 500, was 500 Millisekunden bedeutet. Es bedeutet, dies nach 500 Millisekunden zu tun. Also lasst uns speichern, lasst uns aktualisieren und mal sehen, ob es funktioniert. Ja, es fordert uns auf, es herunterzuladen. Also lade ich es nochmal herunter. Okay. Hier, wenn ich meine Downloads öffne, hier sind alle meine kleinen Teddybären. 8. Modifizieren der Farbpalette und der Formen: Okay, also möchte ich Ihnen in der allerletzten Lektion zeigen, wie Sie damit experimentieren können, ein Skript, um Ihr eigenes originelles Design zu erstellen. Zuerst werde ich die Funktion kommentieren, die wir in der letzten Lektion hinzugefügt haben . Und dafür gibt es verschiedene Möglichkeiten, dies zu tun. Wir können diesen Schrägstrich einfach machen und dann fügen wir am Ende ein weiteres hinzu. Sternchen-Schrägstrich vorwärts oder umgekehrt. Und jetzt wird diese Funktion ignoriert . Das mache ich nur. Es fordert uns also nicht auf die Datei jedes Mal herunterzuladen, wenn wir während des Experimentierens aktualisieren. Okay? Im Grunde können Sie also zuerst experimentieren, indem Sie die Farben ändern. Sie können verschiedene Farben haben, Sie können mehr hinzufügen, Sie können einige Farben herausnehmen. Die einzige Sache ist, dass Sie die Syntax eines JavaScript-Arrays mit all den verschiedenen Strings für die Aufrufer respektieren sollten eines JavaScript-Arrays mit all den verschiedenen Strings für die Aufrufer immer in einzelnen Anführungszeichen eingeschlossen sind. Und du fügst am Ende in allen ein Komma mit Ausnahme des letzten hinzu. Jetzt haben wir ein paar Farben. Und wir werden HTML color codes.com durchgehen und einfach experimentieren, versuchen, ein paar neue Farben hinzuzufügen. Also lasst uns das hinzufügen. Und lasst uns eine Art Grau hinzufügen. Lasst uns auch hellgrau sein. Okay? Und wir werden hier so viele Farben haben , wie wir wollen, da die Funktion zum Generieren einer zufälligen Farbe die Länge dieses Arrays berücksichtigt wird . Es muss kein bestimmtes Land sein. Sie können so viele Farben verwenden, wie Sie möchten. Lasst uns also auffrischen und mal sehen wie. Jetzt wird das Skript auch die neuen Farben einziehen. Hier ist unser Grau. Okay? Und dann ist die andere Sache, die Sie tun können , in der Draw-Funktion, Sie können all diese ändern. Wenn wir beispielsweise das Strichgewicht ändern, sind die gezeichneten Linien viel dünner. So. Sie können auch jedes einzelne Element ändern oder sogar Elemente von Grund auf neu erstellen. Sie können mit den Lippen mit dem hinteren Namen experimentieren. Denken Sie daran, dass die ersten beiden Parameter x und y sind, die die Positionierung des Zentrums der Ellipse im Canvas-Bereich bestimmen . Und diese letzten beiden sind die Höhe und die Breite dieser Ellipse. So könnten wir zum Beispiel die Phase gestalten, wir könnten sie schlanker machen, indem diese ändern , die die Breite ist. Schaffen wir es 400. Da sind wir los. Und wir könnten auch etwas zum Hintergrund hinzufügen. Wir könnten zum Beispiel eine Ellipse hinzufügen, die ihren Mittelpunkt direkt in der Mitte der Leinwand hat. Da die Leinwand 600 mal 600 ist, wird es 300, 300 sein. Und dann können wir dazu bringen, die ganze Leinwand zu nehmen und es wird ein Kreis im Hintergrund sein , der die gesamte Leinwand sechshundert, sechshundert nimmt . Wir können das zu einer anderen Farbe machen. Also fülle. Und dafür können wir eine neue Variable hinzufügen. Die Farbe des Kreises entspricht der Sram-Farbe. Sagen wir hier drin die Kreisfarbe. Mal sehen, ob es funktioniert hat. Da sind wir los. Also im Beschreibungsbereich wirst du einen Link zu meinem gesamten Skript haben. Du kannst es überprüfen. Es gibt, wenn du irgendwelche Fehler machst, und so weiter. Und zögern Sie nicht, alle verschiedenen Parameter zu experimentieren und zu ändern und sogar zu versuchen, mit Ellipsen auf Bögen etwas von Grund auf neu zu zeichnen . Und wenn Sie sich sehr Abenteurer fühlen, können Sie sogar die p5.js Dokumentation lesen und verschiedene neue Formen verwenden, die wir in diesem Kurs noch nicht einmal verwendet haben.