Kreatives Programmieren mit JavaScript: Von den Grundlagen zu Meisterwerken

1. Kurs-Einführung: Hallo. Mein Name ist Renzi Blah Ich bin Konzeptkünstler, Grafikdesigner, bildender Künstler und viele andere Dinge Ich habe zwei Jahre Erfahrung im Bereich Grafikdesign und Kunst. Ich war mit vielen Marken und mit vielen Kunden unterwegs. Als Mensch habe ich eine inhärente Wertschätzung für Formen, Muster und Rhythmen. Ich erstelle Bilder mit Code, weil ich an der Struktur interessiert bin, die hinter den Dingen steckt, die wir wollen, ästhetisch ansprechend, experimentiere mit kreativem Code und lasse mich nie ausleihen. Es gibt immer etwas zu entdecken, neue Techniken zu erlernen oder ein neues Bild Ich verbinde mein Interesse an animierten Grafiken und visuellen Inhalten mit Programmierern, sodass ich jeden guten Code entwickeln, zeichnen und animieren kann guten Code entwickeln, zeichnen und animieren kann Ich habe viele Programmiersprachen verwendet mein derzeitiger Favorit ist JavaScript Es ist leicht zu erlernen, flexibel eignet sich für schnelle kleine Projekte und für große Projekte. In diesen Award-Cools werden wir die Grundlagen des Programmierens lernen, werden wir die Grundlagen des Programmierens lernen indem wir visuelle Elemente mit JavaScript erstellen Für das Abschlussprojekt erstellen Sie eine Reihe von visuellen Kompositionen mit einem Code, der in einem Webbrowser implementiert werden kann Zu Beginn zeige ich Ihnen, wie Sie einen Texteditor einrichten und Code in einem Browser ausführen. Anschließend werde ich Ihnen einige grundlegende Konzepte von JavaScript beibringen , wie z. B. variable Funktionsarrays und Schleifen Dabei verwende ich immer Beispiele und zeichne Bilder Wir beginnen mit einem einfachen Setup und gehen dann zur Umgebung zum Skizzieren mit dem Code Canvas Sketch über Danach beenden wir die visuelle Darstellung mithilfe von Rotation und Bogen und fahren dann mit einer animierten Skizze mit beweglichen Agenten und Ich werde Ihnen auch zeigen, wie Sie Ihr Kunstwerk als Bild und Video exportieren Im nächsten Schritt werden wir uns damit befassen, Raster zu beenden, Rauschen zu verwenden und unser eigenes Bedienfeld mit einem Schieberegler zu erstellen , mit dem Werte in Echtzeit angepasst werden Dann zeige ich Ihnen, wie Sie auf kreative Weise mit Text arbeiten kreative Weise mit Text und Farbwerte aus Pixeln eines Bildes lesen Im zweiten Teil unseres Kurses , der am weitesten fortgeschritten ist, werden wir mit der ersten Komposition arbeiten. Wir beginnen mit einem einfachen Rechteck und bauen dann auf ein geometrisches Muster auf. Wir werden etwas über Farbpaletten, Mischmodi und Schnittmasken Dann gehen wir zu den Kurven über. Wir beginnen mit einer einzelnen quadratischen Kurve, gefolgt von einer nahtlosen Kurve mit mehreren Punkten Dabei werden wir uns auch mit der Cursorinteraktion und der Farbzuordnung befassen und dann die Skizze erstellen und eine Audiovisualisierung erstellen Ich werde Ihnen beibringen, wie Sie Sounddateien mit ihren Daten abspielen und die Frequenz verwenden , um Animationen zu steuern. Und für die letzte Komposition, in der wir mit den Partikeln spielen, legen wir ihre Geschwindigkeit und Beschleunigung fest, damit sie auf den Cursor reagieren Wir werden auch lernen, ihre Farbe anhand von Bildern einzustellen ihre Farbe anhand von Bildern Abschließend werden wir mit ein paar zusätzlichen Tipps und Tricks abschließen . Am Ende dieses Kurses verfügen Sie über eine Menge Technik, um weiterzumachen und Ihre eigene Komposition zu entwickeln. Um das Beste aus diesen Listons herauszuholen, ist es am besten, wenn Sie mit JavaScript oder einer ähnlichen Programmiersprache vertraut sind JavaScript oder einer ähnlichen Programmiersprache Schreiben Sie Code und erstellen Sie Ihre eigene Struktur, um etwas Schönes zu schaffen Willkommen im Kurs und ich wünsche dir viel Spaß. 2. Wer beeinflusst mich: In diesem Hörbuch werde ich Ihnen von einigen der Menschen erzählen , die mich inspiriert haben. Als ich mit kreativem Programmieren anfing, war es nicht nur eine Person, die mich dazu brachte, es zu tun. Es gab eine Community von Leuten großartige Arbeit mit dem Fleisch geleistet haben, das später zu Adobe Flesh wurde. Aber ein Name, der aus dieser Zeit hervorsticht , ist Yugo Nakamur Er ist ein japanischer Designer, der früher diese Website namens yugop.com hatte, die leider nicht Dieses Codierungsexperiment war sehr minimal und sehr interessant Nicht viele von ihnen, nur eine Handvoll, aber sie hatten zu dieser Zeit großen Einfluss auf viele Menschen. Er leitet das Designstudio in Japan und leistet immer noch tolle Arbeit. Er überspringt ein paar Jahre, als das Web anfing, von Flash auf HTML Five umzusteigen Es gab zwei Websites , die mich dazu inspirierten , mit Canvas kreativ zu programmieren Eine davon war Sketch Dot Gs von Justin Wende, ein minimaler Rahmen für das Skizzieren und Verarbeiten Es gab eine Galerie mit einigen kleinen Experimenten, mit denen es ziemlich viel Spaß gemacht hat, damit zu spielen Das andere war Play Pit von Aji Moriahi, der mit einer CD experimentierte, aber auch Die Website war nur eine Sammlung zufälliger Ideen. Sie hatten nicht einmal Namen, nur Zahlen. Mir gefällt die Idee, einen Raum für zufällige Experimente zu schaffen . Es ist nicht nötig, auf ein Projekt zu warten , um mit der Programmierung einer Idee zu beginnen. Es könnte einfach als schnelles Experiment veröffentlicht werden. Außerhalb des Internets war ich auch sehr beeindruckt von der Arbeit einiger digitaler Künstler. Einer von ihnen war Memo at Ten , der nicht nur eine sehr interessante Idee hat, sondern auch ein sehr hohes Maß an Umsetzung beibehält Seine Arbeit ist sehr vielseitig, sehr gut präsentiert und zeigt manchmal ein bisschen den Prozess, der hinter der Entstehung des Kunstwerks Ich bin ein großer Fan eines Projekts aus dem Jahr 2012 namens Forms. Es gibt ein Video , in dem wir Aufnahmen von Atlet in Bewegung sehen können und wie diese als Input für die abstrakte Kunst verwendet wurden, die sie geschaffen Eine andere digitale Kunst, die ich wirklich mag, ist Rogi Atida. Er hat einen unverkennbaren Stil und ist sehr konsistent mit seiner Ästhetik Seine Arbeit ist gleichzeitig minimal und komplex. Er zeigt uns , dass wir mit Code etwas Schönes erschaffen können , ohne uns auf schwere Motoren oder realistische Lichttechniken verlassen zu müssen . Und in jüngerer Zeit, in der Ära von Instagram, gibt es viele gute Leute, die großartige Arbeit leisten. Einer, den ich hervorheben muss, ist Matt Drier , der einen unendlichen Ideenpool für das Skizzieren mit Code zu haben scheint Ideenpool für das Skizzieren mit Er veröffentlicht ständig neues Material, und er passt sich dem Aussehen seiner Arbeit an Wie wir später in diesem Kurs sehen werden, ist er auch der Autor eines beliebten Tools für kreativen Code mit Canvas. Und schließlich ist Anders Hoff, auch bekannt als n Convergent, ein Künstler, der eigentlich nicht auf Instagram , aber auf Twitter sehr aktiv ist , Auch hier minimalistisch und schön, aber nicht unbedingt einfach Er kreiert Systeme und erforscht Verhalten mithilfe von Mathematik und Geometrie, um seine Kunst zu schaffen. Ich hoffe, Sie fanden die Arbeit dieses Künstlers inspirierend, denn jetzt sind wir dran. Es ist Zeit für uns , mit dem Programmieren zu beginnen. 3. Die Verwirrung beginnen: Alles, was wir brauchen, um loszulegen, ist ein Webbrowser und ein Wir werden den Texteditor verwenden, um einen Code zu schreiben, und den Browser, um ihn auszuführen. Sie sehen sich das wahrscheinlich bereits in einem Webbrowser an. Die Hälfte der Arbeit ist also schon erledigt. Sie können gerne jeden Browser verwenden, mit dem Sie vertraut sind. Ich werde Google Chrome verwenden, aber es wäre in Ordnung, Firefox, Edge oder Safari zu verwenden . Der Inhalt, den wir sehen werden , sollte allen gängigen Browsern einwandfrei funktionieren. Was den Texteditor betrifft, so gibt es viele gute Optionen. Ich werde zwei der beliebtesten erwähnen, Visual Studio-Code und Sublime Text Sie sind beide für Windows und Mac verfügbar und beide sind sehr gut Ich werde Sublime Text verwenden , weil es lichtschnell ist und ich es wirklich mag Aber hier ist es dasselbe wie mit einem Browser. Wenn Sie bereits einen Lieblingseditor haben, kein Problem. Fühlen Sie sich frei, alles zu verwenden , was Sie für den Kurs bevorzugen. Falls du noch keinen Favoriten hast, oder wenn du einfach genau dem folgen willst , was du auf meinem Bildschirm siehst, dann würde ich Sublime Text empfehlen. Jetzt Geheimnisse hier. Klicken Sie einfach auf den großen Download-Button, folgen Sie den Schritten auf dem Bildschirm und der Editor sollte in wenigen Sekunden betriebsbereit sein. Jetzt, wo der Browser bereit und Editor bereit sind, können wir loslegen. In der nächsten Hörprobe werden wir eine Einführung in JavaScript geben. 4. Einführung in Java: Um das Beste aus diesem Kurs herauszuholen, gehe ich davon aus, dass Sie bereits mit JavaScript vertraut sind. Unser Fokus wird darauf liegen, Visuals mit Code zu beenden. Wenn wir anfangen müssten, die Sprache von Grund auf zu behandeln , bräuchten wir den gesamten Kurs nur dafür Wenn dies also Ihr erster Kontakt mit einem Programmierer ist, würde ich empfehlen, sich zuerst mit den Grundlagen vertraut Wenn Sie schnell lernen oder andere Programmiersprachen kennen oder wenn Sie einfach nur Ihr Gedächtnis über JavaScript auffrischen möchten, ist dies genau das Richtige für Sie Ihr Gedächtnis über JavaScript auffrischen möchten, ist dies Wenn Sie bereits mit JavaScript vertraut sind, können Sie gerne zum anderen Video springen Also hier habe ich vorerst Google Chrome und Sublime Text. Ich möchte nicht, dass du dir Gedanken über die Einrichtung machst oder von dem, was ich gerade eintippen werde, kopierst Wir werden noch nichts aufgeben. Wir schauen uns nur die Sprache an. Wir werden mit einer Variablen beginnen. In Javascript werden Variablen mit einem Let und Konstanten mit Kosten deklariert . Variablen können nach der Deklaration geändert werden, aber konstant ist es durchaus üblich, das Wort Variable zu hören , wenn es sich auf eine dieser Variablen bezieht. Auch wenn Constant sich nicht darauf verlassen kann, variieren. Jetzt funktioniert. Es ist auch üblich, sie mit Konstanten zu deklarieren Beispiel: Konstanten multiplizieren sich mit A und B innerhalb der übergeordneten Größen Dann ein flacher Pfeil und dann Carl BrgusrTurn A mal B. Dies entspricht dem Schreiben der Funktion A und B, gib A mal B zurück. Wenn Sie andere Programmiersprachen kennen, kommt Ihnen das zweite Format vielleicht vertrauter Aber wie dem auch sei, beide sind dasselbe. Beide sind gültig. Wir werden während des gesamten Kurses das erste Formular verwenden und dann die Funktion aufrufen Wir multiplizieren die Klammern und dann die Parameter, die wir übergeben wollen Zum Beispiel acht und vier, das würde 32 ausgeben Wenn wir die Ausgabe sehen möchten, der Konsole protokollieren, da Sie mit dem Browser arbeiten können wir sie in der Konsole protokollieren, da Sie mit dem Browser arbeiten. Also hier speichere ich das Ergebnis in einer Variablen und logge es mit dem Console Dot Log aus. Um die Konsole zu öffnen, drücken Sie unter Windows die Strg- und Shift-Taste oder auf dem Mac die Befehlstaste I. Und da ist es. Weiter zu Array und Objekten. Arrays werden mit eckigen Klammern und Objekte mit geschweiften Klammern deklariert eckigen Klammern und Objekte mit geschweiften Klammern Ein Beispiel für ein Array könnten Farben sein , bei denen jeder Wert eine Zeichenfolge ist Zum Beispiel Blau, Gelb, Rot und Grün. Ein Beispiel für ein Objekt könnte ein Polygon mit Eigenschaften wie Sichtweite und Radius Um auf ein Element im Array zuzugreifen, verwenden wir wiederum eckige Klammern. Beispiel Farben eckige Klammer Null gibt uns das erste Element der Reihe , in diesem Fall blau Um auf eine Eigenschaft eines Objekts zuzugreifen, verwenden wir den gleichen Namen des Objekts, Punkt, und dann den Namen der Eigenschaft. Zum Beispiel Polygon Dot Radio, das 120 ausgibt. Wir können Arrays mithilfe einer klassischen Vierschleife, die aus drei Teilen besteht , in einer Schleife durchlaufen drei Teilen besteht , in einer Zunächst der Index der Iteration. Traditionell entspricht der Buchstabe I dann der Länge der Schleife wie in Hallo plupon, obwohl ich kleiner als die Farbpunktlänge ist, und zum Schluss, was mit dem I bei jeder Iteration zu tun Auch hier, traditionell, mit I plus plus um eins erhöht Hier können wir auf der Konsole nach dem Wert von I und dem Wert des Arrays bei I suchen I und dem Wert des Arrays bei . Eine andere Art der Iteration durch ein Array ist die Breite für jedes Array Farbpunkte für jeden. Diesmal ist es eine Funktion und der erste Parameter ist der Wert des Elements. Von jeder Iteration können wir hier auch ein Punktprotokollelement für die Konsole Und wenn wir den Index der Iteration benötigen, wird er als zweiter Parameter übergeben Wenn nicht, ist die Syntax für Bedingungen ziemlich einfach Wenn etwas wahr ist, console dot log dot cp sole dot log dot no Wenn wir eine Variable deklarieren, können wir einen anderen, kompakteren Typ von Bedingungen mit einem ternären Operator verwenden von Bedingungen mit einem ternären Operator Nehmen wir an, wir haben eine Variable namens Nacht und möchten die Hintergrundfarbe danach einstellen ob es Nacht ist Die Hintergrundfarbe entspricht heute Abend. Fragezeichen, schwarz, Doppelpunkt weiß. Das entspricht dem Schreiben, wenn Nacht gleich wahr ist. Hintergrundfarbe entspricht Schwarz. Andernfalls entspricht die Hintergrundfarbe Weiß. Ein letztes Thema, das ich in unserer Zusammenfassung behandeln möchte, ist die Verwendung einer synchronen Funktion mit einem Sync und einer Gewichtung In JavaScript wird der Code standardmäßig synchron unterbrochen Wenn Sie also eine Variable mit einem Wert in Zeile 93 deklarieren, wissen Sie, dass sie in Zeile 92 noch nicht existiert und dass sie einen Wert in Zeile 94 hat Manchmal müssen wir Code ausführen , der nicht sofort aufgelöst Etwas in einer Zeile aufzurufen bedeutet nicht, dass wir das Ergebnis erhalten , bevor die nächste Zeile unterbrochen wird. Ein Beispiel dafür ist, wenn wir ein Bild laden wollen. Lassen Sie uns eine Funktion namens Bild laden erstellen. Sie verwendet URL als Parameter. Dann erstellen wir ein neues Bild, das in einer Variablen namens EMG gespeichert ist. Wir haben die EMG-Quelle an das RL weitergeleitet. Und dann geben wir endlich das Bild zurück. Jetzt können wir unsere Funktion zum Beispiel mit einer Variablen namens my Image verwenden , die dem Laden von Bild entspricht, und dann mit der URL, die wir übergeben möchten. Ich werde ein generisches Bild von Lorem PixM verwenden und diese URL hierher nehmen, die mir ein zufälliges Bild mit einer Breite von 200 Pixeln geben sollte , und dann versuchen wir, das Bild abzumelden wir keinen Fehler bekommen, aber die Breite wird Null sein, weil das Bild nicht fertig geladen wird, bevor wir versuchen, es daraus zu lesen. Das Laden eines Bilds ist eine unsynchronisierte Aufgabe. Um eine solche Situation zu bewältigen, können wir ein Javascript-Konzept namens Promise verwenden Ich werde eine Kopie von dem machen, was wir hier geschrieben haben. Dann werden wir diesen Blockout loben. Dann modifizieren wir die Kopie, um eine Sünde zu verwenden und warten ab. Zuerst muss ich etwas vor der Funktion eingeben , dann darin. Ich möchte ein neues Versprechen mit den beiden Parametern „ Resolve“ und „Reject“ zurückgeben . Beim Laden des Bildes wollen wir das Versprechen auflösen und MG zurückgeben. Und im Irrtum wollen wir das Versprechen zurückweisen. I Als Nächstes werde ich diesen Teil in eine andere Synchronisierungsfunktion namens Start verschieben in eine andere Synchronisierungsfunktion namens Start Und dann setze ich mein Bild auf Gewicht laden. Und dann rufe einfach Start an , um das Ergebnis zu sehen. Und hier ist der richtige Weg. Also hier sagen wir dem Browser, er soll warten, bis die Probleme behoben sind , und erst dann die nächste Zeile ausführen. Dieser letzte Teil war möglicherweise etwas komplizierter als der Rest, den wir in unserer Zusammenfassung behandelt haben Wenn Sie bis zu diesem Teil alles verstanden haben, sind Sie bereit, mit dem Kurs fortzufahren Es ist nicht zwingend erforderlich, szenisch zu verstehen und jetzt zu warten, aber es ist gut zu wissen, dass es ihn gibt, falls wir später darauf stoßen Richtig. Das ist unsere ganze Zusammenfassung Es war einfach kurz und bündig. Natürlich hat Javascript mehr zu bieten als das. Wenn also etwas nicht klar war, schauen Sie unbedingt in der Dokumentation nach. Als Nächstes werden wir mit der Einrichtung unserer Umgebung beginnen. 5. Variablen und Funktionen lernen: Beim Codieren geht es darum, einer Maschine Anweisungen zu geben. Wir müssen beide eine gemeinsame Sprache sprechen, und die Maschine. In unserem Fall werden wir Javascript sprechen und die Maschine wird den Browser als Interpreter verwenden den Browser als Interpreter Browser sind sehr mächtige Tools. Ihre Hauptfunktion besteht darin, STML-Seiten zu rendern, was keine leichte Aufgabe ist Mit SDML kann wirklich viel getan werden. JavaScript und CSS, falls Sie mit diesen Begriffen nicht vertraut sind, kann ich es einfach ausdrücken: SDML verarbeitet die Daten, CSS kümmert sich um die Formatierung und JavaScript kümmert sich um das Verhalten Unser Ziel in diesem Kurs ist es, JavaScript zu schreiben, aber ich möchte Ihnen auch zeigen, wie Sie etwas von vorne beginnen können, aus einer leeren Datei Also müssen wir zuerst ein bisschen DML sehen. Wenn wir unseren Editor öffnen, sehen wir eine leere Datei Und das erste, was ich tun möchte, ist es zu speichern. Ich habe bereits einen Ordner erstellt , in dem alle Dateien dieses Kurses gespeichert werden. Und ich werde das als Hello Dot HTML speichern. Ein HTML-Dokument besteht aus Blöcken, die andere Blöcke enthalten können. Und diese Blöcke sind definitiv nach Tags sortiert. Lass uns unseren ersten Tag schreiben. Zwischen spitzen Klammern geben wir HTML ein. Dies ist das öffnende Tag, und wir benötigen auch das schließende Tag, das mit einer spitzen Klammer und einem Schrägstrich beginnt Sie haben vielleicht bemerkt , dass der Editor das Tag bereits automatisch vervollständigt hat, sobald ich den Schrägstrich eingegeben habe ich den Diese Tags besagen, dass wir hier ein CML-Dokument haben. Und als absolutes Minimum benötigen wir mindestens ein weiteres Tag, das den Hauptteil der Seite definieren soll Lassen Sie uns also auch den Hauptteil schreiben und ihn erneut öffnen und schließen. Und dann können wir in den Körper eine Nachricht schreiben. Hallo Wort. Jetzt speichern wir die Datei. Doppelklicken Sie im Explorer oder Finder darauf. Und öffne es im Browser, und da ist unsere ganz einfache erste SEML-Seite Was ist nun, wenn wir möchten, dass die Nachricht als Header angezeigt wird Wir müssten es nur mit H-One-Tags umwickeln , öffnen und schließen. Und ich werde zum Browser zurückkehren, die Seite aktualisieren und unsere Nachricht ist jetzt als Header formatiert Der Browser drückt die SGML-Datei und rendert ihre Elemente Wir können die SGML hinter dieser Seite oder tatsächlich sehen. Jede Seite, die Sie im Browser mit dem Elementinspektor sehen , ist in den meisten Browsern die Tastenkombination Shift I oder Command Shift I. Oder wir können auch mit der rechten Maustaste auf eine beliebige Stelle auf der Seite klicken und zur Inspektion gehen Und da ist wieder unser H-one-Element, aber wir sind nicht wirklich an Header-Elementen interessiert. Wir werden SGML nur verwenden, um uns einen Raum zu geben, auf den wir zurückgreifen können, und dafür gibt es ein Element Es heißt Canvas. Öffne es, schließ es. Und dieses Mal gehen wir in das Eröffnungs-Tag, um einige Eigenschaften hinzuzufügen. Mit 600 im Inneren, doppelten Codes und einer Höhe, die ebenfalls 600 entspricht Und wenn wir jetzt speichern und aktualisieren, sehen wir nichts. Und das liegt daran, dass die Leinwand immer noch transparent ist, da ist nichts drin. Aber wenn wir das Element und Spector verwenden, können wir sehen, dass es immer noch da Es ist eine Box mit 600 mal 600 Pixeln, in die wir mithilfe von Code zeichnen können Und um Code zu schreiben, benötigen wir ein weiteres Tag, das Script genannt wird. Hier schreiben wir JavaScript, das vom Browser unterbrochen wird, und das wird unser Bereich sein. Hier fangen wir an, etwas über Programmieren zu lernen, und das allererste Thema, über das ich sprechen möchte, ist variabel. Eine Variable ist ein Verweis auf einen Wert. Ich gebe Ihnen gleich ein Beispiel, sei X gleich fünf Hier ist X eine Variable und fünf ist es ein Wert. In JavaScript haben wir eine Variable mit dem Wort let deklariert. Nehmen wir an, ich muss diesen Wert an mehreren Stellen in meinem Code verwenden . Ich muss nicht überall fünf eingeben. Ich habe mich nur auf X bezogen. Und wenn sich der Wert später zum Beispiel auf vier ändert , verwendet der Rest des Codes den aktualisierten Wert. Schauen wir uns ein anderes Beispiel an. Lass es hier gleich 2024 sein. Was wäre, wenn wir auch ein nächstes Jahr einlagern wollten, ich könnte sagen, nächstes Jahr sei gleich 2025. Aber hier statt dem Typ 2025 einfach sagen, dass nächstes Jahr gleich Jahr plus eins ist. Wenn wir den Wert des Jahres ändern müssten, hätte das nächste Jahr bereits den richtigen Wert. Sie haben vielleicht bemerkt, dass ich das Semikolon hinter dem Wert verwende, das Ende der Zeile anzuzeigen Sie sind nicht verpflichtend. Browser geben keine Fehlermeldung aus, wenn Sie sie nicht verwenden. Es gibt jedoch einige Szenarien, Es gibt jedoch einige Szenarien denen es ohne Semikolons schwierig wird Deshalb ziehe ich es vor, explizit zu sagen, wo meine Zeilen enden. Das ist der Stil, dem ich in diesem Kurs folgen werde. Sie sind immer noch variabel und dienen nicht nur dazu, Zahlen zu speichern. Sie können auch andere Arten von Daten wie Text speichern, wir könnten sagen, das Abendessen sei gleichbedeutend mit Pasta. Hier habe ich Pasta in einem einzigen Code geschrieben So unterscheiden wir normalen Text von Variablen und anderen speziellen Wörtern in JavaScript. Wir könnten auch Doppelcodes verwenden, die auch funktionieren. In der Programmierung wird Text normalerweise als Zeichenfolge bezeichnet, da es sich um eine Zeichenfolge handelt. Schreiben wir eine weitere Zeichenfolge. Lass das Urteil heute Abend sein, das Abendessen findet statt. Und dann unsere Variable. Der Satz würde heute Abend lauten, das Abendessen wird Pasta sein. Aber wenn wir den Wert unserer Variablen ändern, würde der Satz heute Abend lauten, Abendessen wird Salat sein. Variablen gibt es überall und sie sind für die Programmierung unverzichtbar. Ich glaube nicht, dass ich Ihnen noch viele Beispiele nennen muss. Das Konzept ist ziemlich einfach zu verstehen. Wir werden sie ständig verwenden, aber Variablen allein machen nicht viel Bevor wir etwas tun können, müssen wir auch über Funktionen sprechen. Eine Funktion ist ein Codeblock, der eine Aufgabe ausführt. Das kann man sich als Aktionen vorstellen. Wenn wir eine Funktion aufrufen, führen wir einen Teil des Codes aus. Schauen wir uns ein Beispiel an. Funktion macht etwas, um Klammern zu öffnen und zu schließen. Geschweifte Klammern öffnen und schließen. Wir können nicht nur daran erkennen, dass es sich um eine Funktion handelt , weil ihr das Wort Funktion vorangestellt ist, sondern hauptsächlich den öffnenden und schließenden Klammern Das bedeutet hier Aktion. In diesem Fall deklarieren wir eine Funktion und zwischen der geschweiften Klammer schreiben wir, was die Funktion tun soll Und diese spezielle Funktion macht noch nichts. Rufen wir also eine an, die tatsächlich etwas tut. Wir werden ein Browser-Tool namens ConsOT verwenden , das der beste Freund des Programmierers ist , das der beste Freund des Programmierers ist und das wir hier neben dem Elementinspektor finden können Wir können die Logout-Nachricht aus unserem Code verwenden, und um das zu tun , müssen wir aconsole dot lug in Klammern aufrufen aconsole dot lug in Klammern Wir geben die Nachricht ein, die wir protokollieren möchten, zum Beispiel hallo. Und da ist unsere Nachricht. Lassen Sie uns jetzt etwas ändern, um etwas zu sagen, und dann können wir das Konsolenprotokoll in unsere Funktion einfügen. Ja, es ist in Ordnung, eine Funktion in eine andere Funktion einzufügen. Wir wollen nicht, dass es jedes Mal Hallo sagt. Wir wollen, dass es alles protokolliert, was wir an die Funktion übergeben. Und dafür benötigen wir einen Parameter. Nennen wir es Param. Es steht hier und hier zwischen den Klammern. Jetzt können wir say something aufrufen und unsere Nachricht als Parameter übergeben. Hallo da. Oder wir könnten den Satz, den wir zuvor erstellt haben, als Variable verwenden . Anstatt ständig Fenster auszutauschen, können wir vielleicht die Browser auf der einen Bildschirmhälfte und den Editor auf der anderen Bildschirmhälfte platzieren einen Bildschirmhälfte und den Editor auf der anderen Bildschirmhälfte Schauen wir uns ein anderes Beispiel mit Parametern an. Lassen Sie uns eine Funktion namens ED erstellen, die zwei Parameter A und B verwendet. Dann addieren wir sie A plus B. Und dann können wir die Funktion aufrufen und das Ergebnis in einer Variablen speichern. Lass Ergebnis B fünf und sieben addieren. Und dann protokollieren Sie es auf der Konsole , damit wir das Ergebnis sehen können. Nun, da ist nichts, und das liegt daran, dass die Funktion nur die Zahlen addiert, sie aber nicht zurückgibt und das liegt daran, dass die Funktion nur die Zahlen addiert, . Wenn wir wollen, dass eine Funktion eine Aufgabe ausführt und auch einen Wert zurückgibt, müssen wir das Wort return hinzufügen. Jetzt sehen wir das Ergebnis. Es gibt auch eine andere Art Funktionen in JavaScript zu schreiben, die wir tatsächlich häufiger sehen werden als bei der Words-Funktion, und zwar mit einer Pfeilfunktion. Lassen Sie uns eine erstellen, die Multiply heißt. Wir beginnen mit der Deklaration einer Variablen, also lassen wir multiplizieren und dann den Wert zwei setzen, Klammern öffnen und schließen, und dann brauchen wir einen fetten Pfeil, gleich und größer als die geschweiften Klammern ist Denken Sie daran, ich habe gesagt , dass Variablen auf Werte verweisen. Hier ist das Gleiche. Wir verwenden eine Variable, verweisen auf eine Funktion. Dies ist nur eine andere Art dasselbe zu schreiben, was wir hier oben gemacht haben. Wir können unsere Parameter A und B in die Klammern setzen, und diese Funktion gibt A mal B zurück. Um zu überprüfen, ob sie funktioniert, müssen wir das Ergebnis nicht einmal in einer Variablen speichern Wir können den Anruf einfach direkt protokollieren. Konsolenprotokoll, multiplizieren Sie fünf und sieben. Und das ist unser Ergebnis. Jetzt, wo wir über Variablen und Funktionen Bescheid wissen, können wir anfangen, im Code zu ertrinken Wir benötigen eine Variable, um auf unser Canvas-Element hier oben zu verweisen . Also lass uns eins erstellen. Lass uns Canvas gleich Dokument, Punkt, Abfrageselektor und in Klammern innerhalb eines Canvas, hier sind ein paar Dinge im Gange. Lassen Sie mich das aufschlüsseln. Wir sind auf den Wert einer Variablen namens Canvas auf einen Ausdruck festgelegt . Es beginnt mit einem Dokument, dem es sich um ein JavaScript-Objekt handelt, das auf dieses HTML-Dokument verweist Punkt gibt an, dass wir etwas wollen , das Teil des Objekts ist In diesem Fall wird eine Funktion als Abfrageselektor bezeichnet wählt ein Sie wählt ein Element aus dem Dokument aus Wir müssen ihr den Namen des Elements geben , das wir auswählen wollten, und der Name ist eine Zeichenfolge Aus diesem Grund übergeben wir Canvas in einem einzigen Code. Dieser Name hier muss mit dem hier oben übereinstimmen. Der Name der Variablen muss nicht Canvas sein. Es könnte alles andere sein. Aber ich denke, es macht auch Sinn, es Canvas zu nennen. Okay, jetzt haben wir einen Verweis auf unseren Canvas, aber wir brauchen auch einen Verweis auf den Canvas-Kontext. Der Kontext muss dem Canvas-Punkt Get Context entsprechen. Diese Zeile ist der obigen sehr ähnlich, zumindest in ihrer Struktur. Wir erhalten ein Canvas-Objekt, rufen eine Funktion auf , die Teil davon ist, rufen den G-Kontext auf und übergeben einen Parameter als Zeichenfolge. Der Kontext ist der Ort, an dem wir tatsächlich zeichnen, und es können zwei D oder drei D sein. Im Moment interessiert uns der Zwei-D-Kontext. Jetzt können wir endlich etwas zeichnen. Geben wir context dot field wret ein. Field rect ist eine Funktion, die vier Perimeter benötigt X, Breite und Höhe. Ich werde 100, hundert, 404-hundert verwenden. Wir müssen immer die Klein- und Großbuchstaben überprüfen Klein- und Großbuchstaben Wenn nicht, wird es einen Fehler geben. Überprüfen Sie auch die Syntax. Überprüfen Sie weiterhin Ihr gesamtes Skript. Sicher und auffrischen. Und da ist unsere erste Form, die mit Code gezeichnet wurde. Lassen Sie mich erklären, was diese Zahlen bedeuten. Diese R-Koordinaten in einem Raum mit zwei D. Unsere Leinwand ist eine Fläche von 600 mal 600 Pixeln, und die 00 befindet sich hier oben in der linken Ecke. Die Werte, die wir in unserem Feld rect für X und Y verwenden , sind 100 und 100. Wir beginnen also bei Null, bewegen uns 100 Pixel nach rechts, 100 Pixel nach unten, und hier fangen wir an, die Form zu zeichnen. Dann gehen wir 400 Pixel nach rechts und 400 Pixel nach unten. Lassen Sie uns nun die Farbe unseres Rechtecks ändern. Die Standardfeldfarbe ist Schwarz. Wenn Sie etwas anderes wollen, müssen wir den Feldstil ändern. Bevor wir das Feld ruinieren, geben wir Context dot fill style ein, und dieses Mal ist es keine Funktion, sondern eine Eigenschaft Und die Eigenschaft ist genau wie eine Variable, die Teil eines Objekts ist In diesem Fall wird ein Wert gespeichert. Wir stellen es auf Blau. Sicher und neu, und da ist unser blaues Rechteck. Und hier verwenden wir die schnellste Funktion, die wir haben konnten, um etwas in unsere Leinwand zu zeichnen Feet ist eine Art Abkürzung. Es macht eigentlich drei Dinge gleichzeitig. Es erstellt eine neue Form, zeichnet ein Rechteck und füllt es mit etwas Farbe. Wenn wir etwas anderes machen wollten, wie zum Beispiel nur den Umriss des Rechtecks, müssten wir explizitere Anweisung schreiben. Zuerst müssen wir dem Kontext mitteilen, dass wir mit einer neuen Form oder einem neuen Pfad beginnen. Der Kontextpunkt beginnt mit dem Pfad. Dann müssen wir dem Kontext mitteilen, dass wir ein Rechteck zeichnen wollen, ohne es zu füllen. Kontaktieren Sie Punkt t, und wir können den gleichen Parameter verwenden, den wir vor 100 Hundert, 400, 400 verwendet haben. Dann könnten wir uns entscheiden, ihn entweder mit einer Farbe zu füllen oder nur den Umriss zu zeichnen, was ich mit dem Kontext-Punktstrich machen werde . Wenn wir jetzt aktualisieren, sehen wir gerade einen schwarzen Umriss um das blaue Rechteck. Machen wir es etwas einfacher, es zu erkennen, indem wir die Linienbreite erhöhen Die Linienbreite des Kontextpunkts entspricht vier. Wir könnten das blaue Rechteck auch ausblenden, indem die Zeile mit dem Feldbruch auskommentieren Wir müssen nur zwei für Schrägstriche am Anfang der Zeile eingeben Schrägstriche am Anfang der Zeile In Sublime Text gibt es dafür eine Abkürzung, die für einen Schrägstrich oder einen Befehl für einen Word-Slash gesteuert wird oder einen Befehl für Sie können sehen, dass die Zeile grau wird, was bedeutet, dass sie auskommentiert ist, und dass sie vom Browser beim Ausführen des Codes übersprungen Lassen Sie uns nun eine andere Form zeichnen. Lass uns einen Kreis zeichnen. Wir beginnen wieder mit dem Startpfad des Kontextpunkts, und die Methode zum Zeichnen eines Kreises heißt ARC-Kontextpunkt RC. Und woher wissen wir, wo die Methoden oder Eigenschaften für Canvas oder den Canvas-Kontext verfügbar sind? Wir müssen auf die Dokumentation verweisen. Es gibt ein paar Referenzdokumentationen online, und für Canvas neige ich dazu, diese für drei Schulen zu verwenden . Lassen Sie mich alles als eine einzige Liste sehen. Hier ist zum Beispiel ein Feldwrack, und hier ist die Linienbreite Das Wort Methode kann hier als Funktion gelesen werden. Es gibt einen subtilen Unterschied zwischen den beiden, aber wir müssen uns nicht darin verzetteln Wenn Sie die Methode verwenden, können Sie sich also eine Funktion vorstellen Die Mitte, die uns jetzt interessiert, ist Rc, also schauen wir uns das genauer an. Hier unten sehen wir, dass es sechs Perimeter benötigt, und der letzte ist optional, also konzentrieren wir uns auf die ersten X, Y-Radius, Startwinkel und Endwinkel. Ich möchte genau in der Mitte unserer Leinwand kreisen, die 600 mal 600 groß ist. X und Y werden also 303-hundert sein. Der Radius kann 100 sein und der Start - und Endwinkel wären Null bis 360, aber Winkel werden in Strahlkraft und nicht in Grad ausgedrückt. Wir brauchen also Null bis Pi mal zwei. In JavaScript wird die PI-Nummer so oft verwendet , dass sie bereits als Konstante gespeichert ist, und wir können mit dem mathematischen Punkt PI darauf zugreifen. Und dann müssen wir sie nur noch mit zwei multiplizieren. Um nun endlich den Kreis zu zeichnen, könnten wir Füllung oder Kontur verwenden, und ich werde wieder Kontur verwenden. Das ist also ziemlich gut. Wir lernen und wir zeichnen. Und jetzt werden wir das auch weiterhin tun. In der nächsten Lektion werde ich Ihnen etwas über Arrays und Loops beibringen 6. Arrays und Loops lernen: Bevor wir weitere Entwürfe entwerfen können, schauen wir uns zwei andere Programmierkonzepte an Wir werden mit Arrays beginnen. Die Array-Liste ist, ich gebe Ihnen gleich ein Beispiel. Lass deine gleich sein Hier haben wir eine Liste von Werten und wir können sie als Array erkennen , weil sie in eckigen Klammern stehen und die Werte durch cos getrennt sind Hier haben wir eine Liste von Werten und wir können sie als Array erkennen, weil sie in eckigen Klammern stehen und die Werte durch cos getrennt sind. Und das gilt für alle Arten von Werten Wir können ein Array von Zeichenketten erstellen. Lass das Menü gleich Start oder Mai sein. Nachtisch und Getränke. Was wäre, wenn wir jeden Punkt auf dieser Liste durchgehen wollten? Wenn wir Loops brauchen. Loops sind Codeblöcke , die für eine begrenzte Anzahl von Malen immer wieder ausgeführt für eine begrenzte Anzahl von Malen immer wieder In JavaScript gibt es nur wenige verschiedene Arten von Schleifen. Ich zeige dir den Klassiker für Loop. Für offene und geschlossene Klammern öffnen und schließen Sie die coole Innerhalb der Klammer Clear schreiben wir den Code, den wir mehrmals ausführen möchten Und innerhalb der Klammern schreiben wir einen Ausdruck zur Steuerung der Schleife, die aus drei Teilen besteht Im ersten Teil deklarieren wir eine Variable als Index der Schleife Traditionell verwenden wir den Buchstaben I und beginnen mit Zo, also sei I gleich Zo Und hier brauchen wir ein Semikolon , um das Ende des ersten Teils anzuzeigen Der zweite Teil ist die Dauer der Schleife oder wie oft wir laufen wollten Und wir wollten laufen, während ich weniger als vier Jahre alt bin. Und der dritte Teil ist das, was wir bei jeder Iteration des Loops mit I machen wollen jeder Iteration des Loops mit I Und wir wollen es um eins erhöhen, also ich plus gleich Das Inkrementieren um eins ist in der Programmierung sehr üblich. Es gibt also einen kürzeren Weg, dasselbe zu schreiben, nämlich I plus plus Damit sagen wir, dass wir bei Null beginnen und dann etwas ausführen, dann zu Eins wechseln und dann wieder etwas ausführen. Und dann zu zwei und zu drei. Und wenn wir bei vier sind, springen wir aus der Schleife raus und machen mit dem Rest des Codes weiter. Diese Schleife wird vier Iterationen lang laufen, was der Anzahl der Elemente entspricht, die wir in unserer Menüleiste haben. Wir können auf die Elemente des Arrays zugreifen, indem wir menu eingeben. Eckige Klammern. Ich hier, ich ändere seinen Wert 0-1 und dann zwei und dann drei Wir können diesen Followout jedes Mal sperren, wenn der Loop läuft. Und es gibt unsere Speisekarte mit Artikeln, die einzeln aufgelistet sind. Und das könnte etwas dynamischer sein. Nehmen wir an , wir würden unserer Speisekarte einen Artikel hinzufügen , zum Beispiel Beilagen. Und wenn wir das dann ausführen würden, würden wir es nicht auf der Konsole sehen , weil unser Loop viermal läuft und unsere Liste jetzt fünf Elemente enthält. Wir können die Zahl vier hier durch die Größe oder Länge unseres Arrays ersetzen . Minimale Länge. Nun, es spielt keine Rolle, wie lang das Array ist, wir werden immer alle Elemente durchgehen Und Schleifen dienen nicht nur zum Lesen von Werten aus einem Array, wir können sie auch verwenden, um zwei Arrays zu schreiben Lassen Sie uns diese Werte hier entfernen und sie als leeres Array belassen Und dann können wir eine weitere Schleife schreiben diesmal bis zu zehn. Hier wollen wir Werte in das Jahres-Array 2024 plus R übertragen das Jahres-Array 2024 plus . Nachdem die Schleife beendet ist, können wir den Wert von Jahren protokollieren und sehen, was darin enthalten ist. Wir sehen, dass wir das Array mit einem Wert 2024-2033 gefüllt haben. Wir können auch Schleifen zum Zeichnen verwenden, also machen wir das. Lassen Sie uns eine weitere Schleife erstellen fünfmal läuft, und darin schreiben wir etwas Ähnliches wie das, was wir zuvor geschrieben haben Der Pfad beginnt im Kontext. Kontext-Punkt-Wreck X und Y können bei 100 bleiben, aber Breite und Höhe sind jetzt 60 und dann Kontext-Punktstrich Wenn wir das ausführen, sehen wir hier oben ein weiteres Quadrat, aber lassen Sie uns die anderen Formen auskommentieren , um das etwas klarer zu machen Wir sollten fünf Quadrate sehen, aber wir sehen nur eines, und das liegt daran, dass wir sie übereinander zeichnen . Wir müssen jedes Mal etwas ändern, wenn die Schleife läuft. Wir könnten zum Beispiel sagen, dass X 100 plus 60 ist, was das breiteste mal I ist. Jetzt sehen wir alle fünf , oder wenn wir zwischen den Quadraten eine Lücke machen wollen, könnten wir 80 mal sagen. Aber dann sagen wir, wir wollen diese Lücke beibehalten, aber die Breite auf 40 ändern Wir müssten diesen Wert an zwei Stellen ändern, und das klingt nach einem guten Kandidaten für eine Variable Lassen Sie uns sie hier deklarieren. Lass die Breite gleich 60 sein. Die Höhe sei gleich 60. Sei X gleich 100. Sei Y gleich 100. Und dann verwenden wir sie im Parameter. Wir können auch eine Variable für eine Lücke erstellen, bei der die Lücke 20 entspricht, und dann X auf 100 plus aktualisieren Holz plus Lücke mal R. Wenn wir dabei sind, ändert sich nichts Aber wenn wir jetzt die Hölzer des Arrays ändern würden, würde der Abstand konstant bleiben Was wir jetzt haben, ist eine Reihe von fünf Quadraten. Was wäre, wenn wir mehr Reihen wollten? Wir würden eine weitere Schleife innerhalb unserer Schleife benötigen, oder mit anderen Worten, eine verschachtelte Schleife Wir benötigen auch einen weiteren Buchstaben für den Index der zweiten Schleife Und traditionell ist es der Buchstabe G. Dann müssen wir unseren Code innerhalb der zweiten Schleife im Subblin-Text innerhalb der ausgewählten Zeilen verschieben und Strg+Shift nach oben oder unten drücken, um sie zu verschieben Jetzt können wir Y genauso aktualisieren, wie wir es mit X gemacht haben. 100 plus Höhe plus Abstand mal G. Und wir entfernen die Rechtecke Alles, was wir in diese Schleife schreiben , wird 25 mal ausgeführt Wenn wir also eine andere Form zeichnen, würde sie ebenfalls 25 Mal erscheinen. Lass uns das machen. Kontext-Startpfad, Kontextpunkt Rect, und wir können das Rechteck jetzt etwas kleiner machen. X plus acht Y plus acht Breite -16 und Höhe -16. Und dann Kontext Dot Stroke. Was ist nun, wenn wir nicht wollen, dass dieses kleinere Quadrat in allen großen Quadraten erscheint ? Es ist Zeit für ein anderes Programmierkonzept. Bedingungen in JavaScripts sind denen im Englischen sehr ähnlich Wenn eine Bedingung etwas bewirkt oder etwas anderes bewirkt, brauchen wir nicht immer eine Wenn das sonst bedeutet, nichts zu tun, dann können wir es überspringen. Lassen Sie uns die Bedingung in unserer Schleife verwenden. möchte das kleine Quadrat nur zeichnen, wenn I größer als Null und kleiner als vier ist. Beachten Sie hier den aktuellen Operator , der ein logisches Ende bedeutet. Dadurch wird das kleine Quadrat in der ersten und in der letzten Spalte übersprungen . Wir könnten hier Ls schreiben und vielleicht in verschiedenen Formen zeichnen. Aber stattdessen werden wir uns etwas Interessanteres ansehen. Denken Sie daran, wann wir PI verwenden müssen, und ich sagte, es wird so oft verwendet , dass wir dafür eine Konstante haben. Nun, Zufallszahlen werden noch häufiger verwendet, und wir haben eine Funktion, um sie zu ermitteln. Mathe-Punkt zufällig. Diese Funktion gibt eine Zufallszahl 0-1 zurück , und das sind unsere Freunde Das Ergebnis ist jedes Mal anders, und das ist sehr interessant für uns , die Bilder mit Code erstellen Es führt ein gewisses Zufallselement ein. Lässt den Computer ein bisschen kreative Arbeit machen, ein bisschen generatives Design, wir könnten eine Zufallszahl in unserer Bedingung verwenden. Stattdessen könnten wir also sagen, dass wir das kleine Rechteck zeichnen wollen. Wenn die zufällige Zahl der mathematischen Punkte größer als 0,5 ist, diese Bedingung in durchschnittlich 50% der Fälle wahr. Immer nach dem Zufallsprinzip. Jedes Mal, wenn wir die Seite aktualisieren, erhalten wir an verschiedenen Stellen kleine Quadrate. Wir haben bis hierher ziemlich viel behandelt, aber bevor wir mit unserem Hello-HTML weitermachen, möchte ich etwas mehr über einige der Konzepte sprechen , die wir zuvor gesehen haben. Ich habe erwähnt, dass wir in JavaScript Variablen mit dem Wort let deklarieren. Es gibt auch eine andere Art, sie zu deklarieren, und das ist das Wort const Kosten stehen für konstant. Also verwenden wir es für einen Wert , der sich nicht ändern wird. Ein Beispiel könnte variabel für die Schwerkraft und ein anderes für die Geschwindigkeit sein. Schwerkraft ändert sich nicht, also sollten wir sie mit den Kosten angeben, und die Geschwindigkeit wird sich wahrscheinlich ändern. Wir würden sie also mit Blei deklarieren. Als Faustregel gilt, immer const zu verwenden , es sei denn, wir wissen, dass sich der Wert ändern wird Wir können das auf unseren Loop hier oben anwenden. Höhe und Abstand des Waldes ändern sich nicht, also könnten sie Konstanten sein Tatsächlich müssen sie nicht einmal innerhalb der Schleife deklariert werden Es würde genügen , wenn sie nur einmal außerhalb der Schleife deklariert würden , und das Gleiche gilt für X und Y. Aber wir wissen, dass sich ihr Wert ändern wird, also müssen wir für sie let verwenden Und da sie keinen Anfangswert haben, können sie beide in derselben Zeile deklariert werden Jetzt ändert sich die visuelle Ausgabe nicht, aber unser Code ist etwas übersichtlicher. Ich werde nicht über alle Arten von Schleifen in JavaScript sprechen , aber ich möchte Ihnen mindestens eine weitere zeigen, und zwar für jede Schleife. Erinnern Sie sich an unsere Menüanordnung. Wir können die einzelnen Elemente durchgehen, indem wir jeweils einen Minu-Punkt eingeben und dann Klammern öffnen, weil es sich um eine Und der erste Parameter ist das Element, über das iteriert wird. Und dann brauchen wir den dicken Pfeil und die offenen geschlossenen geschweiften Klammern. Innerhalb der Klammern können wir den Artikel genauso protokollieren, wie wir es zuvor getan Und da ist noch einmal unsere Artikelliste . In dieser Lektion haben wir viele Programmierkonzepte gesehen. Wir werden uns sehr bald wieder mit dem Code befassen und diese Konzepte immer wieder verwenden . Falls einige von ihnen noch nicht ganz klar sind, sich keine Sorgen, Sie können sie unterwegs auswählen. Am besten lernt man anhand von Beispielen, und wir werden viele davon sehen, während wir skizzieren Jetzt sind Sie mit weiteren Programmierkonzepten vertraut. In der nächsten Lektion werden wir uns einer Umgebung zum Skizzieren befassen 7. Umweltskizzen lernen: In den vorherigen Lektionen wollte ich Ihnen einen direkten Zusammenhang zwischen Wörtern, die wir in den Texteditor eingeben, und dem, was passiert, wenn sie vom Browser unterbrochen werden, zeigen die wir in den Texteditor eingeben , und dem, was passiert, wenn sie vom Browser unterbrochen werden Darauf kommt es immer an. Der Browser drückt immer etwas HTML und unterbricht irgendeinen Code. Aber wir müssen nicht jedes Mal bei Null anfangen. Im Laufe der Jahre hat die Community ein ganzes Ökosystem von Tools entwickelt ein ganzes Ökosystem von , um Dinge für den Browser zu schreiben, und das können wir nutzen. Jetzt werden wir ein paar Ebenen zwischen unserem Code und dem Browser hinzufügen . Die Komplexität wird etwas zunehmen, aber es gibt nichts, wovor man Angst haben müsste. Ganz im Gegenteil, von nun an wird es spannender werden. Wir werden noch ein paar Dinge installieren müssen. Das erste, was wir brauchen, ist ein Terminal. Sie müssen nichts installieren. Sie müssen nur zum Finder gehen und Terminal eingeben. Wenn Sie Windows verwenden, müssen Sie etwas herunterladen. Und auch hier gibt es ein paar Optionen und sie sind alle in Ordnung. Git für Windows oder Commander, oder in meinem Fall werde ich Cmdar verwenden Sie können aber auch CU verwenden, also wählen Sie, was Sie möchten Klicken Sie auf die Download-Schaltfläche und installieren Sie es. Wenn Sie es öffnen, sehen Sie ein Fenster wie dieses. Das Farbschema kann unterschiedlich sein, je nachdem , auf welcher Plattform Sie sich befinden oder welche Option Sie ausgewählt haben Aber im Wesentlichen ist es alles dasselbe. Als Nächstes müssen wir auch Node Dotgs zum Stillstand bringen. Gehen Sie also zu nodgs.org und laden Sie die neueste empfohlene Version herunter Nachdem die Installation abgeschlossen ist, können wir überprüfen, ob alles unser Terminal öffnen und Knoten V eingeben, sollten Sie hier die Versionsnummer sehen. Falls Sie etwas anderes wie den Befehl nicht gefunden sehen, müssen Sie möglicherweise Ihr Terminal schließen und erneut öffnen. Node ist jetzt unstid und enthält etwas namens PM, das uns sehr interessiert Lassen Sie uns überprüfen, ob es hier ist, indem wir PMV eingeben. MPM ist ein Paketmanager für JavaScripts. Es ermöglicht uns, Pakete und Bibliotheken zu installieren, die von der Community rekrutiert wurden Dies ist Teil des Ökosystems, von dem ich gesprochen habe. Wir werden eine Bibliothek namens Canvas Sketch gestalten, die sich hervorragend für kreatives Programmieren mit Canvas eignet. Canvas Sketch wurde von Matt Dier , einem Künstler und kreativen Programmierer, entworfen. Und ich würde auf jeden Fall empfehlen, sich seine Arbeit anzusehen. Aber lassen Sie uns vorerst mit dem Stillstand der Canvas-Skizze weitermachen. Wir müssen diese Zeile kopieren und in unser Terminal übergeben. Canvas-Sketch im PM-Stil, Cli G. Dadurch wird die Bibliothek mit PM blockiert und das G bedeutet, dass wir sie global installieren Wir können es also von überall aus ausführen, nicht nur von unserem aktuellen Ordner aus CLI steht hier für Command Line Interface, was bedeutet, dass wir einige Befehle für Canvas Sketch in unser Terminal eingeben können einige Befehle für Canvas Sketch in unser Terminal Sobald die Installation abgeschlossen ist, müssen wir zu dem Ordner wechseln, den wir für diesen Kurs erstellt haben. Ich gehe davon aus, dass einige von Ihnen mit Terminalbefehlen nicht besonders vertraut sind, also schauen wir uns einige davon kurz an. Klar. Wenn Sie den Bildschirm löschen möchten, klicken Sie auf CD, um das Verzeichnis zu wechseln. In meinem Fall möchte ich zu Dokumenten Java Visual wechseln. Falls Sie zu einem übergeordneten Ordner zurückkehren müssen, können Sie CD Dot Forward Slash eingeben Sobald wir den Namen einer vorhandenen Datei oder direkt eingeben , können wir die Tabulatortaste drücken Die automatische Vervollständigung und wir haben auch LS, um Dateien und Ordner im aktuellen Verzeichnis aufzulisten . Das ist natürlich mein Ordner, und ich hoffe, du hast deinen auch gefunden. Wir müssen einen weiteren Ordner darin erstellen, und der Befehl lautet MKDIR oder make directory und dann der Name des neuen Verzeichnisses Wir nennen es unsere Skizzen. Und dann CD-Skizzen für unseren neuen Ordner. Und hier werden wir Canvas Sketch verwenden , um eine neue Datei für uns zu erstellen Also geben wir zuerst Canvas sketch ein, dann den Namen unserer Datei, die dzero one dot gs skizzieren soll Und dann ist es neu zu sagen, dass wir wollen, dass es erstellt wird. Wenn Sie weitere Informationen zu diesen Befehlen wünschen, schauen Sie sich Canvas Sketch an. Lies mich auf Github. Jetzt gehen wir zurück zu unserem Ordner, wir können sehen, dass es ein paar neue Dateien gibt. Paket Dot GSO und Paket Dot Log Dot JSON. Es gibt Datendateien, die die Pakete verfolgen , die wir mit MPM gestartet Was wir wollen, ist Sketch 01 Dot Gs in unserem Editor zu öffnen. Wir können einen kleinen Standardcode sehen, der bereits für uns geschrieben wurde Lassen Sie mich erklären, was hier drin ist. Oben sehen wir eine Zeile mit einer Anforderung. Es ist wichtig, die Canvas-Skizzenbibliothek verwenden und einen Verweis darauf als Canvas-Skizze zu speichern. Dann haben wir ein Objekt namens Setting mit einer Eigenschaft namens Dimensionen. Diese Werte sind in Pixeln angegeben. Das bedeutet, dass ein Canvas-Element erstellt wird, das 2048 mal 2048 Pixel groß ist Dann haben wir eine Funktion namens sketch, die eine andere Funktion ohne Namen zurückgibt Diese anonyme Funktion heißt B Delivery selbst und gibt uns einige praktische Eigenschaften unserer Leinwand, wie Kontext, Breite und Höhe. In dieser Funktion sehen wir etwas Vertrautes. Wir haben einen kontextgefüllten Stil und einen Kontextfeldumbruch. Dies ist im Wesentlichen das Zeichnen eines großen weißen Rechtecks als Hintergrund für unsere Leinwand. Und die letzte Zeile ruft endlich Delivery auf und übergibt sowohl unsere Sketch-Funktion unsere Einstellung als Parameter. Wenn wir zu unserem Terminal zurückkehren, können wir diese Infozeile sehen, in der steht, dass Server läuft unter und dann die HTTP-Adresse. Dies sagt uns, dass der Canvas-Sketch den lokalen HTTP-Server begrüßt hat und wir ihn in unserem Browser öffnen können Anstatt also auf die HTML-Datei zu doppelklicken , um sie zu öffnen, besuchen wir jetzt die Webseite Diese Webseite befindet sich jedoch nicht auf dem Terminal, sondern nur auf unserem Computer. Kopieren Sie das und fügen Sie es in die Adressleiste ein. Und hier ist unsere Skizze. Es ist ein großes weißes Quadrat. Lassen Sie uns den Bildschirm erneut teilen, zur Hälfte für den Editor und zur Hälfte für den Browser. Wenn wir nun den Feldstil auf Blau ändern, können wir sehen, dass wir die Seite nicht mehr aktualisieren müssen . Der Canvas-Cache macht das automatisch. Wenn wir nach Änderungen in der GS-Datei suchen und die Seite jedes Mal aktualisieren, wenn wir sie speichern, könnten wir in unserer Hallos-GML dort weitermachen, wo wir aufgehört haben in unserer Hallos-GML dort weitermachen, wo wir aufgehört Wir können unsere verschachtelte Schleife kopieren und sie hier einfügen. Wir müssen nur ein paar Dinge anpassen. Wir können sehen, dass Breite und Höhe bereits als Parameter verwendet werden, also müssen wir unterschiedliche Namen für unsere Variable wählen. Lassen Sie uns das durch W und die Höhe durch H ersetzen Höhe . Jetzt setzen wir den Füllstil auf Weiß zurück, und schon ist wieder unser Raster für Rechtecke da Sie sind ziemlich klein, weil unsere Leinwand jetzt viel größer ist als zuvor Lassen Sie uns also die Dimension wieder auf 600 mal 600 ändern. Nun, das kommt mir sehr bekannt vor. Eines der coolsten Features von Canvas Sketch ist für mich, dass wir alles sehen können, was wir zeichnen Durch Drücken von Strg S oder Befehl S wird ein PNG aus dem Canvas generiert und standardmäßig in den Download-Ordnern gespeichert Wir können den Ausgabeordner ändern und verwenden, den wir für diesen Kurs erstellt haben. Gehen wir zurück zu unserem Terminal und drücken Strg C oder Befehl C die aktuelle Aufgabe zu unterbrechen und die Eingabeaufforderung zurückzubekommen Drücken Sie nun den Pfeil nach oben, um zum letzten Befehlstyp zurückzukehren Und hier wollen wir statt Dadu einen Strichstrich ausgeben und stellen es so ein, wollen wir statt Dadu einen Strichstrich ausgeben dass Schrägstrich 01 ausgegeben Jetzt läuft unser Sketch wieder, und wenn wir Control S oder Command S drücken, wird die Datei in unseren Ordner, Ausgabe 01, verschoben und da ist sie Ein weiterer Vorteil von Canvas Sketch ist, dass es sehr einfach ist, andere Dimensionen zu verwenden. Nehmen wir an, wir möchten unsere Skizze im Format A vier drucken Wir können unsere Abmessungen durch eine Zeichenfolge ersetzen. Eine Vier, und da wir drucken, benötigen wir auch eine höhere Pixeldichte. Wir können also 300 Pixel pro Zoll verwenden. Wir können die Ausrichtung des Papiers ändern und die Landschaft verwenden. Alle diese Einstellungen sind in der Canvas-Sketch-Dokumentation verfügbar. Sie werden wahrscheinlich feststellen , dass unsere Skizze fast verschwunden ist, als wir die Pixeldichten geändert haben Und das liegt daran, dass wir hier fest codierte Zahlen verwenden. Wir können unsere Skizze dynamischer gestalten, indem diese Zahlen im Verhältnis zur Größe der Leinwand setzen. Wir müssen sie als Prozentsatz festlegen. Also wollen wir das für Instagram vorbereiten. Wir müssen unsere Dimension bis 1080 auf 1080 ändern. Unsere Breite, die jetzt W ist, verwenden wir als Wert von 60, was 10% von 600 entspricht, sodass wir sie auf Breite mal 0,10 setzen können Und jetzt sind es immer 10% der Breite der Leinwand Und das Gleiche können wir für die Höhe tun 10% GAAP ergibt 20, was etwa 3% entspricht, was etwa 3% entspricht, also multipliziert mit 0,03 Und für X und Y könnten wir Variablen erstellen, die diese Zahl 100 hier unten ersetzen Also x für anfängliches X und Y für anfängliches Y. Hundert geteilt durch 600 ist ungefähr 17%, und dann müssen wir sie innerhalb der Schleife ersetzen Die Offsetwerte für das kleinste Quadrat hier unten könnten auch von einer Variablen stammen Lassen Sie uns also eine namens off erstellen. Früher waren es 16, was etwa 2% des Windes entspricht. Wir suchen nicht wirklich nach exakten Werten. Und jetzt müssen wir diese Zahlen durch zwei dividieren und dann durch und aus ersetzen . Wir müssen auch die Linie ändern , die früher vier war, aber wir können sie etwas dicker machen und sie auf 1% der Breite setzen. Jetzt können wir die Strg - oder Befehlstaste drücken, um ein paar Varianten zu speichern und uns unsere erste Skizze in unserem Ausgabeordner anzusehen . Wenn eines der Konzepte, die wir bisher gesehen haben , noch nicht klar ist, machen Sie sich darüber keine Gedanken. werden wir noch viele weitere Beispiele sehen diesem Kurs werden wir noch viele weitere Beispiele sehen. 8. Lerne etwas über Transformation: In dieser Liste werden wir mit einer neuen Skizze beginnen, und das Endergebnis wird so aussehen Um das zu erreichen, müssen wir etwas über die Canvas-Transformation und den Zustand des Kontextes lernen und den Zustand des Kontextes Lass uns graben. Gehe, um eine neue Skizze zu beginnen Das Terminal ist also immer noch im Projektordner geöffnet Wir geben Canvas sketch sketch 02, open ein. Dadurch wird eine neue Datei namens sketchs dot gs erstellt. Sie können es auch mit new erstellen. Sie müssen den Dash nicht öffnen. Und Öffnen ist nur ein neuer Tab im Browser. Wir können Skizze 02 in unserem Editor öffnen und sie sieht genauso aus wie Skizze 01, als wir sie erstellt haben. Lassen Sie uns die Abmessungen noch einmal auf 1080 mal 1080 ändern und auch den Bildschirm erneut teilen. Und wir beginnen damit, etwas Bekanntes zu zeichnen , ein schwarzes Quadrat. Stellen Sie also zuerst den Füllstil auf Schwarz ein. Dann der Kontextpunkt, der Pfad beginnt. Kontext-Punkt Rect, und wir übergeben X, Y, W und welche Variablen wir in Sekunden erstellen werden , und dann den Kontextpunkt füllen. Und jetzt brauchen wir, dass Kosten X gleich Null sind, Kosten Y gleich Null sind und dass Kosten W am breitesten ist, 30% der breitesten Fläche unserer Leinwand ausmachen können 30% der breitesten Fläche unserer Leinwand ausmachen können Also Breite mal 0,0 und Kosten , was 30% der Höhe unserer Leinwand entspricht Speichern Sie das und wir haben unser schwarzes Quadrat. Nun, wenn du es verschieben willst, gibt es zwei Möglichkeiten, es zu tun. Erstens wissen wir bereits, dass wir hier nur den Wert von X und Y ändern müssen . Die andere Möglichkeit besteht darin, den Kontext selbst zu transformieren. In diesem Fall übersetzt Context Dot Translate den Kontext mit X und Y. Ich zeichne das Rechteck jetzt bei Null Das Ergebnis ist dasselbe, aber es gibt einen grundlegenden Unterschied Ich kann mit Stift und Papier eine Metapher erstellen. Einer bewegt den Stift, während das Papier still steht, und der andere bewegt Papier, während der Stift still bleibt Wenn alle Transformationen, die wir machen wollen, nur Übersetzungen sind, gibt es keinen großen Unterschied zwischen den einzelnen Methoden, die wir verwenden Aber wenn wir mehr Transformation wie Rotation oder Skalierung anwenden wollen , dann macht das schon einen Unterschied können Sie ganz deutlich sehen, wenn wir versuchen, den Kontext zu rotieren. Lassen Sie mich wieder X und Y direkt direkt verwenden und diesen Übersetzungsaufruf auskommentieren Jetzt wollen wir den Kontext Punkt drehen und einen kleinen Winkel wie 0,3 übergeben Es stimmt, dass wir das Quadrat gedreht haben, aber wir haben es auch ein bisschen verschoben. Wir können sehen, dass der Ankerpunkt der Drehung außerhalb des Quadrats lag. Es war tatsächlich hier oben links der Leinwand, weil hier der Ursprung liegt. Das entsprach dem Drehen des Papiers und dem anschließenden Bewegen des Stifts. Nun, wenn wir stattdessen das Papier bewegen oder wenn wir den Kontext vor dem Drehen übersetzt und dann das Quadrat von Null aus gezeichnet haben, Null. Wir können sehen, dass die Drehung von links oben auf dem Quadrat und nicht von der Leinwand aus erfolgen würde . Jetzt wäre der Ausgangspunkt also hier oben. Und dann sehen wir den Vorteil der Verwendung von Kontexttransformationen. Unser Quadrat sieht ein bisschen seltsam aus, wenn es von oben links gedreht Es sieht aus, als wäre es rosa an einer Wand gewesen. Es würde schöner aussehen, wenn es von der Mitte aus gedreht würde, X und Y befinden sich bereits in der Mitte der Leinwand Also müssen wir anfangen, das Quadrat ab minus der Hälfte seiner Breite und minus der Hälfte seiner Höhe zu zeichnen minus der Hälfte seiner Breite und minus der Hälfte seiner Höhe Und natürlich gibt es keinen Unterschied zwischen Division durch zwei oder der Multiplikation mit 0,5 Damit es mit unserer Variablen hier oben konsistent bleibt, multiplizieren wir das mit 0,5 Eine Sache, die man bei dieser Transformation beachten sollte , ist, dass sie kumulativ sind Wir ändern den Zustand des Kontextes sobald wir das Papier bewegen und drehen, bleibt es dort Wenn wir eine andere Form zeichnen würden, würde sie an der Stelle beginnen, an der wir aufgehört haben. Ich zeige Ihnen ein kurzes Beispiel. Zuerst übersetze ich den Kontext 104 Hundert und zeichne dann einen Kreis. A Wenn wir beabsichtigt den Kreis zusammen mit dem Quadrat zu drehen, wäre das perfekt gewesen. Aber wenn wir nur den Kreis bei X 100 und Y 400 haben wollten, müssten wir zurückarbeiten und all unsere vorherigen Transformationen rückgängig machen, die sich schnell in Richtung Richtung bewegen würden Stattdessen können wir den Zustand des Kontextes zurücksetzen . Es funktioniert so. Zuerst speichern wir den aktuellen Status, dann führen wir unsere Transformationen durch und dann stellen wir den Zustand wieder her, in dem wir ihn zuvor gespeichert haben Also zuerst den Kontextpunkt speichern und dann den Kontextpunkt wiederherstellen Und jetzt sehen wir unseren Kreis, dessen Ursprung bei 104 hundert liegt. Wir brauchen den Kreis eigentlich nicht. Das war nur ein kurzes Beispiel. Von nun an werden wir das häufig verwenden. So ziemlich jede Transformation wir sehen, wird in Blöcken wie diesen ablaufen, angefangen mit einem Safe bis hin zur Wiederherstellung. Jetzt sind Sie mit Übersetzungen vertraut. In der nächsten Lektion werden wir weiter etwas über Transformation, Rotation und ein bisschen Trogonometrie lernen , Rotation und ein bisschen Trogonometrie 9. Mehr über Winkel erfahren: In dieser Hörprobe werden wir uns auf Rotationen konzentrieren. Wir werden sehen, wie man Winkel von Grad in Strahlkraft umrechnet Winkel von Grad in Strahlkraft umrechnet und mithilfe von Triognometrie um Leute, macht euch keine Gedanken über das Farbschema, denn ich verwende eine Es ist dasselbe, nur eine andere Farbe. Wenden wir uns nun hier unserem Drehwinkel zu. Dieser 03 ist strahlend, nicht in Grad. Radiant kann für manche Menschen verwirrend sein. Wir können lernen, sie zu verwenden, und uns daran gewöhnen , Dinge in Radiance zu berechnen Aber normalerweise ist es bequemer, mit Graden zu arbeiten , und es ist eigentlich sehr einfach, zwischen ihnen umzurechnen Nehmen wir an, wir möchten unser Quadrat um 45 Grad drehen , um die gleiche Strahlkraft zu erhalten Wir müssen es nur durch 180 teilen und es mit dem mathematischen Punkt Pi multiplizieren Diese Formel ist ziemlich praktisch, und wir wollen sie vielleicht wieder. Wir können sie in eine Funktion umwandeln, sodass wir nicht mehrmals dasselbe schreiben müssen. Ich nenne es Dog to Read. Es wird als Parameter ein Winkel in Grad verwendet. Und dann gib einen Grad zurück, geteilt durch 180 und multipliziert mit Pi Jetzt können wir einfach den Winkel in Grad verwenden. Damit können wir unsere Skizze etwas interessanter gestalten. Lassen Sie uns zunächst unsere Form verkleinern, wie ein sehr schmales Rechteck. Und ich möchte diese Form um den Kreis herum verteilen, wie die Stunden auf einer Uhr. Wir benötigen eine Variable für die Anzahl der Kopien der Form. Ich nenne es Num und setze es auf 12. Dann brauchen wir eine Vierschleife, die 12 mal läuft , und geben unseren Zeichencode hinein. Jetzt müssen wir den Drehwinkel basierend auf dem Index der Schleife ändern . Wenn wir uns eine Pizza vorstellen und sie in 12 Scheiben schneiden, welchen Winkel haben die einzelnen Scheiben? Die Pizza ist ein Kreis, also 360 Grad geteilt durch die Anzahl der Scheiben. Mit ein bisschen Mathematik können wir sagen , dass es 30 Grad sein werden. Aber denken Sie daran, wir wollen diese Zutaten, also müssen wir unsere Funktion verwenden, um sie umzuwandeln. Dies ist die Größe der Scheibe, und für den tatsächlichen Winkel benötigen wir eine weitere Variable. Kostenwinkel wird geteilt durch I. Das ist Null und dann 30 Grad und dann 60 Grad und so weiter Und dann müssen wir das in unserem Kontext verwenden, Punkt drehen. Und wir bekommen eine kleine Sternform. Um diesen Strich wie eine Uhr um den Kreis herum zu platzieren, brauchen wir ein bisschen Trigonometrie Trigonometrie geht es um die Beziehung zwischen den Seiten und den Winkeln der Es würde den Rahmen dieser Liste sprengen, Trigonometrie dieser Liste Aber wir können unser Gedächtnis schnell auffrischen . Hier ist eine Animation als Hilfe. Hier sehen wir, dass der Winkel mit der Zeit zunimmt und der Kosinus des Winkels in einem festen Intervall auf und ab geht in einem festen Intervall auf und ab geht Das Gleiche gilt für den Sinus der Winkel, und wir können sehen, dass es einen Offset zwischen Sinus und Kosinus gibt, beide Zuallererst benötigen wir also eine neue Variable für den Radius unseres Kreises , der mal 0,3 sein wird Und da wir dann für jede Form ein anderes X und Y haben werden, können wir unser vorhandenes X und Y in C X umbenennen und C Y zum Mittelpunkt unseres Kreises machen für jede Form ein anderes X und Y haben werden, können wir unser vorhandenes X und Y in C X umbenennen . Und dann deklarieren wir X und Y erneut, diesmal mit dem Let, weil wir ihren Wert innerhalb der Schleife ändern werden , und dort verwenden wir den Sinus und den Kosinus Wir werden X auf den Mittelpunkt des Kreises setzen. Wir werden X plus den Radius des Kreises multipliziert mit dem Sinus des Winkels sehen Kreises multipliziert mit dem Sinus des Winkels Also mathematischer Punkt, Sinus und in Klammern Winkel. Dann ein ähnlicher Ausdruck für Y mit C Y plus Radius multipliziert mit dem Kosinus des Winkels Das ist fast das, was wir wollen. Wir brauchen nur, dass sich der Hub andersherum dreht. Also müssen wir den Kontext auf den Minuswinkel drehen. Und hier ist unsere Uhr. Und wir könnten die Anzahl der Scheiben beliebig ändern . Ich behalte es vorerst bei 12. Eine Sache, die Ihnen vielleicht aufgefallen ist, ist, dass wir CX und C, Y zu X und Y hinzufügen. Wir könnten das auch in zwei Übersetzungsaufträge aufteilen In diesem Fall ändert sich das Endergebnis nicht. Ich zeige es dir nur als Alternative. Sie können also sehen, dass hier ein bisschen Flexibilität besteht. 10. Mehr über Utility-Funktionen erfahren: Einige Funktionen, die wir für diese Skizze verwenden , könnten auch für andere Skizzen nützlich sein Zum Beispiel möchten wir die Funktion vielleicht wieder verwenden, um Grad in Radianz umzurechnen In dieser Hörprobe werde ich Ihnen zeigen, wie Sie eine Bibliothek mit Hilfsfunktionen blockieren und verwenden können Um unsere Skizze interessanter zu gestalten, können wir auch mit der letzten Art der Kontexttransformation spielen , und das ist eine Skala. Die Skalierung benötigt zwei Parameter, X und Y, und der Standardwert ist eins. Wenn Sie also nichts ändern möchten, geben Sie einfach eines weiter. Wir könnten die Skala X oder die Skala Y ändern. Oder wir könnten wieder einen zufälligen Wert verwenden Hier mit einem zufälligen Wert sind manchmal einige Striche viel zu dünn Und das liegt daran, dass der Zufall bei Null anfängt, also 0-3 Es wäre schön, wenn sie von, sagen wir, eins auf drei gehen oder wenn wir einen Zufallsbereich überschreiten könnten Sagen wir einen Mindest- und einen Höchstwert. Um das 1—3 zu erreichen, müssten wir den Zufallswert mit drei minus eins multiplizieren und dann eins addieren. Auch dies ist eine weitere praktische Formel , die wir vielleicht noch einmal verwenden möchten, und wir könnten eine Funktion vier erstellen. Ich nenne es Random Ranch, und es benötigt zwei Parameter, minus und MX, und gibt dann einen mathematischen Punkt nach dem Zufallsprinzip zurück, max minus min plus meinen. Und dann können wir diesen Ausdruck durch Random Branch eins und drei ersetzen , was viel intuitiver und einfacher zu lesen ist. Bevor wir mit unserem Sketch weitermachen, möchte ich erwähnen, dass praktische Funktionen wie diese nicht nur für diesen Sketch praktisch sind. Es ist eigentlich ziemlich üblich, auf Szenarien zu stoßen , in denen wir solche Dinge gemacht haben Eine Sache, die wir tun könnten, wäre, eine Minimalbibliothek mit solchen Hilfsfunktionen zu erstellen und sie skizzenübergreifend zu verwenden, aber wir sind nicht die ersten, die diese Idee haben , und Bibliotheken wie diese existieren bereits Tatsächlich hat die Bibliothek, die wir verwenden, Canvas a Sketch eine Schwesterbibliothek namens Canvas Sketch Ut und sie enthält eine Sammlung dieser nützlichen Funktion. Schauen wir uns eine zufällige Datei an. Dies ist ein Wrapper, der eine Reihe von zufälligen Hilfsfunktionen enthält , darunter eine namens Ranch, die genau das Gleiche tut wie die Zufallsverzweigungsfunktion, die wir gerade erstellt Wenn Sie zur vorherigen Seite zurückkehren und auf Math klicken, werden wir natürlich auch Decor Red und andere finden, die sich später als nützlich erweisen könnten Anstatt also unsere eigenen Funktionen zu schreiben, können wir sie aus Canvas Sketch UTO importieren. Zuerst müssen wir es installieren. Gehen wir also zurück zu unserem Terminal und drücken Control C oder Command C , um den aktuellen Prozess zu beenden Und dann geben Sie NPM stall Canvas sketch UTL Sobald das fertig ist, können wir den Pfeil nach oben drücken, um zu unserem vorherigen Befehl zurückzukehren , und wir können die Bindestriche u und d Dash open entfernen die Bindestriche u und d , weil wir diese Skizze bereits verlassen und sie bereits in unserem Browser geöffnet ist Also wollen wir es einfach noch einmal ausführen. Jetzt zurück zum Code und oben in der Datei wollen wir sowohl mathematische als auch zufällige Daten importieren. C-Mathematik entspricht also Canvas-Sketch-Uth-Mathematik und dasselbe gilt für Random. Kosten: Zufälliger Schrägstrich. Und dann können wir unser Deck Rot durch Mathedeck auf Rot und unseren zufälligen Zweig durch Random Dot Ranch ersetzen Mathedeck auf Rot und unseren zufälligen Zweig durch Random Dot Ranch An unserer Leistung sollte sich nichts ändern. Und wir können sogar die Funktionen löschen, die wir zuvor erstellt haben, oder sie einfach dort belassen , falls Sie später darauf verweisen möchten. Also da hast du's. Jetzt haben wir eine Bibliothek mit Hilfsfunktionen, die wir für zukünftige Skizzen verwenden können In der nächsten Hörprobe werden wir dazu übergehen, Bögen und zufällige Vs zu verwenden, um mehr Grafiken zu erstellen Ein 11. Erlerne das Erstellen von Bögen: Vervollständige das Aussehen unserer Skizze. Wir werden noch ein paar Formen hinzufügen , um es interessanter zu machen. Wir werden wieder die Bogenfunktion verwenden , die wir zuvor gesehen haben. Diesmal nicht, um einen vollen Kreis zu zeichnen, sondern um einen tatsächlichen Bogen zu zeichnen. Lass uns einen Blick darauf werfen. Wir werden weitere Transformationen benötigen, die sich von denen unterscheiden, die wir hier verwenden. Wir benötigen also einen weiteren Block von Context Dot Save und Context Restore. Hier wollen wir in den Mittelpunkt des Kreises übersetzen . Also siehe X und siehe Y. Und auch um einen Minuswinkel gedreht Und dann fangen wir an, eine neue Form zu zeichnen. Kontextpunkt beginnt mit dem Pfad. Kontextpunkt. Kontext-Punktstrich für die Bogen X und Y, wir können bei Null oder Null beginnen, aber für den Radius können wir unsere Radiusvariable verwenden. Der Startwinkel kann Null sein und der Endwinkel kann Slice sein. Ich sagte, wir haben keinen vollen Kreis gezogen, aber am Ende hatten wir einen. Der Unterschied besteht darin, dass wir dieses Mal Stück für Stück gezeichnet werden. Wir können sehen, dass, wenn wir die Scheibe etwas kleiner machen, sagen wir, wir den Endwinkel zum Beispiel mit 0,6 multiplizieren . Wir können den Bogen auch am Strich ausrichten, indem einen negativen Startwinkel und einen positiven Endwinkel verwenden. Verwenden wir -0,3 und positive 0,3. Kann die Bögen auch etwas dicker machen , indem ich die Kontextlinie mit ändere, ich werde sie auf 20 setzen Jetzt, wo das erledigt ist, geht es nur noch darum, die Werte zu optimieren, um eine interessante visuelle Ausgabe zu erhalten Ich möchte zuerst mit der Skala der Striche spielen. Wir können den Bereich der Skala X auf 0,1 und zwei ändern. Und auch mit der Skala Y herumspielen und den Bereich auf 0,2 und 0,5 einstellen. Variieren Sie auch die Dicke der Bögen, also stellen Sie die Linie damit auf einen Bereich von 5 bis 20 Ich möchte den Strich auch etwas versetzen , damit sie nicht so gut ausgerichtet sind Da der Kontext bereits gedreht ist, kann ich das tun, indem ich die Y-Position des Rechtecks ändere. Anstatt also nur minus die Hälfte der Höhe zu nehmen, könnten wir sagen, zufälliger Punktschlüssel, von Null auf minus die Hälfte der Höhe Die gleiche Idee würde auch für die Bögen funktionieren, aber wir müssen nur den Bereich für die Radiusvariable festlegen Zufälliger Punktschlüssel von etwas, das kleiner als der ursprüngliche Radius ist, wie 0,7, zu etwas, das größer als der ursprüngliche Radius ist, wie 1,3 Oder wir können das etwas kürzer schreiben , mit Radiuszeiten, einem zufälligen Bereich von 0,7 bis 1,3, was wahrscheinlich einfacher zu lesen ist Wir können etwas Ähnliches tun und auch etwas Zufälligkeit für den Start- und Endwinkel hinzufügen etwas Zufälligkeit für den Start- und Endwinkel Schneide mal nach dem Zufallsprinzip, Punktbereich Null und -0,5. Und dann schneiden Sie die zufälligen Zweige Null und 0,5 in Scheiben. Ich denke, wir können diesen Effekt viel übertriebener gestalten. Wir können größere Zahlen verwenden. Lassen Sie uns also statt 0,5 einfach fünf verwenden. Und anstatt bei Null zu beginnen, können wir immer mindestens ein Stück zeichnen. Oder es noch weiter verbittern oder die eine Seite größer machen als die andere, also minus acht für den Startwinkel. Und dann könnten wir wiederum die Anzahl der Scheiben erhöhen , um das Ganze etwas komplexer zu machen. Und da haben wir es. Das ist unsere Skizze. Ich finde, es sah gut aus. Ich hoffe, du stimmst zu. Wir können die Seite natürlich aktualisieren, um einige Variationen zu sehen, und wir können die Ausgabe auch als Bild speichern, genau wie wir es mit der Skizze gemacht haben. Zuerst müssen wir zu unserem Terminal zurückkehren, Strg C, Befehl C, Pfeil nach oben drücken und den Ausgang, Ausgang 02, öffnen. Und jetzt zurück zum Browser, drücken Sie Control S oder Command , um einige Variationen zu speichern. Offensichtlich sind die Zahlen, die ich hier verwendet habe, keine endgültigen Zahlen. Ich habe nur mit den Werten experimentiert. Ich würde Sie ermutigen, mit den Zahlen zu spielen, verschiedene Werte auszuprobieren, vielleicht sogar Reihen in verschiedenen Formen auszuprobieren. Und in der nächsten Lektion werden wir mit einer neuen Skizze beginnen. 12. Mehr über Objekte und Klassen erfahren: Sie erinnern sich vielleicht aus früheren Lektionen, ich das Wort Objekt nur in wenigen Typen verwendet habe. Es ist an der Zeit, dass wir es uns genauer ansehen. Zuerst müssen wir eine neue Skizze erstellen, zum Terminal gehen und Canvas sketch, sketch 03 dot gs und dann new eingeben . Öffnen Sie dann Sketch 0.3 im Editor und ändern Sie dann die Dimension auf 1080 mal 1080. Lassen Sie uns jetzt über Objekte sprechen. Wir haben uns Objekte noch nicht im Detail angesehen, aber wir haben sie die ganze Zeit benutzt. Der Kontext ist ein gutes Beispiel für ein Objekt. Es hat Eigenschaften wie Context-Punktfeldstil und Methoden wie Context Dot Feel Rect. Ein weiteres Beispiel für ein Objekt, das viel einfacher ist als Context, ist unsere Einrichtung hier. Es ist ein Objekt mit einer einzigen Eigenschaft namens Dimensionen. Wir können es als Objekt erkennen, weil es mit den geschweiften Klammern beginnt und endet Und darin finden wir ein Paar aus Schlüssel und Wert. Denken Sie daran, dass bei Arrays mit eckigen Klammern die Werte durch Kommas getrennt sind Ihre Objekte sind ähnlich. Wenn wir immer einen Eigennamen oder einen Schlüssel haben, dann Colin and a Vallow, lass uns hier ein Beispiel schreiben konstante Punkt entspricht dem Aufruf der Klammern, X 800 Dies ist ein einfaches Objekt mit den beiden Eigenschaften X und Y. Wenn Sie es als kleinen Punkt auf dem Bildschirm zeichnen würden, könnten wir den Punkt Punkt beginnen Pfad, dann den Kontextpunkt Bogen, Punkt X, Punkt Y, Radius zehn, Null MPI Setzen Sie dann den Feldstil auf Schwarz und nennen Sie ihn Fill. Da wir es sind, die dieses Objekt verlassen, müssen wir hier nicht aufhören. Wir können ihm so viele Eigenschaften geben, wie wir wollen. Warum geben wir ihm nicht auch eine Radius-Eigenschaft? Jetzt wird das ein nützliches kleines Objekt. Wenn wir mehr Punkte auf dem Bildschirm zeichnen wollten, könnten wir mehr Kopien davon verwenden, und das bringt uns zu einem anderen Programmierkonzept, den Klassen. Klassen sind Rezepte für die Erstellung von Objekten. Wann immer wir mehrere Instanzen eines Objekts mit denselben Eigenschaften benötigen , können wir Klassen verwenden, um sie zu erstellen. Selbst wenn wir nicht mehrere Instanzen benötigen, sind Klassen dennoch nützlich, um den Code in verschiedene Entitäten zu organisieren . Schreiben wir eine Klasse für unser kleines Punktobjekt. Wir können zum Ende unserer Fill- und Type-Klasse gehen. Zeigen Sie mit der Maus auf und schließen Sie die geschweiften Klammern. Der Klassenname sollte üblicherweise mit einem Großbuchstaben beginnen Eine sehr wichtige Methode einer Klasse ist nun der Konstruktor Das wird mit einem neuen Objekt erstellt , wenn wir es erstellen Und wir können Parameter an den Konstruktor übergeben. In unserem Fall vier Punkte, wir wollen X und Y und Radius Jetzt müssen wir die Eigenschaften X, Y und Radius definieren. Und dafür brauchen wir ein anderes spezielles Wort namens dieses. Das Wort bedeutet, dass wir uns auf den Umfang dieser Klasse beziehen. Wie immer macht es mehr Sinn, ein Beispiel zu verwenden. Lassen Sie mich hier etwas eingeben. Dieser Punkt X entspricht X. Hier sagen wir, dass der Klassenpunkt eine Eigenschaft namens X enthält, und wir setzen ihren Wert auf einen Parameter, den wir an den Konstruktor übergeben werden an den Konstruktor übergeben Dieser Punkt X ist nur ein Wert, er könnte Null sein. Es könnte eine Pizza sein, aber wir setzen sie auf den X-Parameter , den wir übergeben. Falls das noch nicht klar ist, wird es in einer Minute Sinn machen, wenn wir ein Objekt mit unserem Klassenpunkt erstellen. Machen Sie vorerst einfach dasselbe für die anderen beiden Eigenschaften, die wir übergeben. Lassen Sie uns nun einen neuen Punkt erstellen. Stattdessen geben wir einen neuen Wert von 0,800, 410 ein. Die Werte sind dieselben und die Ergebnisse sind dieselben Aber dieses Mal haben wir mit einer Klasse einen Punkt erstellt. Jetzt sind wir bereit, mehr Punkte zu erstellen. Lassen Sie uns das in Punkt A umbenennen und dann einen Punkt B mit X 300 und Y 700 erstellen. Und dann duplizieren Sie diese Linien und zeichnen Sie auch Punkt B. Ich hoffe, es ist jetzt mit diesem Beispiel klar. Wir erstellen zwei Objekte , die Extensoren der Punktklasse sind und beide dieselbe Eigenschaft und dieselbe Struktur haben dieselbe Eigenschaft und dieselbe Struktur In diesem Sinne können wir mit der Erstellung unserer Skizze beginnen. Zuerst möchte ich ein paar Dinge ändern. Ich möchte den Punkt von dem Punkt trennen dem wir in die Leinwand gezeichnet sind. Ich denke, dieser Punkt könnte eine weitere Entität mit mehr als nur einer Position und einem Radius sein. Also werde ich eine weitere Klasse dafür erstellen und sie Agent nennen. Seine erste Eigenschaft ist eine Position oder einfach eine Pause, und Pose kann ein neuer Punkt sein. Ich denke, der Punkt sollte nur X bei Y haben. Dort braucht er keinen Radius Wir könnten den Radius zum Agenten bringen und den Punkt nur als Positionsdaten belassen und Agenten dann für alles verwenden , was wir zeichnen möchten können dem Radius bereits einen Wert von zehn geben und für die Positionen X und Y können wir sie in Parametern übergeben Jetzt können wir unsere Punkte umbenennen und sie Agent A und Agent B nennen und den dritten Perimeter entfernen, weil wir den Radius nicht mehr übergeben müssen Dann können wir für Drown diesen Code in unsere Klasse bringen. Lassen Sie uns das kopieren und eine neue Methode in unserer Agentenklasse namens draw erstellen Wir können es hier einfügen und dann X zu diesem Punkt Punkt X und dann Draht zu diesem Punkt Punkt Y und Radius zu diesem Punktradius verdrahten. Wir müssen auch Verweise auf den Kontext als Parameter übergeben. Um dann die Agenten zu zeichnen, können wir löschen, was wir vorher hatten, und dann Agen A Dot Draw und Agen B Dot Draw nennen . Bisher hat sich die Grafik nicht geändert, aber wir richten unseren Code ein, dass wir noch viel mehr tun können Lassen Sie uns mehr Kopien dieser Agenten zeichnen. Wir können ein leeres Array namens Agents erstellen. Erstellen Sie dann eine Schleife, um das Array mit, sagen wir, 40 Agenten zu füllen das Array mit, sagen wir, 40 Agenten Agenten, die die neuen Agenten X und Y pushen. Wir müssen X und Y erstellen, also konstant X und CY, und ich möchte, dass es sich um Zufallswerte handelt Also brauchen wir wieder unsere Funktion für zufällige Verzweigungen. Lassen Sie uns es aus der Canvas-Skizze importieren. Du auch. Dann ist X ein zufälliger Wert zwischen Null und Breite und Y zwischen Null und Höhe. Und jetzt, um den Agenten zu zeichnen, brauchen wir nur noch ein paar Linien. Wir können jedes Element in unserem Array mit dem Agentenpunkt für H durchgehen unserem Array mit dem Agentenpunkt . Der erste Parameter ist der Agent selbst. Und wir können es Alting Dot Row nennen und es mit Kontext übergeben. Wir sehen noch nichts, also muss irgendwo ein Fehler vorliegen. Schauen wir uns die Konsole an. Strg Shift I oder Command Shift I. Hier liegt ein Fehler vor, der besagt, dass Gras nicht definiert ist, und dass es auch in Zeile 12 passiert. Und das liegt daran, dass Wt nur hier definiert ist. Wir haben die Variable wit außerhalb dieser Funktion noch nicht , aber das ist eine weitere nette Sache an Compressed Sketch. Diese anfänglichen Eigenschaften sind auch in der Sketch-Funktion verfügbar. Wir können diesen Parameter also einfach kopieren und hier einfügen. Und jetzt sehen wir alle unsere 40 Agenten. Jetzt haben wir also unsere 40 Agenten auf dem Bildschirm. In der nächsten Lektion werde ich Ihnen zeigen, wie man sie animiert. 13. Eine Animation erstellen: In dieser Liste werden wir unsere Agenten weiterentwickeln und beginnen, sie rund um den Bildschirm zu animieren Bevor wir unseren Agenten ein wenig Verhalten geben, schlagen Sie einige Dinge vor Zuerst möchte ich ihnen einen variablen Radius geben, einen zufälligen Wert von 4—12 Und dann möchte ich hier, anstatt den Bogen in Pause X und Pause Y zu zeichnen, den Bogen in Pause X und Pause Y zu zeichnen, das verwenden, was wir in der vorherigen Lektion gelernt haben , und stattdessen den Kontext übersetzen Also den Kontextpunkt speichern, Kontextpunkt übersetzen, X pausieren und Y anhalten. Und das dann auf 00 ändern Und vergiss nicht, am Ende Context Dot Restore aufzurufen. Ich denke auch, dass die Agenten mit einem schwarzen und einem weißen Strich besser aussehen würden mit einem schwarzen und einem weißen Strich besser So können wir den Füllstil Schwarz entfernen und den Weißwert beibehalten, den wir hier eingerichtet haben Die Standardkontur ist bereits schwarz, also müssen wir nur fill und dann stroke aufrufen. Die letzte Sache hier ist, den Strich mit der Kontext-Punktlinie etwas dicker zu machen und ihn auf vier zu setzen. Jetzt wollen wir unsere Agenten dazu bringen, sich zu bewegen. Wir können ihnen eine neue Eigenschaft namens Geschwindigkeit oder VL geben. Diese Eigenschaft benötigt auch einen X- und Y-Wert, sodass es sich um einen anderen Punkt handeln kann. In diesem Fall wird das Wort Punkt nicht mehr verwendet. Es ist in Ordnung, Position als Punkt zu bezeichnen. Aber zu sagen, dass die Geschwindigkeit ein Punkt ist, ist ein bisschen seltsam. Wir müssen uns einen anderen Namen für unsere Klasse überlegen. Ich denke, ein guter Name dafür wäre Vector. Das ist ein bisschen Refactoring. Wir müssen den Namen an einigen Stellen ändern, und das ist in der Programmierung durchaus üblich Es ist kein Problem, Ihren Code im Laufe der Zeit neu zu bewerten und Dinge zu ändern, die Sie zuvor geschrieben haben Jetzt können wir unserer Geschwindigkeit zufällige X- und Y-Werte geben. Beide können von minus eins nach eins angeordnet werden. Und dann die Geschwindigkeit zu verwenden, ist ganz einfach. Wir müssen nur die Geschwindigkeit zur Position hinzufügen, und das können wir mit einer neuen Methode namens Update tun. Dieser Punkt Post x plus entspricht diesem Punkt L Punkt X. Und dann wieder dasselbe für Y. Jetzt in unserem Loop kurz vor Agent Draw rufen wir Agent Dot Update Nun, aber nichts ändert sich. Das liegt daran, dass wir in unserer Skizze nur eine Primzahl gezeichnet haben. Wenn Sie animieren möchten, müssen wir das in der Einstellung Animate True angeben Jetzt wird diese Funktion jedes Mal kalt, wenn der Browser bereit ist, den Bildschirm neu zu streichen Wir sollten mit 60 Bildern pro Sekunde passieren. Diese animierte Eigenschaft ist sehr praktisch, wie viele andere Dinge in Canvas Sketch Aber ich möchte dir auch zeigen, wie man so etwas ohne Canvas-Sketch bekommt Ich werde es als kurzes Beispiel schreiben und wir können es danach sogar löschen. Du musst nur wissen , dass es existiert. Lassen Sie uns eine Dummy-Funktion erstellen und sie auch Animate nennen. Darin werden wir nur etwas auf der Konsole protokollieren Sag visuell. Und dann müssen wir eine Browserfensterfunktion namens Request Animation Frame aufrufen , die der Browser immer dann auslöst wenn er bereit ist, einen weiteren Frame zu malen. Als Parameter übergeben wir die Funktion, die wir aufrufen möchten, über einen Frame In diesem Fall wird es unsere Funktion animate sein. Dann müssen wir Animate nur einmal aufrufen und sehen, was passiert Wir sehen, dass das Nachrichtenbild mehrmals protokolliert wird. Hier macht Animate also etwas und fordert dann den nächsten Frame an , der dann Animate erneut auslöst Und das erzeugt eine animierte Schleife. Intern macht Canvas Sketch genau das, wenn wir Animate durchlaufen Und die Funktion, die es verursacht, ist diese hier. Wir können das jetzt löschen und zu unseren Agenten zurückkehren. Oder wenn Sie es als Referenz hier belassen möchten, kommentieren Sie es einfach aus dem Call to Animate Sie haben vielleicht bemerkt , dass unsere Agenten dazu neigen, vom Bildschirm zu verschwinden, wenn wir den Sketch eine Weile laufen lassen Das liegt daran, dass sie nichts über die Grenzen unserer Leinwand wissen . Wir könnten ihnen sagen, dass sie sich erholen sollen, wenn sie die Grenzen erreichen Lassen Sie uns also eine neue Methode für unseren Agenten namens Bounce erstellen. Und wir müssen mit Wind und Höhe reingehen. Dann schreiben wir eine Bedingung, wenn dieser Posenpunkt X kleiner oder gleich Null ist, oder wenn diese beiden senkrechten Schrägstriche logisch oder so bedeuten, oder ob dieser Punkt in der Pose X größer oder gleich wid ist Was wir tun wollen, ist die Geschwindigkeit umzukehren. Höllenpunkt ist also x mal minus eins und dann genau das Gleiche für Y und Höhe In unserer Schleife kurz nach Update und Brow rufen wir Agent Toot Bounce Jetzt können wir sehen, dass sie sowieso nicht mehr laufen und in unserem Sketch bleiben . Okay, jetzt haben wir Umzugsagenten. Als Nächstes werden wir sie mit Leitungen verbinden. 14. Agenten mit Linien verbinden: Oh, in dieser Liste werden wir unsere Agenten mit den Leitungen verbinden, und um das zu tun, brauchen wir ein bisschen mehr davon Wir werden eine vertraute Formel überdenken , um die Entfernung zwischen ihnen zu ermitteln Der PythagoreTom. Wir werden Nistd für Loop brauchen . Sie erinnern sich vielleicht, dass ich in unserer ersten Skizze einen geschrieben habe. Es bedeutet eins für eine Schleife in einem anderen. Denn I ist gleich Null, ich kleiner als Agent Punkt Link, und dann wollen wir innerhalb der ersten Schleife den Agenten als Variable speichern. Agent entspricht Agenten, eckige Klammern I. Dann die zweite Schleife mit G als Index. Und wir wollen den Agenten hier auch als Variable speichern . Wir werden es nennen, dass ein anderer gleich zwei Agenten ist, G. Also gehen wir für jeden Agenten jeden anderen Agenten Um nun die Grenze zu ziehen, müssen wir zwei Methoden anwenden Verschiebe zwei und Zeile zwei. Zuerst beginnen wir mit einem neuen Pfad, dem Kontaktstartpfad. Dann bewegen wir unseren Stift an den Anfang der Zeile mit dem Kontextpunkt Move Two Und es wird ein alternder Punktpunkt und ein alternder Punkt Punkt Y sein . Dann brauchen wir die zweite Kontext-Punktlinie und übergeben das Ende der Linie, was ein Punkt Pos Punkt X sein wird. Noch eine Punkt-Pause oder Y. Und dann kontaktieren Sie Dot Stroke Im Moment haben wir 40 Agenten. Das bedeutet also 40 mal 40, was 1.600 Iterationen in jedem Frame entspricht. Das ist in Ordnung Der Computer kann das, aber es ist ein bisschen verschwenderisch, weil wir jedes Agentenpaar sorgfältig überprüfen. Wenn ich zum Beispiel eine Null ist, gehen wir über G Null, eins, zwei, drei usw. Wenn ich eins ist, gehen wir wieder über Null, eins, zwei, drei, also rücksichtsvoll weiter Nur das Paar 01. Wir werden zu einer Linie übereinander gezogen, eins 0-1 und ein anderes 1-0 Und wir vergleichen auch Null gegen Null und Eins gegen Eins, was unnötig ist Das können wir mit jeder einfachen Änderung verbessern. Für ein G, anstatt bei Null zu beginnen, könnte es bei I plus eins beginnen. Also jetzt, wo ich Null ist, wird G eins sein. Bis wir 38 haben, wird G 39 sein, und diese zweite Schleife wird nur einmal ausgeführt, weil jedes andere Agentenpaar zu jedes andere Agentenpaar Zeitpunkt bereits überprüft worden wäre. Mit dieser einfachen Änderung ist die Anzahl der Iterationen auf Ihrem Frame von 1.600 auf 780 gesunken Das ist eine gute Leistungsverbesserung . Jetzt ist es an der Zeit, die Grafik zu verbessern. Das ist ein bisschen zu intensiv für meinen Geschmack. Ich möchte die Grenze zwischen den Agenten ziehen, die sich nahe beieinander befinden, nicht zwischen allen. Dafür brauchen wir ein bisschen Mathe. Satz des Pythagoras, der Name ist kompliziert, aber seine Formel ist so einfach aber Nehmen wir an, wir haben zwei Punkte auf der D-Ebene Zuerst ermitteln wir den Abstand zwischen ihnen auf der X-Achse Nennen wir es DX. Dann finden wir den Abstand auf der Y-Achse und nennen ihn DY. Das gibt uns ein rechtwinkliges Dreieck. Und was wir finden wollen, ist der Potenus. Ptagoren sagen uns , dass dies die Quadratwurzel einiger Quadrate der Seiten sein wird die Quadratwurzel einiger Quadrate der Seiten Lassen Sie uns das in unserer Skizze verwenden. Wir können es als Methode unserer Vektorklasse hinzufügen. Nennen wir es get distance und wir übergeben einen anderen Vektor. Ich nenne es dx , das ist X minus V Punkt x dy wird dieser Punkt Y minus V Punkt Y sein. Die tatsächliche Entfernung, die wir zurückgeben wollen, ist MT Punkt Quadratwurzel, dx mal dx plus dy mal dy Jetzt, zurück in unserer verschachtelten Schleife, können wir eine neue variable kalte Disc beenden den Abstand zwischen der Position eines alternden Punktes und einer anderen Punktposition und einer anderen Punktposition Jetzt, wo wir die Entfernung haben, können wir sagen, dass wir die Linie nur ziehen wollen , wenn der Abstand kleiner als einige Zahlen ist Sagen wir 200, oder wir können das Gegenteil tun und sagen, wenn dist größer als 200 ist, dann kümmern wir uns nicht um den Rest des Codes innerhalb der Schleife. Fahren Sie einfach fort. Die Continue-Anweisungen sagen, gehe zur nächsten Iteration der Schleife Also alles nach Continue wird ignoriert. Das sieht schon viel besser aus, aber es gibt noch eine weitere Sache , die ich damit machen möchte, und das ist, die Linie damit zu ändern, sie auf der Entfernung auszurichten. Ich möchte, dass die Linien dick sind, wenn Agenten geschlossen sind, und dass sie immer dünner werden je weiter sie auseinanderdriften. Dafür können wir eine weitere praktische Utils-Funktion namens Mapren verwenden namens Mapren Das setzt einen Eingangsschlüssel und einen Ausgangsschlüssel voraus ordnet den Wert zwischen den beiden Lassen Sie uns also noch einmal das Math-Modul aus der Canvas-Skizze in importieren Math-Modul aus der Canvas-Skizze Und dann können wir die Linie anhand der Entfernung festlegen . einem Bereich von 0 bis 200, wenn die Entfernung Null ist, möchten wir, dass die Linie 12 Wenn es 200 ist, wollen wir, dass es eins ist. Und da haben wir's. Ich habe dir bereits gezeigt, wie man Skizzen als Bild exportiert, aber dieses Mal bewegt sich unsere Skizze, also müssen wir sie als Video exportieren Und genau das werde ich dir in der nächsten Lektion beibringen 15. Mehr über Videoausgabe erfahren: Unsere Skizze ist fertig und wir könnten die Steuerung drücken, um ein paar Frames zu speichern. Aber da es sich bewegt, wäre es auch schön, es als Video zu exportieren. Schauen wir uns an, wie man das mit Canvas Sketch macht. Aus der Dokumentation geht hervor, dass wir Frame-Sequenzen exportieren oder FF-NPH-Streaming verwenden können, bei dem die bereits kodierten Sequenzen als MP Four-Datei ausgegeben werden. Das wollen wir tun. Also müssen wir zuerst sicherstellen, dass wir FF NPH haben und es beibehalten und wir können diese Zeile hier kopieren und in unser Terminal einfügen Drücken Sie erneut Strg C , um den aktuellen Vorgang zu beenden , und fügen Sie den Befehl hier ein. Global ist dasselbe wie G, das wir zuvor gesehen haben. Es installiert die Pakete global, nicht nur im aktuellen Ordner. Sobald der Vorgang abgeschlossen ist, drücken Sie die Pfeiltaste nach oben, verschieben Sie sowohl den neuen Ordner als auch den geöffneten Anschließend legen wir für unseren Ausgabeordner gestrichelte Ausgabe auf Ausgabe 03 fest. Und für das Streaming müssen wir einen Dash Stream hinzufügen. Jetzt läuft unser Sketch wieder und wir können Strg Shift S oder Command Shift S drücken Shift S oder Command . Damit wird der Export der Frames gestartet. Warten Sie dann einfach ein paar Sekunden und drücken Sie den gleichen Befehl erneut. Drücken Sie Shift S, um es zu stoppen. Schauen wir uns den Ausgabeordner an und da ist unsere nette Animation. Unsere Sketch-Sammlung wächst und wird immer interessanter. In der nächsten Lektion werden wir eine neue Skizze erstellen. 16. So erstellst du Raster: In dieser Liste werden wir ein Raster erstellen, aber auf eine andere Art als zuvor Flexibler und effizienter. Das Endergebnis wird so aussehen. Lass uns einen Blick darauf werfen. Zuerst müssen wir eine neue Skizze erstellen. Im Terminal geben wir Canvas Sketch ein. Fang 04 neu an. Teilen Sie dann den Bildschirm erneut auf. Ich hoffe auf Skizze 04 im Editor und ändere die Abmessung auf 1080 mal 1080. Wir können damit beginnen, einige Variablen zu deklarieren , um unsere Note zu beschreiben Wir wollen vier Spalten und drei Zeilen. Die Gesamtzahl der Zellen wird multipliziert mit Zeilen. Kann auch in einer Variablen mit der Breite des Rasters gespeichert werden, die 80% der Breite der Leinwand ausmachen wird. Und das Gleiche gilt für die Höhe des Rasters, ebenfalls 80% der Höhe der Leinwand Damit können wir auch die Breite und Höhe jeder Zelle des Rasters ermitteln Sell W entspricht der Breite des Gitters geteilt durch die Nummer einer Spalte Und Zelle H ist die Höhe des Gitters geteilt durch die Anzahl der Zeilen. Wir können auch rund um das Raster eine Emergenz feststellen, die den Unterschied zwischen der Größe des Rasters und der Größe der Leinwand darstellt. Marge entspricht also Wodith minus Gitter W. Und da es zwei Emergins auf einer linken und einer auf der rechten Seite gibt , wollen wir die Hälfte Das Gleiche gilt für Marg Y t minus Gitter dies erledigt ist, müssen wir nun jede Zelle des Rasters durchgehen , damit wir etwas mit ihnen anfangen können Und dafür brauchen wir die vier Schleifen. Anstatt wie zuvor zwei für Schleifen zu verwenden, eine pro Spalte und eine für Zeilen, werden wir nur eine verwenden und Spalte und Zeile mit einfacher Mathematik berechnen. I gleich Null ist kleiner als Zahl sllsi plus plus. Um die Spalte zu berechnen, benötigen wir den Restoperator Aufrufe sind gleich I, Restrufe. Dies gibt den Rest der Division von I nach Aufrufen zurück. Lassen Sie uns die Konsole verwenden , um ein paar Werte zu testen. Ich fange bei Null an und rufe vier an. Also 44 entspricht Null, vier entspricht Eins, dann zwei und Und wenn wir bei vier sind, ist der Rest jetzt wieder bei Null. Dann fünf zurück zu eins. Während also der Wert von I in Eins-Schritten steigt, wird der Wert von Core auf 0-3 moduliert Es wird also Null, eins, zwei, drei, 01, zwei, drei sein, was genau das ist, was wir brauchen, um die Rasterzellen auf der X-Achse zu finden Um nun die Zeile zu finden, ist die Logik etwas anders. Es könnte verlockend sein, etwas Ähnliches zu tun und den Rest-Operator erneut zu verwenden Diesmal mit der Anzahl der Zeilen, aber sie würden hier korken. Denn während ich zunimmt, bewegen wir uns von links nach rechts. Um also das Ende der Zeile zu finden, müssen wir die Nummern der Spalten überprüfen. Das können wir mit dem mathematischen Punktfluss machen. Ich teile es durch Spalten. Lassen Sie uns erneut die Konsole zum Testen verwenden. 0/4 ist Null, 1/4 ist 0,25, und wenn wir dann den Wert unterschreiten, das heißt, wenn wir ihn auf die nächste Ganzzahl abrunden, wird dieser zu die nächste Ganzzahl abrunden, wird dieser Zwei ergibt ebenfalls 03. Und dann kommen wir zu vier, es gibt uns eins und fünf ist auch eins. Das bedeutet, dass alle vier Schritte der Wert der Zeile um eins erhöht wird, was wir brauchen, um die Notenzellen auf der Y-Achse zu finden . Der nächste Schritt besteht darin, die X- und Y-Werte jeder Zelle anhand von Zeile und CO zu ermitteln. X wird mit Zelle multipliziert, W, und Y ist go multipliziert mit Zelle. Wir werden innerhalb jeder Zelle eine Linie zeichnen, und ich möchte, dass sie etwas kleiner als die Also werde ich eine andere Variable für Breite und Höhe erstellen andere Variable für Breite und Höhe W wird 80% von Zelle W und H 80% von Zelle sein, jetzt sind wir bereit zu zeichnen. Beginnen Sie mit dem Speichern des Kontextes und der Kontextwiederherstellung. Dann übersetzen wir den Kontext mit X und Y. Dann bewegen sich der Startpfad und der Kontextpunkt um zwei, und wir wollen minus die Hälfte der Linienbreite Und dann Kontextzeile zwei, Hälfte der Breite der Linie Und schließlich macht der Kontext einen Strich durch. Wir können jetzt etwas sehen, aber es sieht noch nicht richtig aus. Wir müssen unsere Verschmelzungen berücksichtigen , wenn wir die Kontexte übersetzen Wir könnten zu X und Y März X und Mar Y hinzufügen. Oder wir könnten eine weitere Kohle zur Übersetzung hinzufügen Das ist ein bisschen besser, aber immer noch nicht richtig. Die Sache ist, dass wir die Linien von der Mitte jeder Rasterzelle aus zeichnen , aber wir übersetzen nur den Ursprung nach oben links von jeder Zelle Also brauchen wir noch eine Übersetzung die Mitte der Zelle Kontext-Punkt übersetzen, Zelle W mal 0,5 und Zelle H mal 0,5. Das sieht jetzt richtig aus. Hier verwenden wir drei Aufrufe, um es zu übersetzen, damit ich Ihnen zeigen kann , was jeder Schritt bewirkt. Aber wenn Sie es vorziehen, können Sie diese Volumes auch direkt zu X und Y hinzufügen und Translate nur einmal aufrufen Das überlasse ich vorerst dir. Jetzt, wo wir unser Raster sehen können, ändern wir die Zeile damit auf vier und erhöhen die Anzahl der Zeilen und Spalten auf zehn Diesmal verwenden wir also die Smarter-Methode, um ein Raster zu erstellen, aber das ist nur ein flaches Raster In der nächsten Lektion werden wir etwas Zufälligkeit hinzufügen 17. Manipulieren von Formen mit Rauschen: Um unsere Skizze interessanter zu machen, werden wir ihr etwas Zufälligkeit hinzufügen Aber dieses Mal werden wir verschiedene Zufallszahlen verwenden, wir werden Rauschen verwenden Generate-Funktion ist ein unverzichtbares Werkzeug im Nutzbereich eines kreativen Codos Im Wesentlichen ermöglicht es uns, die Zufälligkeit zu kontrollieren. Der klassische Geräuschalgorithmus wurde 1983 von Ken Perlin begrüßt 1983 von Ken Perlin und ist als Perlin-Rauschen bekannt Ich werde einen Link zu einer Seite mit einer schönen Erklärung seiner Funktionsweise posten , wenn Sie mehr über den Algorithmus erfahren möchten mehr über den Algorithmus erfahren möchten Was wir in unserem Sketch verwenden werden, ist eine andere Variante namens Simplex-Noise und sie 2001 veröffentlichen Hier sehen wir eine visuelle Darstellung eines Geräusches, genauer gesagt eines Drei-D-Rauschens auf einer Zwei-D-Ebene Die Grauwerte sind Zahlen im Bereich von 0 bis 1, wobei Null für Schwarz und Eins für Weiß steht Wir können sehen, dass die Flaschen nicht immer völlig zufällig sind , wie im Fernsehen. Stattdessen scheinen sie gut ineinander zu fließen. In diesem Beispiel sehen wir Pa bei gleichem Rauschen unterschiedliche Zoomstufen . Sie bewegen sich alle mit derselben Geschwindigkeit, aber ihre Skalen sind unterschiedlich oder ihre Frequenzen unterscheiden sich von sehr körnig bis sehr glatt wir nun eine Vorstellung davon haben, was Geräusch ist, wollen wir es in unserer Skizze verwenden Wie Sie anhand dessen, was wir bisher gesehen haben, vielleicht vermutet haben, gibt es bereits eine Geräuschbibliothek wir in unseren Code integrieren können Und wieder einmal, Canvas Sketch macht uns das schon sehr praktisch Wenn wir zur zufälligen Seite auf Canvas Sketch zurückkehren, werden wir Ihnen sagen, ob Sie mithilfe von Simplex-Rauschen herausfinden können, ob Sie Rauschen verwenden Eindimensional, zweidimensional, drei und vier. Gehen wir also zurück zu unserem Code und fort, wie es der Zufall verlangt Leinwandskizze, du schneidest nach dem Zufallsprinzip. Dann können wir eine Zufallszahl generieren und sie N nennen gleich dem zufälligen Punktrauschen zwei D, und dann X und Y übergeben. Wir können N verwenden, um den Drehwinkel der Linien in unserem Gitter festzulegen Drehwinkel der Linien in unserem Wir benötigen also eine weitere Variable namens Winkel und setzen sie dann auf das N-fache des mathematischen Punktes PI Rauschen bis D, gib eine Zahl zwischen minus eins und eins zurück. Wenn wir es also mit dem mathematischen Punkt PI multiplizieren, erhalten wir das Äquivalent von negativem 180 Grad zu positiven 180 Grad. Um das in Aktion zu sehen, müssen wir unseren Kontext nur um einen Winkel drehen Rotationen sind etwas chaotisch, und das liegt daran, dass die Werte von X und Y zu groß sind Die Frequenz ist zu hoch. Wir könnten sowohl X als auch Y mit einer winzigen Zahl wie 0,001 multiplizieren mit einer winzigen Zahl wie 0,001 Der Einfachheit halber haben wir hier auch diesen dritten optionalen Parameter namens Frequenz, der genau das Gleiche bewirkt Dann sind die Dinge etwas weniger chaotisch, wir könnten auch die Amplitude auf eine kleine Zahl wie 0,2 ändern die Amplitude auf eine kleine Zahl wie 0,2 Aber das würde auch dazu führen, dass N im Bereich von -0,2 und 0,2 statt minus eins und eins liegt Ich möchte es bei minus eins zu eins oder nein belassen. Also werde ich den Winkel stattdessen mit 0,2 multiplizieren. Und damit sehen wir, dass die Linien anfangen, gut zu fließen. Wir könnten dasselbe Geräusch auch verwenden , um den Maßstab der Linien zu ändern. Lassen Sie uns eine neue Variable namens Scale erstellen. Auch hier wollen wir multiplizieren und zwar mit einer Zahl wie 30. Der Bereich liegt zwischen minus eins und eins, aber wir wollen keine negative Skala. Hier müssen wir es also einem Bereich von 0 bis 1 zuordnen. Es gibt ein paar verschiedene Möglichkeiten , das zu tun. Eine einfache Möglichkeit besteht darin, eins zu addieren und das durch zwei zu teilen. Hier würde der Bereich also zwischen 0 und 2 liegen. Und nach der Division durch zwei würde es 0-1 gehen. Wir können das schnell testen, indem wir die Linie damit maßstabsgetreu einstellen Eine andere Methode, die ziemlich identisch ist, besteht darin, N mit 0,5 zu multiplizieren und 0,5 zu addieren. Hier gibt es keinen Unterschied. Immer noch neu zuordnen und minus eins und eins auf Null und eins Die andere Art, das zu tun, ist natürlich die Utility-Funktion namens Kartenbereich, die wir in der vorherigen Lektion gesehen haben namens Kartenbereich, die wir in der vorherigen Lektion Importieren wir es hier aus Canvas SketchUtlash. Und dann ordnen Sie den Bereich basieren Sie auf N von minus eins und eins bis eins und Im Wesentlichen machen diese Formeln alle dasselbe. Kartenreichweite ist vielleicht etwas praktischer, und wir können damit auch einen Mindestmaßstab festlegen. Wir gehen jetzt von 1 bis 30, während wir vorher von 0 bis 30 gehen. Das Letzte, was ich hier tun möchte, ist, die Nullen zu animieren. Wir wissen bereits, wie man die Skizze animiert. Wir müssen nur animierte Elemente zu unserer Umgebung hinzufügen. Wenn wir uns dann die Dokumentation zur Canvas-Skizze ansehen, stellen wir fest, dass eine der Eigenschaften, die sie an die Renderfunktion übergibt die Renderfunktion übergibt Nummer des gerenderten Frames ist. Also müssen wir hier oben nur einen Frame deklarieren. Und dann können wir es in unserer Nuss-Funktion verwenden, T mit X plus Frame Nun, das bewegt sich, aber sehr langsam. Wir können es schneller machen, indem Frame mit einer größeren Zahl wie zum Beispiel zehn multiplizieren. Diese Skizze wird etwas komplexer. Jetzt gibt es eine Regel für mehr Variation, und darauf werden wir uns in der nächsten Lektion konzentrieren. 18. Erstelle GUI-Folien: Speichern Sie den besten Teil des Prozesses für das Ende. Wir werden ein Bedienfeld mit einigen Schiebereglern erstellen , um die Werte in unserer Skizze zu optimieren Die Bibliothek, die wir verwenden werden, heißt Tweak Pane und wurde von Hiroki Kaku Bon entwickelt Wir müssen zurück zum Terminal gehen, den Streich zurückholen und dann PM I Tweak Pane eingeben PMI ist die Kurzversion von PM und SAL, die wir bisher verwendet haben Beide Befehle sind exakt identisch. Sobald die Installation abgeschlossen ist, klicken Sie Pfeiltaste nach oben und führen Sie unseren Canvas-Sketch-Befehl erneut aus. Ohne D Dash neu und D Dash offen. Da wir schon hier sind, könnten wir genauso gut den Ausgang da öffnen Ausgängen 04 entspricht So können wir später einige PNGs exportieren. Jetzt müssen wir Tweak Pain vermitteln. Cost Tweak Pain entspricht erforderlichem Tweak Pain. Nach unserer Sketch-Funktion werden wir eine neue Funktion namens Quit Pain erstellen Hier können wir den Schmerz als Variable speichern und ihn auf den neuen TwickPain Punkt Pain setzen Klammern öffnen und schließen. Um dann zu überprüfen, ob alles gut funktioniert, müssen wir Quick Pain kurz vor der Leinwand eine Skizze aufrufen Wenn Sie den grauen Balken noch nicht sehen, überprüfen Sie die gesamte Syntax Ihres Codes und überprüfen Sie auch die Buchstaben. Jetzt sehen wir den grauen Balken von Garth hier oben, was bedeutet, dass die Farbe da ist, aber sie ist immer noch leer Jetzt können wir UI-Komponenten hinzufügen. Der erste wird ein Ordner sein , den wir auch als Variable speichern können. Dafür benötigen wir eine Methode von Pain namens Ed Folder. Wir können ein Objekt mit einigen Parametern übergeben, und eine der Optionen ist der Titel. Also Pine-Dot-Ordner und dann Titelraster jetzt in diesem Ordner, ich möchte ein paar Schieberegler hinzufügen Das können wir mit einer Methode machen, die bei der Eingabe aufgerufen wird. Und wie wir hier im Beispiel sehen können, müssen wir ein Objekt und den Namen der Eigenschaft des Objekts übergeben . Also müssen wir zuerst ein Objekt erstellen, um unsere Parameter zu speichern. Ich werde es hier oben erstellen. Außerhalb der Funktion zum Beenden des Fensters , sodass sie für unsere Sketch-Funktion sichtbar ist. Ich nenne es Perms, wie im Beispiel, aber in Kleinbuchstaben Es ist ein Objekt. Also geschweifte Klammern, und dann werden die ersten beiden Eigenschaften Aufrufe und Zeilen sein, beide mit einem Vallo von zehn Dann können wir zurück zu CretPN gehen und Ordner dot d input eingeben Params-Aufrufe und dann ein Objekt, das den Bereich bestimmt. Ich werde ein Minimum von zwei und ein Maximum von 50 und einen Schritt von eins festlegen und dann genau dasselbe für Zeilen Speichern Sie das und wir haben ein paar Schieberegler 2-50. Der letzte Schritt besteht darin, dass unsere Skizze diese Werte verwendet. Wir müssen nur unsere Aufrufe und Zeilen aktualisieren, variabel, um Perimeter-Punkt-Aufrufe und Parameter-Punktros zu verwenden und Parameter-Punktros Jetzt können wir unser Raster im Handumdrehen ändern. Und wenn wir das mit Spalten und Zeilen machen können, warum sollten wir hier aufhören und noch mehr Slider für Scale, Minimum und Scale Max hinzufügen Minimum und Scale Max Also zuerst der Parameter, setze den Standard auf eins und 30, so wie wir sie im Moment haben. Und dann Eingabe hinzufügen, Minimum skalieren und diesmal 1-100 Und wir müssen diesen Schritt nicht spezifizieren, weil Bruchteile mit der Skala in Ordnung sind Kopieren Sie das für das Skalenmaximum und ersetzen Sie den Wert in unserer MA Branch-Funktion. Wir können auch die Rauschwerte wie Frequenz und Amplitude manipulieren . Lass uns einen anderen Ordner dafür erstellen. Geben Sie Noise ein und fügen Sie dann Eingabe hinzu. Freak bedeutet -0,01, maximal 0,01. Duplizieren Sie die Linie für die Karte, maximal eins und mindestens Null Erstellen Sie die Eigenschaften innerhalb von Perimetern. Also der Standardwert für Frequenz 0,001 und Amplitude Und dann ersetze sie in der Renderfunktion. Schau, was sie tun. Es ist einfacher zu verstehen , wenn wir viele Reihen und Kegel haben. Das sieht interessant aus, aber es ist ziemlich klar , dass sich etwas von rechts nach links bewegt. Das liegt daran, dass wir den Wert von X in unserer Funktion Noise Two D erhöhen den Wert von X in unserer Funktion Noise Two D Wir könnten das durch eine Noise-Three-D-Funktion ersetzen und den Frame als dritte Dimension verwenden Lass uns das versuchen. Kommentieren Sie das Rauschen drei D aus und übergeben Sie als dritten Parameter Frame-Time Ten. Und jetzt haben wir einen Antrag, der etwas organischer ist, ohne dass die Richtung klar ist. Wir könnten auch die Frame-Nummer manuell festlegen , sodass wir die Animation auf einem bestimmten Frame positionieren können. Dafür benötigen wir zwei UI-Komponenten. Eine ist eine Tabelle, die animiert werden soll oder nicht, und die andere als Schieberegler zum Einstellen der Frame-Nummer Drittens, zuerst die Parameter, Animate auf True und Frame auf Null gesetzt Dann wird die Eingabe einfach animiert, ohne zusätzliche Optionen Twig Pain versteht bereits, dass dies ein wahrer oder falscher Parameter ist Und noch eine Eingabe für einen Frame mit einem Minimum von Null und einem Maximum von 999. Wo verwenden wir Frame? Hier oben zeige ich Ihnen, wie Sie einen bedingten Ausdruck in einer einzigen Zeile schreiben können. Lassen Sie uns eine Variable mit dem Namen F erstellen . Ich möchte, dass der Wert von F frame ist, wenn Parameter animate wahr ist, oder parameters dot frame ist, wenn animate falsch ist Das können wir in einer einzigen Zeile tun. Dieses F entspricht einer Perimeterpunktanimation. Fragezeichen-Rahmen, Collins, Dauerwellen-Punktrahmen. Das ist die Bedingung. Dies ist der Wert, wenn die Bedingung wahr ist, und dies ist der Wert s. Oder wenn die Bedingung falsch ist. Dieser Ausdruckstyp wird als ternärer Operator bezeichnet. Jetzt verwenden wir statt Frame F. Lassen Sie uns das versuchen Bisher hat sich nichts geändert. Wenn wir jedoch Animieren einschalten, verwenden die Noten zunächst den Wert eines Frames, der durch den Schieberegler festgelegt wurde Das Letzte, was ich Ihnen hier zeigen möchte , ist, dass wir, da wir Linien zeichnen, auch den Linienabstand ändern können Es gibt drei mögliche Werte: rund und quadratisch. Um diese in unserem Panel auszuwählen, benötigen wir einen anderen Komponententyp nämlich eine Liste von Zeichenketten Zuerst erstellen wir den Parameter, nennen ihn Line Gap und setzen ihn auf den Standardwert, der schlecht ist. Fügen Sie dann eine weitere Eingabe hinzu, und ich werde sie oben im Rasterordner hinzufügen. Und als dritten Parameter müssen wir die Option wie das Optimierungsfenster übergeben Beispiel, rund und quadratisch. Dann gleich nach der Zeile damit. Stellen Sie den Kontext ein Punkt, der Linienabstand entspricht dem Parameter „Punkt, Linienabstand“. Jetzt haben wir ein Drop-down-Menü, und wir können sehen, wie es mit einer runden Lücke oder mit einer quadratischen Lücke aussieht mit einer runden Lücke oder mit einer quadratischen Lücke Ich hoffe, Sie stimmen zu, dass es sehr praktisch ist , dieses Bedienfeld hier zu haben , anstatt Werte einzugeben und unsere Skizze zu aktualisieren. Wir können einfach mit diesem Slider und den Tests im Handumdrehen spielen Tests im Handumdrehen Sie könnten versuchen, weitere Komponenten für andere Werte hinzuzufügen , die wir verwenden, wie die Geschwindigkeit Ihrer Animation oder vielleicht die Länge der einzelnen Striche oder eine andere Tabelle, die zwischen verschiedenen Formen wechselt Sagen wir, wenn Sie Kreise statt Linien zeichnen möchten, könnten Sie Table verwenden, um zwischen ihnen zu wechseln Das müssen Sie erkunden. Mit einem solchen Bedienfeld erstellen Sie Ihr eigenes Werkzeug, um mehr Kontrolle über Ihre Skizze zu haben. Als zusätzliche Ressource finden Sie weitere Informationen dazu mit Schmerzen und einer weiteren Komponente. Fühlen Sie sich frei, mehr davon zu verwenden und die Skizze in jede gewünschte Richtung zu bringen. 19. Text erstellen lernen: In dieser Lektion werden wir eine solche Skizze erstellen, und dafür müssen wir etwas über Text lernen, wie man einen Text zeichnet, wie man ihn misst und wie man die Eigenschaften einer Schrift festlegt. Starten Sie eine neue Skizze, gehen Sie zum Terminal und geben Sie Canvases, Sketch, Sech 05 ein, Hälfte des Bildschirms für den Browser und die Hälfte für den Texteditor Abmessung 1080 mal 1080. Unser Ziel ist es, einen großen Buchstaben in die Mitte unserer Skizze zu zeichnen. Dafür benötigen wir eine neue Methode namens Feldtext, die wir noch nicht verwendet und auch ein paar Texteigenschaften wie diese, die die Kontext-Schriftart festlegt. Beginnen wir damit, den Feldstil auf Schwarz zu setzen. Und dann können wir die Kontext-Punktschrift so einstellen dass sie 400 Pixeln serf entspricht Dann können wir Feldtext verwenden , der drei Parameter benötigt Zeichenfolge sowie X- und Y-Koordinaten. Also Kontext-Punkt-Feldtext, in Großbuchstaben, Null Wir sehen noch nichts, und das liegt an einer Datentexteigenschaft, die als Textbasislinie bezeichnet wird Der Standardwert ist alphabetisch, was bedeutet, dass der Text von unten gezeichnet wird Damit wir ihn mit diesen Koordinaten sehen können, müssen wir die Textgrundlinie nach oben ändern Oder wenn wir das in der Mitte unserer Skizze haben wollen, müssen wir es in die Mitte ändern und dann müssen wir den Kontext in die Mitte der Skizze übertragen . Wir wissen bereits, wie das geht. Kontext Punkt speichern, Kontext Punkt wiederherstellen. Und Kontext übersetzt Breite mal 0,5 und Höhe mal 0,5. Jetzt scheint der Buchstabe vertikal zentriert zu sein , aber nicht horizontal. Also müssen wir noch eine weitere Texteigenschaft namens text align ändern . Der Wert, nach dem wir suchen, ist Mittelpunkt. Jetzt scheint die Glyphe zentriert zu sein. Lass es uns größer machen . Lassen Sie uns die Schriftgröße auf 1.200 Pixel ändern die Schriftgröße auf 1.200 Pixel Wir können sehen, dass es nicht ganz in der Mitte ist. Tatsächlich ist es um ein ganzes Stück daneben. Die Sache ist, dass Schriften komplexe Strukturen sind. Das Setzen der Grundlinie auf die Mitte garantiert nicht, dass der Körper der Glyphe zentralisiert wird , wie wenn wir es mit der primitiven Form zu tun Um das richtig zu machen, benötigen wir mehr Informationen über die Schrift Dafür gibt es eine Methode , die als Maßtext bezeichnet wird, und die Himmelsreferenz auf W drei Schulen sagt uns, dass sie die Breite des Textes zurückgibt. Aber diese Methode macht tatsächlich mehr als das. Wir können das auf der entsprechenden Seite von NDM sehen, hier heißt es, dass Measure-Text ein Objekt namens Textmatrix zurückgegeben hat, und Textmatrix hat zwar eine Eigenschaft namens Breite, aber sie hat auch eine Menge mehr Wir sehen, dass alle anderen Eigenschaften außer Wd diesen Lab-Icon-Text haben, was bedeutet, dass sie immer noch als experimentelles Merkmal dieses Objekts betrachtet werden als experimentelles Merkmal dieses Objekts betrachtet Aber lassen Sie uns jetzt etwas weiter nach unten scrollen und die Browserkompatibilität überprüfen. Trotz ihres experimentellen Status werden die meisten von modernen Browsern bereits gut unterstützt. Zu Beginn des Kurses habe ich erwähnt, dass Sie jeden beliebigen Browser auswählen können. Und obwohl das immer noch stimmt, Sie hier einen Vorteil haben, wenn Sie sich für einen modernen Browser entscheiden können Sie hier einen Vorteil haben, wenn Sie sich für einen modernen Browser entscheiden. einem alten Browser könnten Sie eine gute Näherung erhalten, aber Sie müssten mit dem Auge beurteilen , wann Sie die Übersetzung korrigieren einem modernen Browser können wir mit diesen Matrixeigenschaften viel genauer mit diesen Matrixeigenschaften Also lass uns das machen. Zuerst wollen wir unseren Brief in einer Variablen speichern, die ich Text nennen werde. Dann wollen wir den Text messen , den ich auch in einer Variablen namens Matrix speichern werde . Kontext-Punktmesstext Schauen wir uns die Daten in der Matrix mit der Punktprotokoll-Punktmatrix der Konsole an. Diejenigen, die uns interessieren, sind die ersten vier, die den eigentlichen Begrenzungsrahmen beschreiben Seit unserer ersten Skizze wurden uns Boxen gezeichnet, und wir wissen, dass ihr Ursprung oben links liegt Deshalb werde ich den Text „Mittig ausrichten“ auskommentieren und den Standardwert links beibehalten. Außerdem setze ich die Grundlinie wieder nach oben Und wir können vorerst auch kommentieren und übersetzen. Dann wollen wir unsere üblichen XY-, W- und H-Variablen, diesmal aber für die Matrix. Ich werde ihnen das Präfix X als Matrixpunkt voranstellen. Tatsächliches Begrenzungsfeld links mal minus eins. Mein aktueller Bounding-Box-Akzent mal minus eins. Und W tatsächliche Begrenzungsbox links plus tatsächliche Begrenzungsbox Und schließlich, MH, der eigentliche Bounding-Box-Akzent plus der tatsächliche Bounding-Box-Abstieg Mal sehen, was dabei herauskommt. Wir können schnell den Begrenzungsrahmen mit einem Umriss, einem Kontextpunkt, einem Startpfad, einem Kontextpunkt g xMyNWH und einem Kontext-Punktstrich zeichnen Startpfad, einem Kontextpunkt g xMyNWH und einem Kontext-Punktstrich Nun, das ist der eigentliche Begrenzungsrahmen rund um die Klippe. Wir können auch mit anderen Klippen testen. Um dies in der Mitte unserer Skizze auszurichten, können wir etwas Ähnliches tun wie wir es in unserer Notenskizze gemacht haben. Kosten X sind gleich Zwei, minus NW mal 0,5 minus X und CY-Höhe minus H mal 0,5 minus Y. Und dann haben wir und CY-Höhe minus H mal 0,5 minus Y. den Kontext in X und Y übersetzt . Und dann haben wir ihn Ich habe die Glyphe richtig zentriert. Wir werden natürlich mehr damit machen, aber bevor wir fortfahren, möchten wir vielleicht eine andere Schriftart wählen oder vielleicht die Schriftgröße ändern Lassen Sie uns hier also ein bisschen aufräumen. Lassen Sie uns die Textvariable außerhalb dieser Funktion an den Anfang der Datei verschieben und sie auch mit einem Let deklarieren, falls wir sie später ändern und zwei weitere Variablen deklarieren möchten sie später ändern und zwei weitere Variablen deklarieren Die Schriftgröße entspricht 1.200 und die Schriftfamilie entspricht Leibeigener. Die Font-Eigenschaft ist eine einzelne Zeichenfolge, daher müssen wir diese Ich zeige Ihnen zwei Möglichkeiten, das zu tun. Wie wir bereits in unserer allerersten Lektion gesehen haben, müssen wir nur diese Zeichenketten zusammen mit den Pluszeichen addieren . Schriftgröße plus Px-Leerzeichen plus Schriftfamilie. Und der andere Weg ist mit den Vorlagenliteralen, die es uns ermöglichen, Variablen oder Ausdrücke in die Zeichenketten einzufügen Variablen oder Ausdrücke in die Zeichenketten Lassen Sie uns diese Zeile duplizieren und herausnehmen. Vorlagenliterale werden nicht durch Codes definiert, sondern durch Also Bectics für die erste Variable, Dollarzeichen, geschweifte Klammern, dann PX und dann Dollarzeichen und geschweifte Klammern ausrichten Die erste ist die Schriftgröße und die zweite die Das Ergebnis ist dasselbe. Die Praxis besteht jedoch darin, Vorlagenliterale zu verwenden, aber jetzt wissen Sie, dass es zwei verschiedene Möglichkeiten gibt, dies zu tun können die Schriftart gerne ändern, wenn Ihnen die Sie in Ihrer Skizze gesehen haben, nicht gefällt Sie können auch eine Variable für den Schriftstil oder die Schriftstärke erstellen . Ich werde mich vorerst nur an die Standardschrift von Sara halten. Nehmen Sie sich etwas Zeit, um die Schriftart auszuwählen, mit der Sie arbeiten möchten. Und wenn Sie bereit sind, werden wir uns in der nächsten Lektion treffen. 20. Mehr über Async erfahren: In unserer Skizze ist jetzt ein einziger Buchstabe eingezeichnet. Wäre es nicht toll , das zu aktualisieren und wir eine Taste auf unserer Tastatur zu drücken? Daran werden wir in dieser Lektion arbeiten. Wir müssen uns Ereignisse anhören , die in unserem Browserfenster passieren , und das Fenster , an dem wir interessiert sind, heißt Key. Wir könnten auch Key Down verwenden, was der eigentliche Tastendruck ist, aber ich bevorzuge eine Tasten-App, die ausgelöst wird, wenn die Taste losgelassen wird Wir brauchen eine Leitung wie diese. Dokumentieren Sie den Punkt, der Ereignis-Listener , Key, und dann ist der zweite Parameter die Funktion, die aufgerufen wird , wenn das Ereignis eintritt Lassen Sie uns einen mit dem Namen Key upp erstellen. Const auf Key up. Es erhält ein Event-Objekt als Parameter. Und vorerst können wir dieses Objekt einfach protokollieren. Eine der Eigenschaften des Event-Objekts ist eine Zeichenfolge mit einer Taste , die gedrückt wird. Wir könnten unsere Textvariable auf diese Taste setzen. Das war also ziemlich einfach. Aber unsere Skizze ändert sich nicht. Wir müssen ihr sagen, dass sie aktualisiert und erneut gerendert werden soll , wenn sich die Textvariable ändert. Eine schnelle Lösung wäre hier , animate true zu unserer Einstellung hinzuzufügen, wie wir bereits gesehen haben Aber das würde bedeuten, die Skizze in jedem Frame zu aktualisieren , obwohl wir das eigentlich nur machen müssen, wenn die Taste gedrückt wird Um das richtig zu machen, muss ich einen Umweg machen und ein paar Minuten damit verbringen, ein anderes Programmierkonzept zu erklären , eine synchronisierte Funktion Bisher stützte sich der gesamte Code, den wir geschrieben haben , auf einer impliziten Regel, dass alles synchron läuft Sobald wir eine Codezeile schreiben, können wir davon ausgehen, dass das, was wir geschrieben haben, wahr und etabliert ist , wenn wir zur nächsten Zeile kommen Wenn wir zum Beispiel sagen, dass X gleich fünf ist, können wir in der nächsten Zeile sicher sein, dass X plus eins nur sechs ergibt. Nehmen wir an, wir wollten, dass X mir ein Bild lädt, was eine Funktion ist , die es nicht gibt, es ist nur ein Beispiel. Dann wollen wir in der folgenden Zeile versuchen, mit der Breite des Bildes zu lesen. Dies würde uns einen Fehler geben , da das Bild einige Zeit zum Laden benötigt. Wenn der Browser diesen Code ausführt, wird er in dieser Zeile nicht aufhören. Warten Sie, bis das Bild geladen ist, und fahren Sie dann mit dem Rest des Codes fort. Es wird alles synchron laufen lassen. Beim Laden ist ein Bild die Aufgabe des Synchronizers. Um diese Mischung aus Synchronizern und Synchronizer-Aufgaben zu bewältigen , haben wir in JavaScript ein Konzept namens Promise, was ein sehr passender Name ist. Der Browser sagt: Okay, ich werde das ausführen, aber es wird eine Weile dauern also statt des Ergebnisses Nehmen Sie also statt des Ergebnisses das Versprechen an , dass ich Ihnen das Ergebnis geben werde , wenn es fertig ist. Lassen Sie mich vorerst mit dem Rest des Codes weitermachen. Wir werden dann in der Lage sein die Breite des Bildes zu ermitteln, das wir hier laden möchten. Wir müssen das nur etwas anders schreiben , mir ein Bild laden dann etwas mit X-Punkt damit machen. Das ist offensichtlich kein echter Code. Aber lassen Sie uns weitermachen und diese Funktion zum Laden einiger Bilder tatsächlich implementieren , damit wir ein funktionierendes Beispiel haben können. Wir können ein zufälliges Bild von PixM am unteren Ende erhalten. uns egal, um welches Bild es sich handelt, solange es welche enthält Und dann speichern Sie diese Variable namens URL. Und dann lade mir ein Bild. wenn man einen Real als Grenze nimmt, Und wenn man einen Real als Grenze nimmt, gibt es ein neues Versprechen Aus der Dokumentation geht hervor, dass es sich um eine Funktion mit zwei Parametern „ resolve“ und „reject Dann ein fetter Pfeil und eine geschweifte Klammer. In dem Versprechen werden wir ein neues Bild erstellen und dessen Quelleigenschaft, die Quelle, auf die URL setzen , die wir weitergeben Sobald das Bild eine Quelle hat, beginnt der Browser bereits damit, es zu laden. Wir wollen also andere Eigenschaften vor der Quelle setzen. Ich möchte mg dot load, eine Funktion, die der Browser aufruft, wenn das Bild fertig geladen ist , und die unser Versprechen einlösen und das MG-Objekt selbst übergeben würde . Und on roll, möchte unser Versprechen ablehnen. Dann könnten wir eine weitere Funktion namens start haben, die der Einstiegspunkt unseres Codes wäre. Ignoriere vorerst den Rest unserer Skizze. Wir werden in einer Minute darauf zurückkommen. Aber jetzt tu einfach so, als ob das der ganze Code ist, den wir hier haben. Nur diese beiden Funktionen innerhalb von Start können sagen, lade mir ein Bild dann in dieser Funktion dieses Versprechens Und der erste Parameter ist das, was wir innerhalb von resolve übergeben. Also dann EMG, fetter Pfeil, und dann können wir das Bild damit und den EMG-Punkt damit protokollieren Und um zunächst die Reihenfolge zu sehen , in der dieser Code ausgeführt wird, schauen wir uns auch etwas anderes direkt nach diesem Code an, etwa diese Zeile Dann müssen wir nur noch Start ausführen und uns die Konsole ansehen. Also hat der Browser diese Zeile zuerst ausgeführt, obwohl sie nach dem vorherigen Protokoll erscheint. Und das liegt daran, dass Load Misumimage ein Versprechen ist , das erst einige Zeit später erfüllt Hier haben wir also eine Synchronizer-Funktion und eine Syncronizer-Funktion. Hier haben wir also eine Synchronizer-Funktion und eine Syncronizer-Funktion. Aber was wäre, wenn wir wollten, dass der Browser auf die N-Synchronisierungsaufgabe wartet Das können wir mit etwas namens Wait machen. Wenn wir etwas innerhalb einer Synchronizer-Funktion ausführen , können wir dem Browser sagen, dass er warten soll Oder mit anderen Worten, wir können diese Aufgabe synchron ausführen diese Aufgabe synchron Ist das verwirrend? Schauen wir uns ein Beispiel an. Lassen Sie uns eine Kopie unserer Startfunktion erstellen. Kommentieren Sie einen von ihnen und lassen Sie ihn hier nur als Referenz stehen. Dann wollen wir Start in eine asynchrone Funktion umwandeln , indem wir davor ein Sync eingeben Jetzt können wir diesen Ausdruck darin so ändern, dass B ENG dem Gewicht entspricht Lade mir ein Bild und dann lade das Bild damit und logge diese Zeile Speichern wir das und überprüfen wir die Konsole erneut. Jetzt ist die Reihenfolge der Protokolle umgekehrt, oder sie ist tatsächlich dieselbe, wie wir sie im Code haben Selbst wenn wir ein Bild laden, was eine Aufgabe ist, von der wir nicht wissen, wie lange es dauern kann, wartet der Browser jetzt darauf Warum habe ich mich auf all das eingelassen? Weil Canvas Sketch eine synchronisierte Funktion ist. Es gibt ein Versprechen mit einem sogenannten Sketch Manager zurück mit einem sogenannten Immer wenn wir eine Taste auf der Tastatur drücken, möchten wir dem Sketchmanager mitteilen können , dass er die Skizze erneut rendern soll. Gehen wir also zurück zu unserer Skizze. Schließlich können wir diesen ganzen Codeblock mit Schrägstrich und dann am Ende Stern und Schrägstrich auskommentieren diesen ganzen Codeblock mit Schrägstrich und dann am Ende Stern und Schrägstrich und diese Blöcke einfach als Referenz hier belassen Jetzt werden wir abschließen. Unser Aufruf an Canvas ist eine Skizze mit Sync-Funktion namens Star genau wie wir es in unserem Beispiel getan haben. das an der richtigen Stelle ist, können wir dann den Mager-Sketch und eine Variable speichern , um auf die Converse Sketch zu warten Tatsächlich wollen wir, dass diese Variable außerhalb des Bereichs dieser Funktion sichtbar Also lass es uns hier oben deklarieren. Und wir müssen daran denken, Star anzurufen, damit er sofort weglaufen kann. Jetzt können wir in der Key App, nachdem wir den Wert von Text festgelegt haben, den Manager Dot Render aufrufen. Und wir können sehen, dass es funktioniert, aber ich möchte Großbuchstaben verwenden, also füge ich die beiden Großbuchstaben hinzu Und damit sind wir wieder auf dem richtigen Weg. Damit war der Umweg zu Ende. Es sah ein bisschen lang aus, aber es war ein wichtiges Konzept, das es zu behandeln Wenn Sie einmal mit der Angabe von Fehlergewichten vertraut sind, müssen Sie eigentlich nicht mehr viel Code schreiben, um sie zu verwenden. Am Ende mussten wir nur noch eine Sing-Funktion um die Code-to-Canvas-Skizze wickeln . Es steckt mehr hinter Versprechungen als das, was ich hier behandelt habe. Zum Beispiel, was passiert, wenn ein Versprechen abgelehnt wird , und wie man eine Fehlermeldung abfängt. Ich werde einen Link mit einem Beispiel mit weiteren Details posten , falls Sie mehr darüber lesen möchten. Das war eine kleine Reise, aber jetzt sind wir damit fertig. Sie lernen das leistungsstarke Konzept kennen, das sich bei der Verwendung von JavaScript definitiv als nützlich erweisen wird. In der nächsten Lektion werden wir zu unserer Skizze zurückkehren. 21. Eine Bitmap erstellen: Jetzt werden wir uns mit dem Lesen Farbwerten aus den Pixeln auf unserer Leinwand befassen Wir haben jetzt einen großen Buchstaben genau in der Mitte unserer Skizze, und der Effekt, den wir anstreben, ist, andere Formen in der Form dieses Buchstabens zu zeichnen. Wir können anfangen, darüber nachzudenken, was wir jetzt nur als Positions - und Farbdaten sehen . Das muss nicht einmal auf unserer Skizze stehen. Wir müssen nur wissen, wo wir weiße Pixel haben und wo wir schwarze Pixel haben. Wir können uns unseren Canvas als eine Big-Data-Map oder eine Bitmap vorstellen . Canvas ist eine Bitmap. Wenn wir die Dimension festlegen, gibt es ein Pixelraster. Wir sagen, wir wollen so viele Pixel auf diese Weise und so viele Pixel auf diese Weise. Wenn wir den Pixeln auf unserer Leinwand sehr nahe kommen, sehen wir, dass sie aus unseren Kanälen RGB und A bestehen. Jede dieser Zahlen ist 0—255, was der Farbinformation eines Pixels entspricht Und die Farbe ist hier nicht das einzig Wichtige. Es ist auch wichtig zu wissen, wo sich das Pixel befindet. Es ist die XN Y-Position oder ihre Spalte und Zeile im Raster. Wir wissen bereits ein oder zwei Dinge über Gitter, das wird sich hier als nützlich erweisen Zuallererst müssen Sie separaten Canvas für unseren Brief erstellen, einen kleineren, den wir nur zum Lesen von Daten verwenden werden nur zum Lesen von Daten verwenden Wir können es oben in unserer Datei erstellen. Kostentyp Canvas entspricht dem Document Dot Quit Element, Canvas, und dann benötigen wir auch den Kontext. Der Kontext vom Typ C entspricht also dem Typ Canvas dot Get context. Dann in der SCAT-Funktion, aber vor den Renderfunktionen weil wir das nur einmal machen müssen Wir werden die Rastereigenschaften vom Typ Canvas definieren, und dafür benötigen wir Breite und Höhe Also können wir diese Eigenschaften hierher kopieren und sie hier verfügbar machen. Wir wissen, dass ein Pixel immer ein Quadrat ist, also können wir seine Dimension in einer einzigen Variablen speichern. Kostenzelle müssen wir die Werte für Breite und Höhe nicht trennen, und dann können wir einfach eine Größe für unser Pixel auswählen. Nehmen wir an, es werden 20 sein. Und um dann die Anzahl der Spalten zu definieren, müssen wir das Gegenteil von dem machen was wir in unserem vorherigen Raster getan haben Und sagen wir Mathepunkt Boden, Breite geteilt durch Zelle Das bedeutet, dass wir für alle 20 Pixel in unserer Hauptleinwand ein Pixel in unserer Typ-Leinwand haben werden. Die Breite unserer Skizze beträgt 1080/20. Es gibt uns 54. Dann müssen wir dasselbe für Zeilen tun. Matheboden, Höhe geteilt durch Zellen, taube Zellen wird das Gleiche sein wie beim letzten Mal, nennt mal Seile Und damit können wir die Größe des Typs Canvas festlegen. Geben Sie Canvas ein , wobei die Anzahl der Spalten und Höhen angegeben wird . Es wird die Anzahl der Spalten sein, und Höhe wird die Anzahl der Zeilen sein. Anstatt in den Kontext zu zeichnen, werden wir in den Typkontext zeichnen. Wählen Sie also einfach alle Vorkommen des Kontextes aus und ersetzen Sie es durch den Typ Kontext Wir können diese auskommentierten Zeilen loswerden und sie dann durch Kohlen und Höhen durch Zeilen ersetzen Um zu sehen, was wir hier haben, können wir den Text Canvas mit dem Kontextpunkt in unsere Skizze zeichnen, Bild zeichnen, Canvas eingeben und dann X und Y Null und Null Wir sehen noch nichts, also versuchen wir zu verstehen, was vor sich geht. Eine einfache Möglichkeit, um zu überprüfen, ob mit Type Canvas alles in Ordnung ist , besteht darin, die Hintergrundfarbe auf Schwarz einzustellen. Und die Textfarbe auf Weiß. Jetzt sehen wir dort oben ein kleines schwarzes Quadrat. Aber wo ist unser großer Buchstabe A? Das Problem ist, dass die Schriftgröße jetzt zu groß ist. Wir müssen es basierend auf der Größe unserer neuen Leinwand aktualisieren. Wir könnten es einfach so einstellen , dass es der Breite oder Anzahl der Spalten entspricht , und da ist unser Typ Canvas. Jetzt wollen wir die Pixeldaten daraus lesen. Dafür benötigen wir eine Methode namens get image data. Als Parameter werden X, Breite und Höhe des Bereichs erwartet X, Breite und Höhe des , aus dem wir Daten lesen. Wir können das als Variable mit dem Namen type data speichern und ihr zwei Typen von Kontext-Get Image-Daten zuweisen: Null, Null, Aufrufe und Zeilen. Schauen wir uns an, was interne Typdaten in der Konsole verwenden. Daten vom Typ „Punktprotokoll“ in der Konsole. Es handelt sich um ein Objekt vom Typ Bilddaten haben Breite, Höhe und Daten, und Daten sind ein großes Array mit mehr als 12.000 Elementen Das ist ein Element für jeden Kanal jedes Pixels. GBA, also das Vierkanal-fache der Breite, was dem 54-fachen der Höhe entspricht, was ebenfalls 54 ist, kennen wir unsere Breite und Höhe bereits, sodass wir unsere Typ-Datenvariable so einstellen können, dass sie nur die Dateneigenschaft dieses Objekts Jetzt wollen wir diese Pixelwerte lesen und wissen, wie man Daten aus einem Array liest Wir benötigen eine Viererschleife, denn I ist gleich Null, I ist kleiner als NML, I plus Canvas ist eine Bitmap und eine Bitmap ist ein Grid. Wir wissen bereits, wie man Spalten und Zeilen in einem Raster findet. Also lass uns das noch einmal machen. Convall entspricht zwei Anrufen, die ich geblieben bin. Constru entspricht Mathe Dot Floor, ich dividiere durch Aufrufe. Jetzt möchte ich X und Y verwenden, aber wir verwenden diese hier oben bereits als Variablennamen Also werde ich sie einfach in TX und TY umbenennen . Jetzt sind die Namen X und Y wieder verfügbar. Die Kosten X entsprechen der Zelle in der kalten Zeit. Die Kosten Y entsprechen der Rohzeitzelle. Lassen Sie uns nun für jede dieser Zellen ein kleines Quadrat zeichnen. Kontextpunkt speichern, Kontextpunkt wiederherstellen. Kontextpunkt übersetzt X und Y und der Kontextpunkt fühlt sich richtig an, Null , Null und L. Alles wird schwarz, weil wir 54 mal 54 sind. Schwarze Quadrate auf unserer Skizze. Was wir wollen, ist, die Farben dieser Quadrate auf der Grundlage von Banddaten zu ändern . Wir wollen diese GBA-Werte lesen. Lassen Sie uns eine neue Variable namens R erstellen und sie auf Banddaten setzen Und zwischen den eckigen Klammern soll der Index der erste Kanal des Pixels sein , bei dem wir uns befinden. Wir wissen, dass der Pixelindex der Index unserer Schleife ist. Also der Buchstabe I, wir wissen, dass RGBA vier Kanäle ist, also ich mal vier, und wir wissen, dass Rot der erste Kanal ist, also plus Null, wir müssen zu nichts Null hinzufügen Ich tippe ihn hier nur ein, um zu verdeutlichen, dass wir vom ersten Kanal aus lesen Jetzt die anderen Kanäle zu finden, ist sehr einfach. Duplizieren Sie einfach diese Zeile. Ändern Sie den Variablennamen in G und den Kanalindex in eins. Dann B und zwei, dann A und drei. Wir brauchen den Alpha-Kanal eigentlich nicht, aber wir können ihn hier deklarieren. Jetzt müssen wir nur noch den Stil des Kontext-Punktfeldes ändern und diesmal das Template-Literal verwenden , um eine einzelne Zeichenfolge Bektische RGB-Klammern öffnen und schließen, dann Dollar-Sinusklammern, R-Dollar-Sinusklammern, G - und Dollar-Sinusklammern, B, und da Pixelierte Version unseres großen Typs. Dies unterscheidet sich davon, einfach etwas Kleines zu zeichnen und es dann zu vergrößern, um es pixelig zu sehen , denn jetzt können wir jede beliebige Form zeichnen Schauen wir uns zum Beispiel an, wie das mit Kreisen statt mit Quadraten aussieht Kontext-Punkt, Anfangspfad, Kontaktpunkt, Bogen 00, Nullpunkt Pi mal zwei, und Kontaktpunktfüllung , das ist nicht ganz richtig. Die Funkgeräte müssen die Hälfte der Zelle ausmachen. Nun, das ist fast richtig. Wir können sehen, dass hier rechts und unten im Raster etwas auftaucht . Und das liegt daran, dass der Kreis von der Mitte der Zelle aus gezogen wird, aber wir übersetzen nur in die obere linke Ecke jeder Zelle Also müssen wir eine weitere Übersetzung hinzufügen, um mal 0,5 zu sehen und mal 0,5 zu sehen Nun das richtig ausrichten. Wir sind auf dem Weg dorthin. Die wahre Wendung kommt als nächstes. 22. Mehr über Glyphen erfahren: A In dieser Liste werden wir unsere Skizze fertigstellen Anstatt Quadrate oder Kreise zu zeichnen, werden wir für jedes Pixel unseres Typs Leinwand andere Glyphen für jedes Pixel unseres Typs Das wird also ein bisschen Meta sein. Wir werden kleine Glyphen zeichnen, um eine große Glyphe zu bilden. Statt Bogen wollen wir Kontexte Punktfeld Text, Text 00. Dieser kleine schwarze Buchstabe ist nicht das, was wir wollen. Also lasst uns den Hintergrund auf Schwarz setzen. Stellen Sie vor der Schleife den Stil des Kontextpunkts auf Schwarz und zeichnen Sie ein großes Rechteck, füllen Sie die gesamte Leinwand aus. Wenn Sie trotzdem den kleinen Text Canvas dort oben sehen möchten , können Sie ihn einfach nach dem Füllen Wreck verschieben Nun, wir könnten hier vielleicht größere Glyphen haben. Lassen Sie uns die Schriftgröße auf die doppelte Größe der Zelle ändern. Schriftart für den Kontextpunkt. Dollarzeichen. Verkaufe Zeit zwei. PX und Schriftfamilie. Ich möchte nicht ständig dieselbe Glyphe zeichnen. Ich möchte eine andere Glyphe auf der Helligkeit des Pixels basiert Wir könnten zum Beispiel einen Punkt für Dunkelgrau und einen Strich für Mittelgrau zeichnen einen Strich für Mittelgrau Lassen Sie uns also eine neue Variable namens glyph erstellen und sie auf eine Funktion namens get glyph setzen , die wir als Nächstes erstellen werden , die wir als Nächstes erstellen Und dann werden wir hier anstelle von Texten Glyph wir hier anstelle von Texten Glyph Wir müssen die Helligkeit des Pixels weitergeben, um Glip zu erhalten , und wir benötigen nicht alle Kanäle, da Sie einen weißen Buchstaben zeichnen und zwei Jeder der Farbkanäle, die wir verwenden werden. Ich werde einfach den roten Kanal benutzen. Und tatsächlich können wir jetzt Weiß verwenden, um diese Glyphen zu zeichnen. Wir wollen das Dunkelgrau nicht mehr. Sie können den Kontextpunktfeldstil einfach auf Weiß setzen. Schreiben wir nun die Funktion get glyph. Sobald wir Glyph als Parameter haben, haben wir den Wert, den ich einfach V nennen werde, und wir wissen, dass V eine Zahl von 0-255 sein wird , weil das der Bereich des roten Kanals ist Je nachdem, wie hell das Pixel ist, möchte ich verschiedene Glyphen zurückgeben Also werde ich sagen, wenn V kleiner als 50 ist, gebe eine leere Zeichenfolge zurück I V ist kleiner als 100, gib einen Punkt zurück In diesem Fall müssen wir weder verwenden noch sehen, denn sobald eine Bedingung erfüllt ist, wir bereits einen Wert zurück und überprüfen nicht einmal die anderen Bedingungen. Also fangen wir einen Wert von 0-49 ab. Und das fangen wir 50-99. Das duplizieren Wenn V kleiner als 150 ist, gib einen Bindestrich zurück. Und wenn V kleiner als 200 ist, gib ein Pluszeichen zurück. Und wenn keine der obigen Bedingungen erfüllt ist, bedeutet dies, dass das Pixel sehr hell ist, sodass wir unsere ursprüngliche Textvariable zurückgeben können. Wir können die Punkte und Striche hier sehen, aber das ist ein bisschen seltsam Ich denke, wir müssen den Ursprung und die Ausrichtung erneut anpassen. Wir werden von der Mitte der Zelle aus gezeichnet, aber Sie erinnern sich vielleicht, dass der Text von unten gezeichnet und nach links ausgerichtet ist . Sie müssen ihn wieder in der Mitte ausrichten. Dieses Mal benötigen wir nicht so viel Genauigkeit, wenn dies ausreicht, um eine textbasierte Zeilenmitte zu verwenden. Textpunkt ausrichten. Das sieht langsam interessant aus, aber dieselbe Glyphe, die die ganze Zeit wiederholt wird, ist ein bisschen langweilig Der Standardwert hier könnte eine zufällige Glyphe sein. Das können wir in zwei Schritten machen. Zuerst schreiben wir eine Zeichenfolge mit den Glyphen, an denen wir gearbeitet haben. Kostenglyphen, Gleichheitszeichen für Unterstriche, Leerzeichen und Schrägstrich Leerzeichen und Dann konvertieren wir dies in ein Array, indem wir eine Methode aus einer Zeichenfolge Dies ist nützlich, wenn wir jedes Mal, wenn wir ein Leerzeichen oder ein Komma finden, etwas Text ausgeben möchten jedes Mal, wenn wir ein Leerzeichen oder ein Komma finden, etwas Text In unserem Fall wollen wir zum Beispiel jedes einzelne Zeichen ausspucken Unser Delmeter wird also eine leere Zeichenfolge sein und dann einen zufälligen Glip aus diesem Array auswählen Wir können wieder unseren Freund Random from Canvas Sketch, ETL verwenden Canvas Sketch, ETL Es hat eine Funktion namens pick, die ein zufälliges Element aus einem Array darstellt Lassen Sie uns also noch einmal ein zufälliges Objekt aus der Canvas-Skizze importieren , etLH Geben Sie dann eine zufällige Punktspitze zurück und übergeben Sie die Array-Glyphen Okay, zufällige Glyphen, aber wir können es auch zufälliger machen, indem wir eine andere Schriftgröße verwenden Ich möchte den Glyphen eine zehnprozentige Chance geben , dass sie viel größer sind Duplizieren Sie diese Zeile hier und fügen Sie die Bedingung vorne Wenn Math Dot Random kleiner als 0,1 ist, legen Sie die Schriftgröße auf das Sechsfache der Größe der Zelle fest. Wir können aufhören, die kleine Zeichenfläche hier oben zu zeichnen, und die Schrift vielleicht auch etwas vergrößern. Es fühlt sich also eher nach Skizze an, sagen wir mal 1.2 aufrufen und dann mit allem experimentieren. Probiere verschiedene Glyphen aus. Sie können hier sogar einige Wörter zurückgeben. Es liegt an Ihnen, von nun an mit anderen Varianten zu experimentieren . Bis hier beenden wir unseren ersten Teil der Lektionen. Jetzt werden wir uns auf den Weg machen, um fortgeschrittenere Dinge zu entdecken. 23. Rechteck zeichnen: Wir beginnen jetzt mit unserem fortgeschrittenen Teil des Kurses. In diesem Abschnitt werden wir viele verschiedene Techniken erlernen , die weiter fortgeschritten sind. Am Ende dieser Liste wirst du etwas haben, das so aussieht Wenn Sie den Kurs mit einem Online-Editor verfolgen, können Sie zu der Vorlage gehen, die wir in der vorherigen Lektion gemeinsam erstellt haben , und eine Kopie davon für diese neue Skizze erstellen Und geben Sie stattdessen diese ab. Wenn Sie den Kurs mit einem Offline-Setup verfolgen, gehen Sie zum Terminal und suchen Sie den Ordner, in dem Sie Ihre Skizzen speichern möchten Meins ist Document Slash Java Visual Slash Sketches Sobald Sie im richtigen Ordner sind, geben Sie Canvas sketch, sketch skew, Hier führen wir den Canvas-Sketch-Befehl aus und übergeben eine JavaScript-Datei namens Sketch Skew, die Also verwenden wir die neuen Parameter , um dem Canvas eine Skizze mitzuteilen. Wir möchten, dass diese Datei erstellt wird. Und wir können der Einfachheit halber auch Dd Open verwenden. Es öffnet sich ein neuer Tab und der Browser mit einer neu erstellten Skizze. Wenn wir nun Sketch QGs im Editor öffnen und das Fenster so teilen, haben wir eine sehr ähnliche Ansicht sowohl für das Online- als auch für das Offline-Setup Das Erste, was ich hier gerne mache, ist, wie gewohnt die Abmessung der Skizze 1080 mal 1080 zu ändern wie gewohnt die Abmessung der Skizze 1080 mal 1080 Ich arbeite gerne mit dieser Dimension. Es ist praktisch, auf Instagram zu posten und ich habe mir gerade angewöhnt, das zu tun. Als Nächstes zeichnen wir ein Rechteck in der Mitte der Leinwand. Lassen Sie uns vier Variablen für das Rechteck erstellen: X, Y, W und H. Beachten Sie dass ich sie innerhalb der Sketch-Funktion, aber außerhalb der Render-Funktion erstelle aber außerhalb der Render-Funktion da sie nur einmal deklariert werden müssen. Nicht jedes Mal, wenn die Skizze gerendert wird. Dann können wir in der Renderfunktion ihre Werte festlegen. Ich werde die hier übergebenen Parameter für Breite und Höhe verwenden und X auf die Hälfte der Breite der Leinwand und Y auf die Hälfte der Höhe setzen. Also W auf 60% der Breite und H zwei auf 10% der Höhe. Um nun das Rechteck zu zeichnen, legen wir zunächst entweder eine Feldfarbe oder eine Strichfarbe fest. Ich möchte nur einen Umriss zeichnen. Also werde ich eine Strichfarbe mithilfe einer Eigenschaft eines Kontextes festlegen , die als Strichstil bezeichnet wird. Der Punktstrichstil entspricht also dem Blau. Und um dann das Rechteck tatsächlich zu zeichnen, benötigen wir eine Funktion namens strokRpt Es benötigt vier Parameter XY, Breite und Höhe, genau das, was wir hier haben Also Kontext-Punktstrich, Reaktion X, Y, W und dann das Feuer retten Dadurch wird ein Rechteck gezeichnet, das von der Mitte der Leinwand ausgeht und bis zu einer Stelle außerhalb der Leinwand erstreckt Das ist nicht genau das, was ich mir vorgestellt habe, also muss ich einige Anpassungen vornehmen. Ich möchte das Rechteck von seiner Mitte aus zeichnen, nicht von oben links. Also möchte ich dieses X und Y hier durch minus die Hälfte der Breite und minus die Hälfte der Höhe ersetzen . Okay, jetzt befindet sich der Ankerpunkt in der Mitte des Rechtecks, aber wir verwenden unser X und Y nicht mehr. Wir könnten sie direkt zur Stroke-Wrect-Funktion hinzufügen, aber es gibt einen besseren Weg, dies mithilfe einer Kontexttransformation zu tun Wir können den gesamten Kontext in X und Y übersetzen und dann von hier aus mit dem Ertrinken beginnen Ich wechsle hier ständig die Tabs, um dir die API-Referenz zu zeigen, aber ich werde das nicht jedes Mal tun , wenn wir etwas Neues sehen Das Beste ist für mich, die API einfach weiter zu verwenden. Und wenn Sie weitere Informationen zu einer dieser Methoden benötigen, empfehle ich Ihnen, diese Seite geöffnet zu lassen und sich die Dinge in Ruhe anzusehen. Nun zurück zur Übersetzung im Kontext. Wir verwenden Context Dot Translate X und Y. Wann immer wir den Kontext transformieren, empfiehlt es sich, ihn in seinen vorherigen Zustand zurückzuversetzen , damit wir keine gezeichneten Befehle verderben , die nach der Transformation kommen könnten Dazu rufen wir zunächst Context Dot save auf, um den aktuellen Status zu speichern Und wenn wir fertig sind, rufen wir Context Dot Restore auf. Wie gesagt, das ist eine gute Praxis. Wir sollten uns daran gewöhnen, Transformationen in Blöcken wie diesen durchzuführen. Das war einfach. Jetzt zeichnen wir dasselbe Rechteck, aber auf eine andere Art und Weise. Wir werden die Stroke-Wreck-Methode öffnen und die Form Punkt für Punkt zeichnen Wir beginnen mit dem Startpfad des Kontextes bewegen uns dann mit einer Bewegung von zwei minus der Hälfte der Breite und minus der Hälfte der Höhe zur linken oberen Ecke des Rechtecks zwei minus der Hälfte der Breite und minus der Hälfte der Höhe zur linken oberen Ecke des Stellen Sie sich vor, wir bewegen einen virtuellen Stift an diese Position ziehen dann von dort aus eine Linie bis zur nächsten Ecke des Rechtecks als positive Hälfte der Breite und immer noch negative Hälfte der Höhe Wir sind noch nicht fertig, aber wenn Sie sehen möchten, wie das aussieht, können wir Context Dot Stroke nennen. Jetzt zurück zum Ertrinken Wir brauchen eine Linie von der Stelle, an der wir den virtuellen Stift verlassen haben, bis zur Hälfte von W und zur Hälfte von und eine weitere Linie bis minus die Hälfte von W und der Hälfte von, um das Rechteck zu schließen Wir können den Pfad zum Schließen des Kontextes aufrufen und schon haben wir wieder unser Rechteck Der Unterschied besteht darin, dass wir sie diesmal Punkt für Punkt zeichnen, was bedeutet, dass wir diesen Punkt an eine beliebige Stelle verschieben können. Lassen Sie uns unseren Code noch ein bisschen optimieren. Vielleicht ist es einfacher , über die Koordinate des Rechtecks nachzudenken , wenn man von seiner oberen linken Position und seiner vollen Breite und Höhe ausgeht , als von all diesen halben Dimensionen hier Wir können einen anderen Kontext verwenden, um auf minus die Hälfte von W und minus die Hälfte von H zu übersetzen um auf minus die Hälfte von W und und dann von Null, Null auf Null, dann H und auf Null H zu zeichnen . Die visuelle Ausgabe hat sich nicht geändert, aber der Code sieht jetzt natürlicher aus. Das war nur ein Rechteck , das in der nächsten Lektion häufiger vorkommt 24. Zeichnen eines schrägen Rechtecks: Unser Ziel ist es, ein Scud-Rechteck zu zeichnen. Wir müssen die Ecke um einen Winkel bewegen, und dafür benötigen wir ein bisschen Trigonometrie Wir werden unser Rechteck für einen Moment verstecken und diesen Teil des Codes auskommentieren. Um diesen nächsten Teil zu erklären, möchte ich nur eine einzige Linie zeichnen, mit dem Startpfad für den Kontext beginnt, dann den Kontext bis zum Anfang der Zeile bei 00 bewegt und dann die Linie, sagen wir 200 und Null Setzen wir 00 wieder in die Mitte der Leinwand und kommentieren den zweiten Kontext , den wir übersetzen. Ich möchte, dass du dir diese Linie innerhalb des Kreises vorstellst. Der Mittelpunkt des Kreises liegt bei 00. Und der Radius des Kreises ist 200. Wenn der Kreis eine Uhr wäre, würde die Linie auf 3:00 Uhr Was müssten wir tun, um diese Linie auf 4:00 Uhr zu bringen? Wo wäre das Ende in den Positionen X und Y? Wir haben bereits den Radius des Kreises. Was wir brauchen, ist ein Winkel, und wir können davon ausgehen, dass 3:00 bei null Grad liegt, vier bei 35, bei 66 Uhr bei 90 Grad und so weiter Wählen wir also 30 Grad für 4:00 Uhr. Um das Querciin zu finden, die Koordinaten X und Y mit dem Radius und dem Winkel, lautet die Formel wie folgt. X ist der Kosinus von Winkel mal Radius, also mathematischer Punktkosinus Winkel mal Radius, und Y ist der Sinus von Wir können eine Variable für diese Wörter deklarieren, wir tippen einfach. Lass uns das hier oben zusammen mit den anderen Variablen machen. Und dann setze den Radius auf 200 und den Winkel auf 30. Jetzt ist 30 der Wert in Grad, aber der mathematische Punktkosinus erwartet einen Wert in Radianz Also müssen wir das zuerst konvertieren. Wir könnten eine Funktion schreiben, um zwischen Grad und Strahlkraft umzurechnen, aber das ist eine sehr verbreitete Operation, und es gibt Bibliotheken, die wir dafür verwenden könnten Die, die ich hier vorschlagen werde , ist eine Begleitbibliothek für Canvas Sketch namens Canvas Sketch UTL Sie hat eine Reihe von Hilfsfunktionen für Mathematik, zufällige Farben und Geometrie Wir wissen bereits im ersten Abschnitt des Kurses , wie das geht. Wir schauen uns das gerade noch einmal an. Jetzt werden wir im Kurs vorerst einige verwenden , das, was uns interessiert, Grad-zu-Rot, das Teil des mathematischen Objekts ist Skizze auf Leinwand TL Mathe. Jetzt können wir unseren Winkel in Strahlkraft umrechnen, indem wir Matt Dec to Red verwenden Jetzt müssen wir nur noch die X- und Y-Werte verwenden , die wir hier berechnet haben Und unsere Linie zeigt jetzt auf 4:00 Uhr. Der tatsächliche Wert von X und Y sind die Zahlen 0-200. Es wäre wenig sinnvoll, zu versuchen, diese Koordinate ohne die Verwendung von Winkeln zu finden Es ist einfacher, sich diese horizontalen Linien als Null Grad und diese Diagonale als 45 Grad vorzustellen. Das sind 90 Grad und so weiter. Jetzt, wo wir das wissen, gehen wir zurück zu unserem Rechteck, anstatt diese X- und Y-Variablen zu verwenden. Lassen Sie uns das aufgeräumt halten und neue Variablen namens Rx und AirY erstellen neue Variablen namens Rx und Und wir brauchen den Radius nicht wirklich , weil wir W verwenden werden, was der breiteste Teil des Rechtecks ist Der Winkel kann so bleiben, wie er ist, und dann ist x der Kosinus des Winkels mal W und RY der Sinus des Winkels mal W. Diese Linie kann verlaufen und wir können sie über den Code verschieben Wir haben es vorhin kommentiert. Diese Kontext-Übersetzung wird jetzt zu R x mal -0,5 und zwischen Klammern RY plus H Zug zwei kann bei 00 bleiben. Und die erste Zeile geht jetzt zu RX und RY, die zweite zu RX und RY plus und die dritte kann bei Null und H bleiben. Jetzt speichern wir das und es gibt vier Scud-Rechtecke Wir können es auch mit anderen Winkeln versuchen. Das Letzte, was wir hier tun müssen, ist, das, was wir gerade gemacht haben, in eine Funktion umzuwandeln. Ich werde eine am Ende der Datei direkt nach der Sketch-Funktion erstellen Ende der Datei direkt nach der und sie drawSkdrt nennen Für den Parameter können wir sie entweder einzeln übergeben oder einen einzelnen Parameter als Objekt mit mehreren Eigenschaften übergeben. Ich werde mich darauf einlassen. Geschweifte Klammern und Eigenschaften sind also Kontext, W H und Grad. Der Kontext ist es, wo wir hingezogen werden. W und H sind die Breite und Höhe des Rechtecks verringern den Winkel von Sco und drücken ihn in Grad aus, nicht in Strahlkraft Wir können ihnen Standardwerte wie 600 für die Breite, 200 für die Höhe und -45 für den Jetzt können wir einfach diesen ganzen Codeabschnitt innerhalb der Funktion verschieben Codeabschnitt innerhalb der Funktion Erwarte diese Zeile mit dem Strichstil, der hier oben bleiben kann Da dieser Block jetzt außerhalb des Geltungsbereichs der Sketch-Funktion liegt , müssen die Variablen erneut deklariert werden Diesmal können wir const verwenden , weil sie sich innerhalb der Funktion nicht ändern Und da Sie den Kontext übersetzen, denken Sie daran, dass ich gesagt habe, dass es eine gute Praxis ist, den Zustand des Kontextes nach der Transformation immer wiederherzustellen Also müssen wir diesen Block mit dem Context Dot Safe und dem Context Dot Restorer umschließen Context Dot Safe und dem Context Dot Restorer Mal sehen, ob das funktioniert und rufen Drous Code rect auf, übergeben den Kontext als Parameter und belassen die anderen bei ihrem Standardwert Und dann den Context Dot Stroke aufrufen. Da ist er wieder. In dieser Hörprobe haben wir gelernt, wie man eine externe Bibliothek importiert und installiert, wie man kartesische Koordinaten anhand eines Winkels und Radius findet und wie man ein Scud-Rechteck zeichnet In der nächsten Liste werden wir einen Hub zeichnen. 25. So erstellst du Distribution: Nun, da wir eine Funktion zum Zeichnen eines Trupp-Rechtecks haben, wollen wir ein paar davon zeichnen. Dieser Teil ist einfach. Alles was wir brauchen ist eine For-Schleife. Wir können die Anzahl der gewünschten Formen in einer Variablen speichern. Nennen Sie es NAM und setzen Sie es auf 20. Dann wickeln wir vier Schlaufen um die Kohle, um ein Rechteck zu zeichnen Denn sei I gleich Null, I ist kleiner als Zahl I plus plus Das Ergebnis sind 20 übereinander gezeichnete Rechtecke. Wir können sie an zufälliger Position auf der Leinwand verteilen zufälliger Position auf der Leinwand Und dafür können wir ein anderes Modul von Canvas Sketch Out verwenden . Wir haben es bereits formatiert, also müssen wir es nur importieren, Host Random entspricht Canvas Sketch Utl random In der Dokumentation finden wir wieder eine Reihe praktischer Funktionen, finden wir wieder eine Reihe praktischer Funktionen genau wie wir es mit dem Mathematikmodul getan haben Die, an der wir interessiert sind, ist der zufällige Punktbereich. Wir übergeben einen Mindest- und einen Höchstwert und erhalten eine Zufallszahl zwischen ihnen zurück. Wir können das verwenden, um das X und das Y für jedes Rechteck zu ändern. X kann eine beliebige Zahl zwischen Null und gewichtet sein. Und warum? Eine Zahl zwischen Null und Höhe? Warum nicht dasselbe für die Abmessung des Rechtecks tun? W kann 200-600 und H 40-200 sein. Der Winkel ist für alle gleich, also können wir ihn hier oben in einer Variablen speichern und diese Werte nun als Parameter übergeben Das wird immer interessanter, aber es gibt ein Problem mit diesem Ansatz. Diese zufälligen Aufrufe hier in der Renderfunktion bedeuten , dass die Rechtecke jedes Mal, wenn die Skizze gerendert wird , anders aussehen Das ist eigentlich eine gute Sache. Wir wollen dieses Element der Zufälligkeit, aber wir wollen auch die Kontrolle darüber haben Nehmen wir an, wir drücken Control S oder Command S , um diesen Frame zu speichern, bevor wir das tun Wählen wir ein Rechteck, das wir später erkennen können. Ich würde sagen, dieser. Jetzt drücke ich Control S und werde den Ordner herunterladen und den Ausgaberahmen überprüfen. Wir können sehen, dass unser Referenzrechteck nicht hier ist. Das Bild kam anders heraus als was wir auf dem Bildschirm sahen, und das liegt daran, dass die Renderfunktion während der Aufnahme des Frames aufgerufen wurde und am Ende völlig unterschiedliche Zufallszahlen verwendet wurden. Das Gleiche wäre der Fall, wenn wir die Skizze animieren würden, indem wir der Umgebung animierte Originalgetreue hinzufügen Jetzt läuft die Renderfunktion auf jedem Bild , was zu diesem Verbindungsproblem führt , das wir hier sehen. Es gibt zwei Möglichkeiten, dieses Problem zu lösen Lassen Sie uns mit einer davon beginnen und die andere später ansprechen. Wir können die Eigenschaften des Rechtecks außerhalb der Renderfunktion speichern . Wir werden ein neues Array namens rects erstellen und es mit Objekten füllen , die die Daten unseres Rechtecks darstellen werden die Daten unseres Rechtecks darstellen X, Y, W und H sind nur Daten. Wir können den Anfang unserer Schleife, in der wir den Wert für diese Variablen festlegen, kopieren und ihn hier aufrufen. Dann gehen wir in das Reg-Array, ein neues Objekt, das diese Eigenschaften enthält. Drücken Sie also den roten Punkt, das steht in den geschwungenen Klammern, X, Y, W und H. Wir sind noch nicht fertig Aber wenn wir das ausführen, erhalten wir eine Fehlermeldung in der Konsole, die besagt, dass die Breite nicht definiert ist Wir haben hier in der Sketch-Funktion Zugriff auf dieselben Eigenschaften der Render-Funktion. Wir müssen sie nur deklarieren. Kopieren Sie also diesen Parameter und fügen Sie ihn hier ein. Jetzt müssen wir unser Rex-Array verwenden. Wir brauchen das hier nicht mehr für die Schleife, sondern wir haben eine Reihe von Objekten, die wir für jede Schleife verwenden können, was eine Funktion von Array ist, also einen roten Punkt für jede Schleife. Und der erste Parameter ist das Objekt, über das wir iterieren, wir können es rect nennen Jetzt könnten wir diese Werte durch rect X oder rect dot Y usw. ersetzen . Es gibt eine Art und Weise, in der wir nichts von dem ändern müssen, was wir zuvor hatten Das heißt, direktes Objekt zu zerstören. Wir machen das mit konstanten offenen Klammern, alle Eigenschaften, die wir zerstören wollen, und schließen dann geschweifte Klammern. Das Gleiche gilt für Rect. Der Rest kann so bleiben wie er ist, und unser Der Unterschied besteht jetzt darin , dass die zufälligen Aufrufe innerhalb der Sketch-Funktion nur einmal vorkommen. Somit bleiben alle Eigenschaften der Rechtecke bei jedem Aufruf der Render-Funktion gleich Wir können das testen, indem wir animate auf true setzen. Seine Skizze ist jetzt animiert, aber nichts bewegt sich, weil die Positionen und Größen für jedes Bild gleich bleiben Das ist es, was wir wollen, denn obwohl die Komposition nun zufällig ist, können wir, wenn wir auf eine stoßen, die uns gefällt, sie mit Strg oder Befehl S speichern, und die Ausgabe ist dieselbe Wie wir hier auf dem Bildschirm sehen. Jetzt wissen wir also, wie man Zufallswerte verwendet, um die Zusammensetzung zu ändern, wenn wir die Seite aktualisieren, und wir wissen auch, wo im Code sie verwendet werden sollen. In der nächsten Hörprobe werden wir einige Farben hinzufügen. 26. Lerne das Hinzufügen von Farben: Wir sind bereits dabei, Position und Größe nach dem Zufallsprinzip zu ordnen, und wir können auch zufällige Farben verwenden Wir werden sehen, wie das auf strukturierte Weise gemacht werden kann. Wir können damit beginnen, dem zerstörten Objekt Farbeigenschaften hinzuzufügen zerstörten Objekt Farbeigenschaften Ich deklariere zwei neue Variablen namens fill und stroke. Im Moment können wir das Feld auf Blau und den Strich auf Schwarz setzen. Dann strukturieren wir diese Eigenschaften und setzen den Konturstil Context Dot auf Kontur und Duplizieren der Linie, ändern ihn in den Füllstil und stellen ihn auf Füllung ein. Nach dem Aufruf von Context Dot Stroke nennen wir dann Context Dot Fill. Und jetzt haben wir ein paar blaue Trupp-Rechtecke. Wir ordnen Positionen und Größen nach dem Zufallsprinzip an. Warum ordnen wir also nicht auch die Farben nach dem Zufallsprinzip an? Die Eigenschaft des Feldstils außer benannten Farbe wie der, die wir jetzt verwenden Dies kann aber auch in Hex-Form sein. Kann auch RB-fest sein, z. B. RGB 002 55 oder das RGBA-Präfix wobei der letzte Wert die Opazität 0-1 ist Diese Zahlen lassen sich leichter nach dem Zufallsprinzip sortieren als Hexadezimalzahlen oder Namen. Bleiben wir also bei diesem Formular. Zuerst müssen wir die Zeichenfolge von einzelnen Codes in Beptis ändern , damit wir darin eine Variable verwenden können Jetzt können wir sagen, wir wollen, dass ein blauer GBA-Kanal eine Zufallszahl von 0 bis Der natürliche nächste Schritt besteht darin, auch den roten und den grünen Kanal nach dem Zufallsprinzip zu ordnen Also lass uns das machen. Wir können denselben Ausdruck kopieren und zweimal einfügen, wobei wir darauf achten müssen, dass das Koma dazwischen bleibt. Jetzt sind Farben ein subjektives Thema. Das Ergebnis mag Ihnen gefallen, aber meiner Meinung nach sieht es nicht gut aus. Ich glaube nicht, dass reiner Zufall funktioniert, wenn es um Farben geht Hier gibt es 16 Millionen mögliche Werte, und das ist zu viel Auswahl Es ist besser, diese Optionen auf eine Handvoll Farben zu reduzieren , die uns gefallen und von denen wir glauben, dass sie gut zusammenpassen. Es gibt ein paar berühmte Farbpads, die wir verwenden können, wie Riso und Colors Dies ist eine Liste der beliebtesten Farben für Rizo-Grafikdrucker Die Liste, die wir hier sehen, ist auch in JSofma verfügbar , was perfekt für uns ist Es ist als Bibliothek namens Rizo Colors verpackt und wir können es mit MPM installieren Genau wie bei anderen Bibliotheken gilt auch hier: Wenn Sie ein Online-Editor sind, gehen Sie zum Abhängigkeitsfeld und geben Sie Rizo Wenn Sie das Terminal verwenden, drücken Sie Strg C, um den Vorgang zu beenden, und geben Sie PMI Rizo Drücken Sie dann die Pfeiltaste nach oben, um unsere Skizze erneut auszuführen. Jetzt können wir Limonadenfarben aus Limonadenfarben importieren Um eine zufällige Farbe aus dieser Liste auszuwählen, können wir eine weitere Funktion aus dem Zufallsmodell namens Pick verwenden dem Zufallsmodell namens Sie wählt einen zufälligen Wert aus einem bestimmten Array aus. Füllung entspricht also einem zufälligen Punkt P, also Farben, und den gleichen vier Strichen. Der Rückgabewert ist ein Objekt Wenn wir es also als Feldstil oder Strichstil verwenden wollen , müssen wir das angeben Wir wollen die Hex-Eigenschaft. Sieht das jetzt besser aus? Meiner Meinung nach noch nicht. Wir haben immer noch zu viele Optionen, zu viele Farben prallen aufeinander Wir brauchen eine noch kleinere Untergruppe von Farben. Ich denke, wir wären mit nur drei einverstanden. Also werde ich ein weiteres Array namens Wrecked Colors erstellen und es mit drei zufälligen Riso-Farben füllen es mit drei zufälligen Riso-Farben Anstatt den Feldstil so einzustellen, dass zufällig aus dem gesamten Riso-Farbset ausgewählt wird, setze ich es dann auf Auswahl aus zerstörten Farben. Okay, jetzt denke ich, das sieht langsam gut aus. Wir können den Strich viel dicker machen, damit wir ihn mit der Kontext-Punktlinie richtig sehen können . Entspricht zehn, wir können auch die Hintergrundfarbe ändern. Lassen Sie uns eine neue Variable namens BAG-Farbe erstellen und sie wieder auf den zufälligen Punkt p setzen, wodurch Punkt X neu eingefärbt wird. Und hier verwenden wir statt eines Feldformats Weiß verwenden wir Nun, das ist nicht großartig. Vielleicht sieht es besser aus, wenn wir die Option für die Hintergrundfarbe öffnen und aus dem gesamten Ergebnisfarbsatz auswählen . Das ist besser. Lass uns jetzt ein paar Schatten zeichnen. Wir können eine Eigenschaft des Kontextes zu D verwenden , die als Schattenfarbe bezeichnet wird. Bevor wir fill und stroke aufrufen, legen wir die Schattenfarbe des Kontext-Punkts fest, und im Moment setze ich sie einfach auf Schwarz. Dann den Kontext-Punktschatten von Satz X , den ich auf minus zehn setzen werde , und den Kontext-Punktschatten von Satz Y, der 20 sein wird. Seitdem haben wir Doppelschatten, und das liegt daran, dass sie sowohl für die Füllung als auch für die Kontur gezeichnet werden . Lassen Sie uns also die Schattenfarbe nach der Füllung und vor der Kontur wieder auf Null setzen Das ist ein interessanter Effekt. Wir können die Schatten vielleicht mit einer geringeren Deckkraft etwas weicher machen und LGB A 0.0 0.0 und 0.5 verwenden LGB A 0.0 0.0 Das ist okay. Aber anstatt das gleiche Grau für alle Schatten zu verwenden, möchte ich, dass sie eine etwas dunklere Version der Feldfarbe sind. Mit anderen Worten, ich möchte die Feldfarbe nehmen und ihre Helligkeit oder Leuchtkraft reduzieren. Der beste Weg, das zu tun, besteht darin, die Farbe von LGB in einen anderen Farbraum namens HSL umzuwandeln , was t für Sättigung und Helligkeit steht Diejenigen von Ihnen, die Photoshop oder eine andere Bildbearbeitungssoftware verwenden , sind wahrscheinlich bereits damit vertraut Die Operation zur Konvertierung zwischen RGB und HSL ist nicht die einfachste Aber zum Glück für uns gibt es ein Modell Oma Sketch Rooter, das wir dafür verwenden können Die Methode, die wir jetzt wollen, ist Offset-HSL. Denken Sie daran, dass das COVA-Skizzierwerkzeug bereits vorhanden ist . Wir müssen also nur Farbe angeben, wobei pro Kc der Schrägstrichfarbe des CVA-Skizzenwerkzeugs entspricht CVA-Skizzenwerkzeugs Jetzt können wir eine neue Variable namens Shadow Color deklarieren. Und stellen Sie es auf Color Dot Offset HSL ein. Der erste Parameter ist die Eingabefarbe, die Herbst sein wird Der zweite Wert gibt an, um wie viel wir die Eigenschaft U ausgleichen wollen , die dann Null sein wird, dann die Sättigung der Menge, die ebenfalls Null ist. Und schließlich die Lichteigenschaft , die wir wollen. Wir wollen eine dunklere Version von Fill. Das wird also -20 sein. Um nun die Schattenfarbe zu verwenden, müssen wir den Wert wieder in eine Stilstärke mit einem Farbpunktstil umwandeln , und die Eingabe kann eine beliebige Eigenschaft des resultierenden Farbobjekts sein . Ich werde Shadow Color Dot RGBA verwenden. Wir haben dabei den Alpha-Wert verloren, aber wir können ihn leicht wiederherstellen, indem wir das letzte Element des RGBA-Arrays bearbeiten das letzte Element des RGBA-Arrays und ihn auf 0,5 zurücksetzen Ich überlasse es Ihnen, zu entscheiden, ob Sie Schatten wie diesen oder die einfache Version von 50% Schwarz bevorzugen wie diesen oder die einfache Version von 50% Schwarz Mein Punkt hier war , Ihnen zu zeigen, wie Sie den Farbwert mit der Farb-UTL manipulieren Es ist noch einer für unseren Allzweckgürtel. Ein interessanter Effekt, den ich mit der Skizze ins Spiel gebracht habe, war, einen weiteren Umriss zu zeichnen, einen dünneren, über die bestehende Form. Setzen Sie also die Kontextlinie auf 22, Strichstil auf Schwarz und rufen Sie Stroke erneut auf. Da Sie über Farben sprechen, gibt es ein Konzept weniger, das ich hier vorstellen möchte, und das ist der geplante Modus. In der Canvas-API werden sie als globale Verbundoperation bezeichnet. Der Standardwert ist eine Quelle über, was bedeutet, dass der nächste gezeichnete Befehl oder die Quelle über dem liegt, was bereits im Ziel vorhanden ist. Mit anderen Worten: Was auch immer zuerst abgehoben wird, ist unten, und was danach abgehoben wird, geht nach oben. Einige der möglichen Operationen sind vielleicht denjenigen von Ihnen bekannt, die Bildbearbeitungssoftware wie Overlay verwenden . Verwenden wir es in unserer Skizze. An einer beliebigen Stelle, bevor wir fill aufrufen, setzen wir die globale Verbundoperation mit dem Kontextpunkt auf Overlay Der Umriss der Szene scheint verschwunden zu sein. Bevor wir ihn zeichnen, müssen wir die zusammengesetzte Operation also auf den Quelltext zurücksetzen. Das sieht okay aus, aber ich denke, es würde besser aussehen, wenn wir ein Rechteck mit Überlagerung und andere nur mit einer Volltonfarbe hätten ein Rechteck mit Überlagerung und andere nur mit einer Überlagerung und andere nur mit Wir können also eine neue Eigenschaft für unseren Wrecked namens blend erstellen und ihr einen Wert geben , der davon abhängt, dass eine Zufallszahl größer als 0,5 ist . Ist dies der Fall, wird Overlay oder Source Over zurückgegeben Wir fügen es dem Objekt mit Strukturen innerhalb der Render-Funktion hinzu, und hier verwenden wir Blend statt Overlay Erhöhen wir die Anzahl der Rechtecke auf 40 vergrößern sie mit einem W zwischen 600 und Und jetzt gibt es vielleicht immer noch zu viele Farben. Also werde ich eine dieser Zeilen mit roten Farben löschen und nur zwei behalten. Okay, das gefällt mir besser. Ich hoffe es gefällt dir auch. Falls nicht, können Sie gerne mit den Werten experimentieren, vielleicht die Farbe der Schatten ändern, den Mischmodus ändern, nur um mit einer Skizze zu spielen, und in der nächsten Lektion werden wir das Ganze mit einer Schnittmaske abschließen 27. Schnittmaske erstellen: Mir gefällt das Muster, das durch diese Rechtecke entsteht, aber ich denke, es fehlt etwas, und das ist eine Gelegenheit ein paar weiteren Themen zu befassen Eine Idee, die ich beim Experimentieren mit dieser Skizze hatte , war, dieses Rechteck in eine andere Form zu rahmen Wir können damit beginnen, ein Dreieck zu zeichnen. Am Ende der Renderfunktion, nachdem wir alle Rechtecke gezeichnet haben, starten wir einen neuen Codeblock mit einem Kontextpunkt speichern und einem Kontextpunkt wiederherstellen Wir bewegen den Stift in die Mitte der Leinwand, wobei der Kontext W mal 0,5 und Höhe mal 0,5 übersetzt Dann fangen wir an, eine Form mit dem Kontextpunkt „Pfad beginnen“ zu zeichnen , bewegen wir uns nach oben. Bis X Null und Y -300, dann zeichnen Sie eine Linie bis X 300 und Y 200 und eine weitere Linie bis -300 und Y bis Schließen Sie dann den Pfad, setzen Sie die Linie mit ihm auf Zehn, setzen Sie den Strichstil auf Schwarz und rufen Sie schließlich Stroke auf, um die Form zu zeichnen Und das ist unser großes Dreieck. Lassen Sie uns nun den gesamten Codeblock vor die Schleife verschieben , in der wir die Rechtecke zeichnen Und hier werden wir Context Dot Clip nennen. Alles, was nach einem Clip gezeichnet wird , erscheint innerhalb des Dreiecks. Mit anderen Worten, das Dreieck fungiert als Schnittmaske Die Schnittmaske ist Teil des Zustands des Kontextes. Wenn wir also den Zustand wiederherstellen, verschwindet die Maske In diesem Fall übersetzen wir den Kontext aber auch in die Mitte der Leinwand. Die Rechtecke sind also alle versetzt angeordnet und wir sehen nicht viele davon. Da wir die Maske wollen und den Kontext nicht wiederherstellen können, die einzige Möglichkeit darin, sie zurück zu übersetzen Übersetze im Kontext die Breite mal -0,5 und die Höhe mal 0,5 Okay, jetzt sind wir hier, aber unser Dreieck ist nicht sehr symmetrisch Ich möchte Ihnen eine andere Methode zum Zeichnen zeigen , mit der wir jedes reguläre Polygon mit einer beliebigen Anzahl von Seiten zeichnen können jedes reguläre Polygon mit einer beliebigen Anzahl von Seiten Lassen Sie uns eine neue Funktion namens Draw Polygon deklarieren. Und der Parameter wird ein Objekt mit dem Eigenschaftenkontext sein , Radius mit einem Standardwert von 100 und einer Seite mit einem Standardwert von drei Wenn wir uns nun ein Dreieck vorstellen , das perfekt in den Kreis passt, können wir sagen, dass es den Kreis in drei gleiche Scheiben teilt Der Winkel jeder dieser Scheiben ist der gesamte Umfang geteilt durch die Anzahl der Seiten Sobald wir den Winkel und die Größe der Scheibe kennen, können wir die Kanten des Polygons finden Beginnen wir mit einer Variablen namens Slice. Das ist der mathematische Punkt Pi mal zwei geteilt durch Seiten. Dann beginnen wir eine neue Form mit einem Kontext-Punkt, dem Startpfad, dann der Kontextpunkt, der sich um zwei X, Null und Y minus Radius bewegt. Dann benötigen wir eine Schleife mit vier, die bei einer beginnt und über die Anzahl der Seiten iteriert Hier benötigen wir einen Winkel, der auf I basiert , damit wir eine neue Variable dafür deklarieren können Ich nenne es Theta und setze es auf I Time Slice. Dann können wir die Linien unserer Form mit einem Kontext-Punkt, Linie zwei X wird der Kosinus des Hetats-Radius und der Y-Sinus des Hetats-Radius Wenn Sie sich an den Zeiger der Uhr erinnern , den wir in der ersten Lektion gesehen haben, ist das Prinzip hier dasselbe. Dann schließen wir außerhalb der Schleife den Pfad. Jetzt können wir hier unseren Draw Cod Sap durch diese neue Funktion ersetzen . Zeichnen Sie also ein Polygon und wir übergeben es im Kontext. Radius, sagen wir, 400 und Größe drei. Nun, etwas stimmt nicht, und das liegt daran, dass ich beschlossen habe, die Form von oben zu zeichnen , und das ist nicht die Position von Null Grad. Wie Sie sich vielleicht erinnern, ist Null Grad um 3:00 Uhr aber ich möchte die 12:00 Uhr als Startpunkt verwenden Was wir tun müssen, ist 90 Grad von Heta oder minus Mathepunkt Pi mal 0,5 zu subtrahieren . Das ist besser. Versuchen wir es mit fünf Seiten. Oder sechs. Jede Zahl größer als drei würde hier funktionieren. Nun, das gefällt mir nicht. Der Strich des Polygons erscheint hinter dem Rechteck, also muss ich den Clip und die Maske von der Polygonkontur trennen , was bedeutet, dass ich draw polygon zweimal aufrufen muss, einmal mit dem Kontext Dot Clip und einmal mit dem Kontext Dot Stroke, da beide Polygone dieselben Eigenschaften haben werden Wir haben bereits gelernt, dass der beste Weg, mit diesem Szenario umzugehen, darin besteht, die Eigenschaften in einem Objekt zu speichern Also lasst uns hier oben ein neues Objekt namens mask deklarieren . Bei den Eigenschaften handelt es sich um den Radius , den ich auf 40% der verschweißten Fläche setzen möchte, und dann auf die Seiten, was drei sein wird Und wenn Sie ein Objekt erstellen, warum nicht auch X- und Y-Eigenschaften speichern Also X wurde mal 0,5 verheiratet und Y-Höhe mal 0,5. Bevor wir nun das Dreieck zeichnen, können wir in den Maskenpunkt X und den Maskenpunkt Y übersetzen und dann das Polygon zeichnen, indem wir den Maskenpunktradius und die Maskenpunktgröße passieren Maskenpunktradius und die Maskenpunktgröße Und dann brauchen wir nur noch den Call to Context Dot Clip. Diese andere Zeile können wir abschneiden und wir werden sie an das Ende der Funktion verschieben. Kurz bevor wir das innerhalb der rechteckigen Schleife machen, können wir das Maskenobjekt auch für die zweite Übersetzung verwenden . Diesmal minus Maskenpunkt x und minus Maskenpunkt. Jetzt, am Ende der Funktion hinter der Schleife, zeichnen wir den Umriss des Polygons praktischen Gründen beginnen wir mit dem Kontext Punkt speichern und Kontext Punkt wiederherstellen und übersetzen dann den Kontext erneut Punkt G und Punkt Y übereinstimmt. Fügen Sie die Zeilen ein, die wir von oben kopiert haben, und hier können wir auch den Aufruf zum Zeichnen eines Polygons kopieren Und da ist unsere Gliederung. jetzt vor den Rechtecken erscheint, Dreieck, das jetzt vor den Rechtecken erscheint, ist nicht wirklich vertikal zentriert, und es gibt ein paar Möglichkeiten, das zu korrigieren Aber ich denke, wir können mit einem schnellen Cheat durchkommen und einfach die Y-Eigenschaft der Maske auf hoch mal 0,58 ändern Vielleicht könnte die Konturfarbe auch von rechteckigen Farben stammen und sie könnte doppelt so dick sein wie die Linienstärke 20, und wir könnten sogar einen anderen Mischmodus verwenden Dieses Mal werde ich mich für die globale Verbundoperation entscheiden . Farbe Vogel. Bei diesem Mischmodus wäre es meiner Meinung nach besser, wenn sich die Konturen innerhalb des Dreiecks befinden würden , damit wir den Radius so ändern können , dass der Punktradius maskiert wird. Minus Kontext-Punktlinie W. Okay, das ergibt einige interessante Variationen. Dies ist unser Sketch, aber ich möchte noch ein weiteres Thema behandeln, bevor wir diesen schließen, nämlich Random Seed. 28. Erstelle einen zufälligen Samen: Sie erinnern sich vielleicht aus unserer Lektion über Verteilung, dass ich gesagt habe, dass es zwei Möglichkeiten gibt , Zufallswerte zu kontrollieren. Die erste Möglichkeit bestand darin, sie einmal zu erstellen und zu speichern. Jetzt schauen wir uns den zweiten an, der in einem zufälligen Seed gespeichert ist . Das Konzept hier ist, dass, sobald Sie Ihrer Zufallsfunktion einen Startwert zugewiesen haben, alle nachfolgenden Aufrufe von random immer dieselbe Wertesequenz zurückgeben. Es gibt eine Methode namens set SED parentheses. Das Zufallsmodell von Canvas Sketch UTL verwenden wir hier in der ersten Zeile der Ich setze meinen Startwert auf 555, protokolliere dann dreimal hintereinander einen zufälligen Wert in der Konsole und öffne die Konsole. Die Zahl, die ich hier sehe, sollte die gleiche Zahl sein, die Sie auf Ihrem Computer sehen, unabhängig davon, ob Sie sich auf einem PC oder einem MC befinden und die gleiche Zahl sein, die Sie auf Ihrem Computer sehen, unabhängig davon, ob Sie sich auf einem PC oder einem MC befinden das Offline-Setup oder das Online-Setup verwenden Wenn Ihr Sketch dieselbe Anzahl an zufälligen Aufrufen hat wie meiner, und zwar in derselben Reihenfolge, sollte auch exakt dieselbe visuelle Ausgabe angezeigt werden. Und der Samen muss keine Zahl sein. Es könnte Stärke sein. Versuchen wir es mit einer Schraube. Selbst wenn wir die Seite aktualisieren, ist das Ergebnis immer noch dasselbe. Wenn Sie also den Samen kennen, können Sie bei jeder Ausführung des Codes dieselbe Skizze konstant reproduzieren des Codes dieselbe Skizze konstant jeder Ausführung Wenn Sie dennoch zufällige Variationen erhalten möchten, Sie beim Aktualisieren der Seite den können Sie beim Aktualisieren der Seite den Ausgangswert selbst als Zufallswert festlegen Lassen Sie uns eine Variable namens SID geheim halten und sie jetzt auf date dot setzen Dies ist die aktuelle Zeit in Millisekunden. Diese Zahl wird also immer anders sein. Eine Alternative besteht darin, eine andere Methode von Canvas Sketch Uto zu verwenden , die als Get Random Set bezeichnet wird. Wenn Sie das gewünschte Ergebnis gefunden haben, können Sie den Wert des Sitzes protokollieren und ihn irgendwo aufschreiben. Oder wenn Sie das Offline-Setup verwenden, können Sie den Namen der Datei ändern, die gespeichert wird , wenn Sie Strg S drücken. Gehen Sie zu der Einstellung und verwenden Sie den Namen seed. Klicken Sie auf den Browser, drücken Sie Strg S oder Befehl S, um die Skizze zu speichern Anschließend können Sie den Startwert aus dem Dateinamen kopieren. Fügen Sie ihn hier ein, um exakt dieselbe Skizzenfolie neu zu erstellen. Das ist es für unsere erste Skizze. Das Ergebnis ist immer noch recht einfach, aber ich hoffe, Sie stimmen zu, dass wir dadurch viele Themen behandeln konnten , die in Zukunft nützlich sein können, wenn Sie etwas erstellen, das völlig anders aussieht. Und als Nächstes, hör zu, werden wir mit einer neuen Skizze beginnen. 29. Erstelle Qudratische Kurven: Die vorherige Skizze hat Spaß gemacht. Wir haben damit ziemlich viel gelernt, aber jetzt werden wir etwas anderes machen und eine neue Technik lernen. Wie zeichnet man dynamische Kurven. Zuallererst müssen wir eine neue Skizze beginnen. Wenn Sie sich in Stack-Builds befinden oder Sandbox aufrufen, einfach die Standardvorlage, wie Sie es beim letzten Mal getan haben Und wenn Sie Dinge vom Terminal aus ausführen, drücken Sie Strg C, um den aktuellen Vorgang zu beenden, und geben Sie Canvas Sketch Dash Curves, Intro und dann Dash New Öffnen Sie dann die JavaScript-Datei im Editor und ändern Sie die Dimension 1080 mal 1080, genau wie wir es in unserer ersten Skizze getan haben Bevor wir mit der Arbeit an den Grafiken beginnen, die wir erstellen möchten, möchte ich dieses Intro verwenden, um über Kurven im Allgemeinen zu sprechen Wir können damit beginnen, eine gerade Linie zu zeichnen. Wir geben den Kontext Punkt Begin Path ein. Dann den Kontextpunkt um zwei verschieben. Ich werde noch keine Kontext-Transformation verwenden. Behalten wir die Koordinate ab 00 oben links bei. Also Kontext-Punkt verschiebe zwei, X 200 und Y 540. Dann Kontext-Punkt Linie zwei, 880 und immer noch Y 540. Und schließlich kontextualisieren Sie den Schlaganfall. Hier beginnen wir also mit einer neuen Form, einen virtuellen Stift an diesen Punkt bewegt und dann der Capace-API mitgeteilt, dass wir das Pixel von hier nach hier in einer geraden Linie malen wollen das Pixel von hier nach hier in einer geraden Linie malen Die Funktion, die berechnet, welche Pixel gemalt werden müssen, ist uns verborgen Sie ist Teil der Browser-Implementierung der API. Zeile zwei ist also eine praktische Methode. Um Kurven zu zeichnen, haben wir zwei dieser Methoden, von Kurve zu Kurve zwei unquadratisch Bei der Bezier-Kurve müssen wir Punkte kontrollieren, müssen wir Punkte kontrollieren, und bei der quadratischen Wir werden die quadratische Kurve von demselben Punkt aus zeichnen , an dem wir zuvor angefangen haben, Wir werden den Kontext Punkt Quadric Curve Two eingeben. Die ersten beiden Argumente sind X und Y des Kontrollpunkts, und die letzten beiden sind X und Y des Encor-Punkts oder des Endpunkts Wir können den Endpunkt dort belassen, wo er bei 800 8.540 war. Nehmen wir nun an, wir wollen hier einen Punkt kontrollieren, von dem ich sagen würde, dass er bei X 400 und Y 300 liegt Jetzt haben wir eine Linie, die zu diesem Bereich hin übergeht. Wir können uns hier einen Punkt vorstellen. Wir sollten diese Punkte eigentlich zeichnen, damit wir sie sehen können. Und wir könnten ihnen verschiedene Farben geben , damit wir wissen, welche Kontrollpunkte und welche Ankerpunkte sind. Um den Code übersichtlich zu halten, können wir den Punkt als separate Entität behandeln und eine Klasse dafür erstellen Am Ende der Datei geben wir class point ein, und im Konstruktor übergeben wir ein Objekt mit den drei Eigenschaften X, Y und control, die standardmäßig fallen Dann speichern wir diese Werte in Zahleneigenschaften, wobei dieser Punkt X gleich X, dieser Punkt Y gleich Y ist. Und dieses Punktsteuerelement entspricht Kontrolle Wir wissen, dass wir die Punkte zeichnen wollen, also können wir bereits eine Methode namens draw beenden , die einen einzigen Parameter benötigt, nämlich den Kontext, in den wir hineingezogen werden Wie üblich beginnen wir mit dem Context Dot Save und Context Dot Restore. Dann übersetzen wir den Kontext diesen Punkt X und diesen Punkt Y, der Punkt kann als Kreis gezeichnet werden, also der Kontextpunkt beginnt mit dem Pfad und dann mit dem Kontextpunktbogen und wir sind schon bei X und Y, weil der Kontext nicht übersetzt wird, also ist das Null, Null. Der Radius kann zehn sein, der Anfangswinkel Null und der Endwinkel Pi mal zwei, dann die Kontext-Punktfüllung. Und wir können die Eigenschaftensteuerung verwenden , um den Feldstil festzulegen. Der Feldstil entspricht also diesem Punktsteuerelement. Wenn es wahr ist, verwende Rot oder Schwarz. Wir werden in einer Minute sehen, was das bewirkt. Zuerst müssen wir unsere Punkteklasse verwenden. also hier oben in der Sketch-Funktion ein Array namens Punkte ausschneiden, Lassen Sie uns also hier oben in der Sketch-Funktion ein Array namens Punkte ausschneiden, das bereits mit drei Punkten gefüllt ist das bereits mit drei Punkten gefüllt Neuer Punkt X 200 Y 540, nächster Punkt X 400, Y 300 Und diese Zeitkontrolle ist wahr. Und der letzte Punkt X 880 und Y 540. Jetzt können wir diese fest codierten Werte durch die Punkte in unserem Array austauschen . Zeigen Sie zuerst auf die eckige Klammer Null X, dann auf 0,0 Y. Hier Punkte, ein X, Punkte, ein Y, und dasselbe gilt auch für Punkte in eckigen Klammern Um schließlich alle Punkte zu zeichnen, können wir für jeden Punkt Punkt verwenden und die Variable Punkt nennen Dann rufen wir innerhalb der Funktion point dot draw and pass im Kontext auf. Jetzt können wir deutlich sehen, was der Kontrollpunkt tut. können gerne verschiedene Koordinaten ausprobieren , um zu sehen, wie dieser Effekt zustande kommt. Dies ist nicht das visuelle Ergebnis, nach dem wir streben. Wir arbeiten gerade an einer neuen Technik. Wir werden bald zu unserem Bild kommen. Aber ich möchte diese Gelegenheit nutzen, um über etwas anderes zu sprechen, das hier Sinn macht, auch wenn wir es nicht in unserer endgültigen Skizze verwenden werden. Ich spreche von der Cursorinteraktion , genau das wird in der nächsten Lektion behandelt. 30. Erstelle eine Cursor-Interaktion: Schauen wir uns an, wie der Cursor mit einem Element in unserer Skizze interagiert. Mausklick ist ein Ereignis, bei dem der Computer nicht weiß, wann Sie die Maustaste oder das Trackpad drücken werden , aber er kann darauf reagieren, wenn es passiert Es gibt Dutzende von Arten von Ereignissen, und der Browser kennt sie alle, aber er gibt diese Informationen nicht an Sketch weiter , es sei denn, wir fragen auch Bevor wir also auf irgendeine Art von Ereignis reagieren können, müssen wir einen Event-Listener hinzufügen Diese Funktion teilt dem Browser unser Code ein Ereignis abhören möchte und dass eine bestimmte Funktion Code sein soll, wenn es passiert Ein Event-Listener kann dem gesamten Browserfenster oder einem bestimmten Element hinzugefügt werden dem gesamten Browserfenster oder einem bestimmten Element Wenn wir zum Beispiel eine Schaltfläche hätten, könnten wir den Button-Punkt Ed Event Listener wählen Das ist nicht unser Fall. Wir haben nur ein einziges Element auf der Seite, und das ist das Canvas-Element. Das wird also das Ziel unseres Zuhörers sein. Das Ereignis, an dem wir interessiert sind, heißt Mouse Down, und die Funktion, die wir aufrufen werden, wird auf Mouse Down ausgeführt, was wir gleich deklarieren werden. Beachten Sie, dass wir nicht einfach Zuhörer zu diesem oder diesem Kreis hinzufügen können Zuhörer zu diesem oder diesem Kreis Dies sind keine unabhängigen Entitäten soweit es den Browser betrifft Der Browser kennt nur ein Element auf der Seite, und das ist die Pixelkarte. Was wir auf dieser Karte zeichnen, liegt bei uns. Wenn wir also wollen, dass jeder Punkt auf die Cursorinteraktion reagiert, müssen wir etwas mehr Code schreiben. Beginnen wir mit der Deklaration der Funktion bei gedrückter Maus , die wir im Listener erwähnt haben Sie erhält einen Parameter , nämlich das Event-Objekt. Wir nennen es einfach E. Ich möchte immer dann, wenn die Maus gedrückt ist , diesen Punkt verschieben können. Und wenn die Maus losgelassen wird, möchte ich mit dem Ziehen aufhören Dafür benötigen wir zwei weitere Zuhörer, die wir hier deklarieren können Dies kann zu den gesamten Browserfenstern hinzugefügt werden , da wir zu diesem Zeitpunkt bereits wissen, dass die Maus gedrückt wurde, während sie sich über der Leinwand Also Fensterpunkt d sogar Listener bei Mausbewegung, was die Funktion ist, die wir gerade erstellen, und fenstergepunkteter Event-Listener Maus hoch und Maus hoch, lassen Sie uns diese Funktion bei Mausbewegung deklarieren, die ebenfalls ein Mausereignis empfängt, und bei geöffneter Maus, für die keine Parameter benötigt Die Kernfunktionalität wird intern bei gedrückter Maus und Mausbewegung ausgeführt. Aber wir können es bereits bei Mouse up implementieren , denn das Einzige, was wir hier brauchen , ist, den Listener zu entfernen, wir fügen ihn bei gedrückter Maus Nun, dieses Muster diesen Listener bei gedrückter Maus hinzuzufügen und ihn bei gedrückter Maus zu entfernen, ist nicht unbedingt notwendig Sie könnten einfach alle drei Listener in der Sketch-Funktion hinzufügen und alles würde gut funktionieren Mir gefällt die Art und Weise, wie wir es hier gemacht haben, denn selbst wenn Sie den Cursor die ganze Zeit bewegen, fasziniert die Skizze den Bowe Move-Zuhörer Sofern die Maus nicht gedrückt ist, ist das eine kleine Optimierung, aber wenn sie nützlich sein kann, also nutze ich diese Gelegenheit um Ihnen davon zu erzählen Jetzt endlich ein Einblick in die Mausbewegung, wir müssen herausfinden, wo sich der Cursor befindet. Das Event-Objekt wird uns das sagen. Lassen Sie uns in der Konsole E von Satz X und E Punkt von Satz Y protokollieren. Wechseln Sie dann zum Browser, öffnen Sie die Konsole, klicken Sie und ziehen Sie die Maus herum Diese Werte sind in Pixeln angegeben und werden bereits durch die Position unseres Canvas-Elements auf der Seite verschoben Wenn Sie hier oben links in unserer Skizze nach oben gehen, sehen wir eine Zahl nahe Null, Null, und wenn wir nach unten rechts gehen, sollten wir eine Zahl in der Nähe von 1080 mal 1080 sehen, aber wir müssen trotzdem nicht ein paar Anpassungen vornehmen. Je nachdem, wie groß Ihre Bildschirmauflösung ist, könnten Sie an dieser Ecke tatsächlich 1080 mal 1080 sehen. Ich nicht, weil meine Auflösung nicht hoch genug ist. Standardmäßig rezitiert die Skizze von Canvas die Leinwand, sodass wir sie in ihrer Gesamtheit sehen können Selbst wenn Sie eine 4.000-Pixel-Skizze erstellt haben, sehen wir immer noch die gesamte Skizze in diesem Bereich. Diese Skalierung müssen wir berücksichtigen, wenn wir versuchen herauszufinden, wo der Cursor die Gruppen X und Y verwendet. Die Mathematik ist einfach Wir benötigen lediglich einen Verweis auf das Canvas-Element, auf das wir innerhalb dieser Funktion zugreifen können Ich werde eine neue Variable namens Canvas deklarieren und sie auf den Canvas-Parameter setzen, den wir in der Sketch-Funktion erhalten. Jetzt können wir innerhalb der Mausbewegung eine Umkehrung verwenden, um die proportionalen X- und Y-Koordinaten zu berechnen Fangen wir mit X an. Die Kosten X entsprechen der Klammer E, dem Punktversatz X geteilt durch die Punktversatzbreite von Cvas. Die Offsetbreite ist die tatsächliche Breite des Canvas-Elements auf dem Bildschirm Offset X geteilt durch Offsetbreite ergibt also eine Zahl 0-1. Dann müssen wir nur noch die binominale Breite der Leinwand multiplizieren , was Canvas, Punktbreite ist Duplizieren Sie nun die Linie und machen Sie dasselbe für Y, ersetzen Sie sie durch die Höhe Loggen wir X und Y, oben links, bleiben eine Zahl nahe Null, Null und zeigen jetzt unten rechts endlich eine Zahl in der Nähe von 1080 mal 108. Diese kleine Formel gibt uns Proportionen der X- und Y-Werte, unabhängig davon, wo sich die Leinwand auf dem Bildschirm befindet oder wie groß sie ist. Wie können wir nun feststellen, ob der Cursor über einem Punkt schwebt oder nicht? Wie gesagt, der Browser weiß nicht dass es hier einen Kreis gibt, aber wir wissen Also müssen wir es selbst berechnen. Wir müssen Punkt für Punkt überprüfen und einen Treffertest durchführen der auf der Entfernung zwischen dem Cursor und der Position des Punkts basiert . Fügen wir unserer Punktklasse eine neue Funktion namens Hit Test hinzu, die zwei Parameter, X und Y, benötigt. Hier brauchen wir die Hilfe von Pythagoras Lassen Sie uns die Formel kurz zusammenfassen. Nimm zwei Punkte auf einer Ebene mit zwei D, wobei der Abstand zwischen den Punkten DX und DY Wir erhalten ein rechtwinkliges Dreieck, und der tatsächliche Abstand zwischen den Punkten entspricht der Hypotene des Die Formel zur Ermittlung der Hypotene ist die Quadratwurzel der Summe der Quadrate der Seiten Das ist eigentlich sehr einfach in Code zu schreiben. Wir haben dx, das ist dieser Punkt x minus X, also das Delta zwischen dem X, das übergeben wurde, und dem X des Punktes, dasselbe gilt für DY. Und dann ist die tatsächliche Entfernung, die ich DD nenne , eine mathematische Punkt-Quadratwurzel. X mal X plus Tag mal Tag. Test „ Wahr“ oder „Fällt“ zurück Je nachdem, ob die Entfernung kleiner als etwas ist, gibt der . Wir wissen, dass der Radius unseres Kreises zehn ist, also mache ich den Trefferbereich etwas größer und gebe ihn zurück, wenn DD kleiner als 20 ist. Jetzt können wir Hit test inside mit gedrückter Maus verwenden. Wir benötigen auch hier die eingestellte X - und Y-Position. Kopieren Sie sie einfach von einer Mausbewegung und fügen Sie sie hier ein. Gehen von einer Mausbewegung und fügen Sie sie hier dann durch alle Punkte mit einem Punkt für jeden Punkt und erstellen Sie eine neue Eigenschaft dem Namen Ist Drache, die dem Punktpunkttrefftext X und Y entspricht. Diese neue Eigenschaft speichert einen Wert , den wir bei der Mausbewegung verwenden können Falls Ihnen der Name Drache nicht gefällt, können Sie auch etwas anderes verwenden, z. drücken Sie ihn nach Belieben nach unten oder drücken Sie Nun zur Mausbewegung, wir benötigen eine weitere Schleife, also auf jeden Punkt zeigen, und wenn der Punkt ein Drache ist, wollen wir die Punktposition auf die Cursorposition setzen. Punkt X ist gleich X und Punkt Y gleich Y. Nur noch zwei Dinge, bevor wir das in Aktion sehen können, benötigen wir eine animierte Skizze In der Einstellung fügen wir also ein animiertes T hinzu, und die Punktvariable muss in der gesamten Skizze sichtbar sein Also müssen wir es hier oben deklarieren. Jetzt können wir auf unsere Punkte klicken und die quadratische Kurve im Handumdrehen ändern Wir befinden uns immer noch in einer Lektion über die Kurven, aber lassen Sie uns unsere Einführung zur Cursorinteraktion zusammenfassen unsere Einführung zur Cursorinteraktion Wann immer Sie eine Mausinteraktion in Ihrer Skizze wünschen, müssen Sie zuerst Ereignis-Listener hinzufügen, die Event-Handler oder die Funktionen deklarieren, die aufgerufen werden, wenn das Berechnen Sie die korrekte Position des Cursors, orientieren Sie sich an der Skala der Leinwand und machen Sie dann mit dieser Position, was Sie benötigen, sei es, um mit der Maus zu zeichnen oder auf eine Form zu klicken, wie wir es hier getan haben Cursorinteraktion wird uns auch in der nächsten Lektion nützlich sein, in der wir weiter etwas über Fluch lernen werden. 31. Mehrere Punkte erstellen: Das ist immer noch nicht unsere Hauptskizze. Es gibt noch einen weiteren Aspekt, den ich behandeln möchte, und es ist einfacher, ihn isoliert so zu erklären. Wir werden unsere Bilder in der nächsten Lektion bekommen. In diesem Fall werden wir uns mit nahtlosen Kurven befassen. Fügen wir unserem Array zwei weitere Punkte hinzu. Wir können dieses Steuerelement jetzt loswerden, dann die letzte Zeile duplizieren und X auf 600 und Y auf 700 ändern. Ein weiteres Duplikat, X 640 und Y 900. Jetzt können wir eine weitere Kurve zeichnen, indem wir diese Linie duplizieren und die Würfel auf drei und vier ändern Wir könnten das sogar so umschreiben , dass es mit einer beliebigen Anzahl von Punkten funktioniert , anstatt die Indizes von Hand einzugeben Wir machen das mit einer Vierer-Schleife, wobei ich bei eins beginne, bis zur Punktlänge hochgehe und bei jeder Iteration um zwei erhöht Dann nehmen wir nur eine dieser Linien und reihen die Quadrac-Kurve auf I Und ich plus eins, wir müssen natürlich zu nichts Null hinzufügen Dies dient nur dazu, den Code symmetrischer und vielleicht lesbarer Das Ergebnis ist dasselbe, aber jetzt können wir unserem Array mehr Punkte hinzufügen, wenn wir wollen Bei fünf Punkten ist es ziemlich klar, dass wir zwei Kurven zeichnen und keine einzige Kurve. Was wäre, wenn wir mit all diesen Punkten eine einzige nahtlose Kurve zeichnen wollten ? Dafür gibt es eine Technik, die ich vor langer Zeit von einem Künstler namens Eric Nazi gelernt habe , der seine Kunst mit Code kreiert und viele Kurven verwendet. Die Technik beinhaltet Mittelpunkte. Wir müssen uns all diese als Kontrollpunkte vorstellen. Die Ankerpunkte werden sich in der Mitte von zwei aufeinanderfolgenden Punkten befinden. Es wird sinnvoller sein, wenn wir es sehen. Also müssen wir zuerst den Code schreiben. Versuchen wir, gerade Linien zwischen den Punkten zu zeichnen. Wir können diesen Codeblock duplizieren , weil er ähnlich sein wird. Statt quadratischer Kurve zwei verwenden wir Zeile zwei mit nur X und Y. Ändern Sie das Inkrement auf Eins oder nur I plus Plus, was dasselbe ist, und setzen Sie dann den Strichstil auf 999, was hellgrau ist Lassen Sie uns die Kurven zunächst auskommentieren. Es ist jetzt vielleicht etwas einfacher, sich vorzustellen der Punkt in der Mitte dass der Punkt in der Mitte dieser Linie der erste Anker ist. Dies ist der Kontrollpunkt und die Mitte der nächsten Linie ist der nächste Ankerpunkt. Lassen Sie uns diese Mittelpunkte zeichnen. Wir beginnen neu für die Schleife bis zur Punktlänge minus eins. Wir wollen zwei Variablen. Eine für den aktuellen Punkt ist Index I plus Null und eine für den nächsten Punkt , der Index I plus eins ist. Für den Mittelpunkt können wir auch zwei Variablen verwenden. Ich beginne mit der X-Position und nenne sie X. Es ist das aktuelle X plus die Differenz zwischen dem nächsten X und dem aktuellen X geteilt durch zwei oder multipliziert mit 0,5 Das ist die aktuelle Position plus Hälfte der Entfernung zum nächsten Punkt Duplizieren Sie diese Linie und tauschen Sie X durch Y. Jetzt können wir diesen Mittelpunkt mit dem Anfangspfad, dann den Bogen X und Y zeichnen , ihm einen Radius von fünf geben und dann mit dem Winkel Null beginnen und mit dem Winkel Pi mal zwei enden Lassen Sie uns den Feldstil auf Blau setzen und fill aufrufen. Es ist etwas einfacher, sich vorzustellen, was wir jetzt mit den Kurven machen werden, also lasst uns sie zeichnen. Wir können dieselbe Schleife verwenden und vor der Schleife eine neue Form mit dem Kontextpunkt Startpfad vor der Schleife eine neue Form beginnen. Wir können diesen Mittelpunkt auskommentieren nur um uns auf die Kurve zu konzentrieren Kontext-Punkt, quadratische Kurve zwei. Der Kontrollpunkt wird das aktuelle X und Y sein, und der Ankerpunkt wird X und Y sein. Nach der Schleife nennen wir Context Dot Stroke, aber davor können wir die Linie mit ihr zu weit setzen und den Strichstil auf Blau setzen Jetzt sehen wir eine nahtlose Kurve, die alle unsere Punkte verwendet. Die Kurve verläuft nicht durch die Punkte, sondern verwendet sie als Kontrollpunkte. Die erste beginnt als gerade Linie vor der Kurve, aber das können wir mit einfachen Bedingungen korrigieren Wenn I Null ist, verschiebt der Kontext entweder zwei, X und Y, oder er hat die Kurve bestimmt Jetzt verhalten sich alle Punkte gleich falls wir wollen, dass der erste und der letzte Punkt Anker sind Wir können unsere Bedingungen ändern, um dem Rechnung zu tragen. Wenn I Null ist, verschiebe zwei Kurvenpunkte X und Kurvenpunkt Y. Dadurch beginnt die Kurve am ersten Punkt und ist etwas länger als der andere Das Gleiche können wir für die letzte Punktbreite tun. Andernfalls, wenn I gleich der Punktlänge minus zwei ist, Kontext-Punkt, quadratische Kurve zwei, Curd-Punkt G, Cut Y, nächster Punkt g und Nxdty Nxdty Dies ist eine ziemlich einfache Technik, die es uns ermöglicht, Kurven mit einer beliebigen Anzahl von Punkten zu zeichnen Tatsächlich können wir leicht weitere Punkte hinzufügen , um das in Aktion zu sehen. Scrollen wir nach unten zu unserer Funktion, die am weitesten unten steht. Vor dem Loop erstellen wir eine neue Variable namens hit und setzen sie auf folds. Dann fügen wir die Bedingung I hit is still folds hinzu, und wenn Point ein Drache ist, das heißt, wenn die Zeile darüber den Wert true zurückgibt Hit dann auf True setzt. Dadurch erfahren wir, ob ein Punkt am meisten unten getroffen wurde. Falls nichts getroffen wurde, erstellen wir einen neuen Punkt an der Cursorposition. Wenn also kein Treffer auf Punkt drückt, neuer Punkt, X und Y zeigt. Wenn wir jetzt auf einen Punkt klicken, können wir ihn immer noch wie zuvor ziehen Wenn wir jedoch außerhalb eines beliebigen Punktes klicken , erstellen wir einen neuen So können wir uns umklicken und den Fluch immer weiter verlängern. Jetzt wissen wir genug über Curve, um mit ihnen zu arbeiten. Sie können diese Enter-Skizze als Referenz sowohl für Mausinteraktionen als auch für Mehrpunktkurven verwenden, nur für den Fall, dass Sie in Zukunft eine dieser Techniken benötigen in Zukunft eine dieser Techniken 32. Erfahre mehr über die Erstellung von Rastern: Hier werden wir das anwenden , was wir über Kurven gelernt haben. Wir werden ein Punktraster erstellen und Kurven zwischen ihnen zeichnen. Lassen Sie uns die Kurven als separate Skizze belassen und eine neue erstellen. Wenn Sie den Online-Editor verwenden, erstellen Sie einfach eine weitere Kopie der Standardvorlage. Wenn Sie das Terminal verwenden, drücken Sie Strg C, um den letzten Vorgang zu beenden , und geben Sie dann Canvas, Sketch, Sketch Curves und New ein. Öffnen Sie die Kurvenskizzierdatei im Editor und ändern Sie wie gewohnt die Abmessung 1080 mal 1080. Wie gesagt, wir werden ein Punktraster erstellen, und wir können weitermachen, indem wir zunächst die Punktklasse kopieren. Wir haben in den Kurven eine Intro-Skizze erstellt. Kopieren Sie einfach die gesamte Klasse und fügen Sie sie hier am Ende der Datei Wir können es jetzt einfacher machen. Wir benötigen die Treffertest-Funktion nicht mehr und wir benötigen die Eigenschaft control nicht mehr. Wählen Sie für den Feldstil eine beliebige Farbe aus. Ich entscheide mich für Rot. Jetzt gehen wir zur Skizzierfunktion und beginnen mit der Definition des Rasters. Wir werden ein paar Variablen benötigen. Die ersten beiden sind die Anzahl der Spalten und Zeilen im Raster. Aufrufe sind also gleich 12 und Zeilen gleich sechs. Es ist auch hilfreich, die Gesamtzahl der Zellen zu speichern, bei der sich um Calt-Zeilen handelt Als Nächstes benötigen wir zwei weitere Variablen für die Breite und Höhe des Rasters Die Rasterbreite oder GW entspricht der Breite der Leinwand mal 0,8, was 80% der breitesten Fläche der Leinwand bedeutet GH wird 80% der Höhe ausmachen. Wir haben diese Immobilie noch nicht verheiratet und groß, aber wir wissen, dass sie verfügbar sind Sie werden auch an die Sketch-Funktion übergeben, sodass wir sie nur deklarieren müssen Sie als Nächstes die Dimension jeder Zelle ist die bewaldete Zelle oder CW die Breite des Rasters geteilt durch die Anzahl der Spalten, und CH ist die Höhe des Rasters geteilt durch die Wir können auch die Verschmelzung um das Gitter herum finden. Die Verschmelzung auf der X-Achse ist der Unterschied zwischen den Breiten der Leinwand und den Breiten des Rasters Durch zwei geteilt, und das Gleiche gilt für die Verschmelzung auf der Y-Achse. Dies sind alles Eigenschaften, die wir benötigen , um ein Raster zu definieren. Aber jetzt können wir unsere Punkte platzieren, erste Array, um alle Punkte zu speichern. Gehen Sie dann für Loop alle Rasterzellen durch, wo wir in das Punkte-Array einen neuen Punkt einschieben werden. Und übergeben Sie X und Y. Jetzt müssen wir nur noch X und Y definieren . X wird ein Rest sein Der Rest-Operator sorgt dafür , dass die Zahl zwischen 0 und 11 aussieht. Jedes Mal, wenn ich ein Vielfaches von 12 erreiche, geht es auf Null zurück. Um die Position zu ermitteln, müssen wir sie nur mit der Breite der Zelle multiplizieren. Y wird Mathe Dot Floor sein. Ich teile es durch Kohlen, also fange ich bei Null an und erhöhe dann eins, zwei, drei, vier usw., bis ich 12 erreiche Diese Division gibt Null zurück, etwas wir sind Fluor es, also Null, etwas wird Null Dann 12-23, das wird eins sein und so weiter. Das gibt uns den Index der Zeile, und um die Y-Position zu erhalten, müssen wir das nur mit der Höhe der Zelle multiplizieren Lassen Sie uns nun diesen Punkt skizzieren. Ich werde die Hintergrundfarbe auf Schwarz ändern und den Transformationsblock mit einem Kontextpunkt speichern und einem Kontextpunkt wiederherstellen Dann übersetze ich die Kontexte in Mx und MY , also den oberen und linken Rand. Und schließlich zeichnen Sie die Punkte mit jeweils einem Punktpunkt. Punkt, Punkt, Kontext zeichnen. Wir können die Note jetzt sehen, aber die Ausrichtung ist falsch. Das liegt daran, dass die Punkte an der Ecke jeder Zelle platziert sind . Um sie in die Mitte der Aufrufe zu verschieben, können wir einen weiteren Kontextpunkt hinzufügen der der Hälfte der Zellenbreite und der Hälfte der Zellenhöhe entspricht. Und da ist es unser dynamischer Grad. Wir können die Anzahl der Spalten oder Zeilen ändern und alles fällt einfach an einen Ort. Lassen Sie uns nun Linien zwischen diesen Punkten zeichnen. Lassen Sie mich zuerst den Strichstil festlegen, und ich werde wieder Rot verwenden und dann die Linienstärke auf vier setzen. Wir wollen eine Zeile pro Zeile, also brauchen wir 24 Schleifen. Die erste geht durch die Zeilen, sodass wir die Variable R für Zeilen benennen können. Die zweite geht durch die Spalten, also nennen wir die Variable C für Spalten. Wir müssen in jeder Zeile eine neue Zeile beginnen, also beginnt der Kontextpunkt mit dem Pfad am Anfang der Schleife und dann der Kontext-Punktstrich am Ende der Schleife. Innerhalb der zweiten Schleife benötigen wir für jeden Punkt eine Position. Der Kostenpunkt entspricht zwei eckigen Klammern. Der Index des Punktes innerhalb der Schleife entspricht dem Index der Zeile multipliziert mit der Anzahl der Spalten plus dem Index der Spalte Dann benötigen wir den Kontextpunkt Move Two, Punkt X und Punkt Y, was nur für den ersten Punkt passieren muss , damit wir die Bedingung vorbereiten können , falls kein C oder wenn C Null ist. Oder aber für jeden zweiten Spaltenindex Kontextpunkt Zeile zwei, X und Y. das an der richtigen Stelle haben, folgen die Linien, wenn wir die Punkte verschieben Lassen Sie uns das mit der Noise-Funktion machen. Auch hier wird sich Canvas Sketch UT als nützlich erweisen , da es im Zufallsmodul bereits über eine Rauschfunktion verfügt . Wenn Sie das lokale Setup verwenden und den Kurs chronologisch verfolgen, haben Sie Canvas Sketch UT bereits installiert, da wir es in der vorherigen Lektion installiert Wenn Sie einen Online-Editor verwenden, geben Sie einfach Canvas Sketch UTL in das Feld Devanta C Dann müssen wir es mit zufälligen Gleichungen angeben, um Canvas Sketch TL random zu benötigen Canvas Sketch Die Noise-Funktion gibt eine Zahl zurück , die wir in einer Variablen namens N speichern werden . Rauschen eignet sich hervorragend, um Strukturen wie unserem Gitter, die sehr gerade und präzise sind, ein organisches Gefühl zu verleihen um Strukturen wie unserem Gitter, die sehr gerade und präzise sind, ein organisches Gefühl zu die sehr gerade und präzise sind Sie unterscheidet sich von einer reinen Zufälligkeit. Wenn wir die Rauschfunktion mit fortlaufenden Zahlen füttern, erhalten wir Zufallszahlen, die ineinander fließen Wir verwenden das zufällige Punktrauschen zwei D und übergeben X und Y und addieren dann die Zahl zu unseren X- und Y-Positionen Grafik ändert sich nichts wirklich der Grafik ändert sich nichts wirklich, da N eine sehr kleine Zahl ist. Aber wir können das ändern, indem wir den letzten Parameter der Funktion Noise to D verwenden, nämlich die Amplitude. Lassen Sie uns Variablen für diese beiden Parameter deklarieren, die ich als eins belassen werde, und die Amplitude, die ich auf dint setzen werde Jetzt können wir sehen, was das Geräusch macht, aber das sieht immer noch nach Zufallszahlen aus, weil die Frequenz zu hoch ist Ich werde es auf eine winzige Zahl wie 0002 ändern. Jetzt sieht es immer noch ziemlich zufällig aus, aber es fließt viel besser Einige davon sehen sogar wie Kurven aus, aber wenn wir die Punkte ausblenden, können wir sehen, dass es sich immer noch nur um gerade Linien handelt. Hier gibt es also noch ein bisschen mehr zu tun. Das wird dem, was wir in der vorherigen Lektion gemacht haben, sehr ähnlich sein . Die innere Schleife wird bei Colts Mines One enden. Dann wollen wir statt eines Punkts eine Kurve bilden, was der aktuelle Punkt ist, und wir wollen erreichen, indem wir dem Index Null hinzufügen Im Gegensatz zum nächsten Punkt duplizieren Sie einfach die Linie und ändern den Index um zwei plus eins Wir können die geraden Linien loswerden und der nächste Teil ist so ziemlich identisch mit dem, und der nächste Teil ist so ziemlich identisch mit dem was wir beim Kurven-Intro gemacht haben, also können wir schummeln und ihn von dort kopieren können den Teil des Befehls löschen und wir müssen nur den Iterator von I auf C ändern und die Punktlänge der Punkte auf Aufrufe ändern Und da ist unser Kurvenraster. Raster sind hochwertig und werden oft als Grundlage für Dinge verwendet , die wir mit Code erstellen möchten Es war gut für uns , uns die Zeit zu nehmen , um zu lernen, wie man ein dynamisches Grid erstellt In der nächsten Lektion werden wir damit kreativer umgehen. 33. Lerne, Segmente zu erstellen: Im Moment haben wir eine Kurve pro Zeile des Rasters. Stattdessen möchte ich kleine Kurvensegmente. Für jede Spalte können wir das tun, indem wir den Startpfadbefehl und den Strichbefehl innerhalb der Schleife verschieben den Startpfadbefehl . Ich weiß, dass wir diese Zeilen erst am Ende der vorherigen Lektion geschrieben haben, aber wir werden sie bereits ändern. Für diesen nächsten Schritt Sie sie gerne kommentieren oder löschen. Wir wollen nur die letzte Zeile ohne se am Anfang. Das Ergebnis ist interessant, aber es ist nicht das, wonach ich suche. Ich möchte immer noch das gesamte Segment, also müssen wir jeden Pfad am vorherigen Mittelpunkt beginnen Wir müssen es in einer Variablen speichern, sodass die verschiedenen Werte nach jeder Iteration der Schleife bestehen bleiben Deklarieren wir zwei neue Variablen namens last X und last Y. Vor der Kurve verschieben wir das letzte X und das letzte Y, und am Ende der Iteration setzen wir das letzte X auf x und das letzte Y auf Y. Das ist fast soweit. Vor der Kurve verschieben wir das letzte X und das letzte Y, und am Ende der Iteration setzen wir das letzte X auf x und das letzte Y auf Y. Das ist fast soweit. Jetzt beginnen die Kurven dort, wo die letzte Wir müssen uns nur mit einer Ausnahme für den ersten Punkt jeder Spalte befassen . Wenn C Null ist, ist das letzte X der Schnittpunkt X und das letzte Y der Schnitt Y. Jetzt sehen wir wieder die vollständigen Kurven, aber diesmal zeichnen wir sie in Segmenten, was bedeutet, dass wir jedem Segment Supert-Eigenschaften geben können und wir diese Eigenschaften direkt auf dem Punkt installieren können direkt Hier oben werden wir das Punkte-Array auffüllen . Wir können eine neue Variable namens Linienbreite deklarieren und sie vorerst auf eine beliebige Zahl setzen Sagen wir zehn, übergeben sie an den Punktkonstruktor und scrollen dann nach unten zur Punktklasse Stellen Sie sicher, dass Sie die neue Eigenschaft als Zahlenvariable speichern wobei diese Punktlinienbreite der Linienbreite entspricht Zurück zur Renderfunktion können wir die Linienbreite des Kontextes so einstellen, dass sie der Linienbreite Kurvenpunkts entspricht Noch nicht viel, aber wir wissen, dass wir die Linie variieren und sie auf dem zuvor berechneten Geräuschwert basieren können die Linie variieren und sie auf dem zuvor berechneten Geräuschwert basieren dem zuvor berechneten Geräuschwert Wir wissen, dass N eine Zahl ist , die innerhalb der Amplitude variiert, oder dass sie tatsächlich zwischen negativer Amplitude und positiver Amplitude variiert . So können wir das einem anderen Bereich für unsere Linienbreite zuordnen. Zuordnung eines Wertebereichs zu einem anderen ist eine sehr häufige Operation, und auch hier können wir uns darauf verlassen, dass uns Canvas Sketch UTL dabei hilft Kartenbereich ist Teil des Mathematikmoduls, daher müssen wir ihn zuerst importieren Für die Kostenberechnung ist Canvas Sketch TL Mathe erforderlich. Die Linienbreite wird Math Dot Map Branch sein. Der Wert ist N und der Eingabebereich reicht von Minus-Amplitude zu Amplitude, und der Ausgabebereich kann zwischen 2 und 20 Das sieht langsam interessant aus. Wir können mehr Eigenschaften wie die Farbe ändern. Ich zeige Ihnen eine weitere Farbbibliothek die sich von der unterscheidet, die wir in der vorherigen Lektion verwendet haben namens Farbkarte, die sich von der unterscheidet, die wir in der vorherigen Lektion verwendet haben. Es hat eine Reihe von Farbpaletten, die nützlich sind, um eine Reihe von Werten zu visualisieren, was für uns sehr gut geeignet ist. Also lass es uns installieren im Online-Editor Gehen Sie im Online-Editor zu den Abhängigkeiten und geben Sie Color Map ein. Beenden Sie den Vorgang auf dem Terminal mit Control C oder Command C und geben Sie NPM I Color Map Sie nach Abschluss der Installation die Pfeiltaste nach oben, entfernen Sie den Dash open und das neue Führen Sie die Skizze erneut aus. Wir müssen die Bibliothek in unseren Code unterteilen. Also Const-Farbkarte, Farbkarte erforderlich. Jetzt kehren wir zur Colormap-Seite zurück und schauen uns das Anwendungsbeispiel an. Wir werden dem folgen und die Farben in den Variablen speichern Farben entsprechen der Farbkarte und öffnen dann coole Klammern , um die Eigenschaften festzulegen. Die erste wird, wie wir im Beispiel sehen , auch als Farbkarte bezeichnet. Und es ist der Name der Palette, die wir aus dieser Liste auswählen können. Ich werde MA GMA wählen. Dann für die Anzahl der Farbstufen, die wir verwenden, und die Farbtöne, was in unserem Fall die Amplitude sein wird Um dies in Aktion zu sehen, erstellen wir eine neue variable gekühlte Farbe und machen das Gleiche, was wir für die Linie mit ihr gemacht haben übergeben sie an den Punktkonstruktor und speichern sie als Zahlenvariable in der Punktklasse In der Render-Funktion setzen wir den Kontext-Punktstrichstil auf die C-Punktfarbe Um nun eine Farbe aus der Liste auszuwählen, können wir wieder den MAP-Bereich verwenden, sodass Farbe den Farben entspricht Eckige Klammern ergeben eine Punktzuweisung aus Verzweigung und negativer Amplitude zu positiver Amplitude und dann Null zu Amplitude Der Unterschied besteht darin, dass wir diese Zahl als Index für das Farbarray verwenden, was bedeutet, dass es sich um eine Ganzzahl handeln muss. Also müssen wir es mit dem mathematischen Punktboden umschließen. Mal sehen, wie das mit mehr Zeilen aussieht. Sagen wir 48, das ist nicht schlecht, aber wir können mit dem Sketch weiterspielen. Natürlich können wir eine andere Farbpalette ausprobieren. Mal sehen, wie das mit dem Salzgehalt aussieht, aber das ist nicht das einzige Merkmal, mit dem wir spielen können Da wir ein System geschaffen haben, können wir einfach mit Werten experimentieren Was ist zum Beispiel passiert, wenn wir diesen Wert mit Null Punkt acht statt 0,5 oder diesen mit 5,5 multiplizieren ? Okay, es ist chaotisch, aber was könnten wir noch versuchen? Was ist, wenn wir Zahlen zum letzten X addieren und sagen wir 250 oder subtrahieren 250, wenn es nicht immer 250 ist, sondern eine Wertsteigerung in Abhängigkeit von C und vielleicht dasselbe für das letzte Y tun. Verwenden Sie Zeilen, um die Linien vielleicht dünner zu machen, wobei der Ausgabebereich zwischen Und wie würde das mit mehr Spalten aussehen? Sagen wir 72 und weniger Zeilen. Okay, das ist nett. Ich mag es. Hier in der Bildschirmaufnahme könnte es so aussehen, als ob ich direkt zu diesem Ergebnis gegangen bin. Aber als ich das Material für den Kurs vorbereitete, hatte ich kein klares Ziel. Ich experimentiere einfach mit den Werten bis ich etwas gefunden habe, das mir gefällt Und das ist Teil des Prozesses. Sobald Sie die Logik geschrieben haben, können wir kreativ damit umgehen und auch damit experimentieren. Ich bin gespannt , welche Variationen du dir einfallen lassen wirst. Und in der nächsten Lektion werden wir Rauschen verwenden , um unsere Kurven zu animieren 34. Rasteranimation erstellen: Das wird kurz sein. Ich werde dir zeigen , wie man das Raster animiert und wie man die Animation als Video exportiert Sie erinnern sich vielleicht aus unserer ersten Lektion über Canvas Sketch, dass wir der Einstellung eine Eigenschaft namens animate hinzufügen und sie auf true setzen können der Einstellung eine Eigenschaft namens animate hinzufügen und sie auf true setzen Dadurch wird die Renderfunktion immer wieder aufgerufen , wenn der Browser bereit ist, den Bildschirm neu zu malen Wir können das verwenden, um Werte im Laufe der Zeit zu ändern, und wir werden die Position unserer Punkte Wir können also nach unten zur Punktklasse scrollen und die Anfangsbuchstaben X und Y sowie X und Y speichern . Anstatt die Position des Punkts nur einmal am Anfang festzulegen , können wir diese Zeilen kopieren, um sie in der Renderfunktion zu verwenden Und wenn wir diese beiden herauskommen, starten wir zuerst eine neue Schleife mit jeweils einem Punkt Dann können wir diese Zeile hier einfügen. Und statt nur X und Y verwenden wir den Punktpunkt x, der dem Punkt Ix entspricht, was dem Anfangsbuchstaben X plus N entspricht, und dasselbe gilt für Punkt Y. N wird auch Punkt X und Punkt IY verwenden Das wird nicht viel bewirken, weil die Werte für jeden Frame gleich sind Wir benötigen also Variablen , die sich im Laufe der Zeit ändern, und das haben wir bereits in einer früheren Lektion gesehen. Wir haben Zugriff auf eine namens Frame. Jetzt müssen wir nur noch ein Bild zu X oder Y hinzufügen . Ich werde es zu X hinzufügen. Es bewegt sich etwas langsam, sodass wir es beschleunigen und Bild mit drei multiplizieren können. Es bewegt sich etwas langsam, sodass wir es beschleunigen und Bild mit drei multiplizieren können es beschleunigen und Bild mit drei multiplizieren Wenn dir das gefällt, kannst du auf den Browser klicken und oder Command S drücken, um ein paar Frames zu speichern Vielleicht möchtest du das aber auch als Emason speichern. Lassen Sie mich Ihnen zeigen, wie das geht. Dies funktioniert nur mit dem Offline-Setup, da wir FFMPH benötigen und Zugriff auf das lokale Dateisystem Also zuerst müssen wir FFMPH installieren und wir können diese Zeile aus der Dokumentation kopieren diese Zeile aus der Dokumentation oder sie einfach selbst eingeben NPM, ich bei FPH habe FFmphg installiert. Wir verwenden G, was bedeutet, dass wir Sobald die Installation abgeschlossen ist, werden wir Canvas Sketch, Sketch Curves erneut ausführen. Aber dieses Mal müssen wir den Strichstrich als Ausgabe den Ausgabekurven anhängen . Das ist der Ordner, in den die exportierte Datei verschoben werden soll, und wir müssen auch den Dash Stream anhängen Wenn dieser Sketch mit einem Dash Stream läuft, können wir Strg Shift S drücken, um den Rekorder und die Animation zu starten, und dann dieselbe Strg Shift S erneut drücken , um die Aufnahme zu beenden In den Skizzen und Ausgabekurven sehen wir nun eine MP Four-Datei mit unserer Animation In der Dokumentation finden Sie auch weitere Informationen zum Exportieren von Animationen, einschließlich Bildsequenzen und Geschenken Also mach weiter und experimentiere mit dem, was wir bisher gesehen haben. Ich freue mich darauf, deine Animationen in der Projektklasse zu sehen . In dieser Lektion ging es um Kurven, aber wir haben auch etwas über die Interaktion mit dem Mauszeiger, dynamische Raster und das Importieren animierter Skizzen gelernt dynamische Raster und das Importieren animierter Skizzen Und in der nächsten Lektion werden wir uns Audiovisualisierung befassen 35. Erstelle Drückenspiel: Audiovisualisierung geht es darum, Daten aus einer Audioquelle zu extrahieren und verwenden, um etwas Visuelles Wir beginnen einfach mit einem Kreis, der uns einer Audioquelle entsprechend zieht Dies ist eine einfache Skizze, und wir werden sie von Grund auf neu erstellen Aber es stecken ein paar Konzepte dahinter, die wir zuerst durchgehen müssen. Und wir beginnen damit, wie man Musik im Webbrowser abspielt. Lass uns eine neue Skizze beginnen. Sie kennen die Vorgehensweise inzwischen Wenn Sie einen Online-Editor verwenden, erstellen Sie einfach eine neue Kopie der Vorlage und fertig. Wenn Sie das Terminal verwenden, drücken Sie C, wenn ein anderer Sketch ausgeführt wird, und dann Canvas-Sketch, Sketch Audios Nu Ändern Sie die Abmessungen auf 1080 mal 1080. Um etwas Audio abzuspielen, benötigen wir mindestens drei Codezeilen. Zuerst müssen wir ein HTML-Audioelement erstellen. Wir können es in einer Variablen namens audio speichern und es mit einem Dokument mit einem Punkt beenden, an dem das Element Audio beendet wird. Es muss nicht zum Hauptteil des Dokuments hinzugefügt werden. Ich musste nur als Entität existieren. Dann müssen wir ihr eine Quelle geben, bei der die Audio-Punktquelle gleich ist, und dann den Übergang zu einer Audiodatei, die wir in einer Minute sehen werden . Und die dritte Zeile ist ein Aufruf Audio Dot Pla für die Audiodatei Wenn Sie Musik haben, speichern Sie sie auf Ihrem Computer, Sie können sie verwenden. Es gibt nur wenige unterstützte Dateiformate , darunter das sehr beliebte P Three. Wenn Sie also MP Three-Dateien haben, sollten diese hier funktionieren. Wenn Sie keine haben oder lieber eine Demo-Datei herunterladen möchten, kann ich artlest dot empfehlen, wo Sie lizenzfreie Musik herunterladen können Die Dateien können kostenlos heruntergeladen werden, aber wenn Sie keine Lizenz haben, werden sie mit einem Audio-Wasserzeichen geliefert, was in unserem Fall in Ordnung ist, da wir daran interessiert sind , die Technik hier zu erlernen. Wir können die Dateien später jederzeit austauschen Sobald Sie die Datei heruntergeladen haben, empfehle ich, sie in Ihren Sketch-Ordner zu In meinem Fall werde ich einen Unterordner namens Audio erstellen und dann die MP Three-Datei darin einfügen Dies dient dazu, unsere Dateien zu organisieren, aber auch, um es einfach zu machen, in unserem Code auf sie zu verweisen Zum Beispiel kann ich jetzt zu der Zeile zurückkehren , die ich zuvor eingegeben habe, und Audio Dot Source entspricht Audio Slash und dann den Namen der Datei eingeben Audio Dot Source entspricht Audio Slash und dann den Namen der Datei Wenn Sie einen Online-Editor verwenden, müssen Sie eine URL eingeben, öffentlich gehostete P3-Datei verweisen muss Auch hier können Sie einen von artlest DoTo verwenden , und dieser ist ziemlich lang, bis Sie Aber ich werde es in der Notiz unter dem Video zur Verfügung stellen. Wenn Sie eine Skizze speichern, stellen Sie fest, dass das Audio noch nicht abgespielt wird Das liegt an der Autoplay-Richtlinie Wir können dem Audioobjekt eine Eigenschaft namens autoplay hinzufügen und sie auf true setzen Dies garantiert jedoch immer noch nicht, dass das Audio abgespielt wird , und das aus gutem Grund , der auf dieser Seite ausführlich erklärt wird Kurz gesagt, wir möchten nicht, dass Webseiten plötzlich Geräusche machen, wann immer sie wollen Aus diesem Grund ist die automatische Audiowiedergabe standardmäßig blockiert Diese Zeile hier reicht also eigentlich nicht aus, um mit der Audiowiedergabe zu beginnen. Abhängig von Ihrer Konfiguration wurde das Audio möglicherweise tatsächlich abgespielt , weil die URL, die Sie verwenden, vom Browser als zulässige URL aufgeführt wurde . Aber das ist nicht jedes Mal garantiert. Wir benötigen zumindest eine Art Benutzerinteraktion mit der Seite als eine Art Absichtserklärung. Im Wesentlichen reicht es aus, einfach auf eine beliebige Stelle auf der Seite zu klicken. Wir brauchen also einen Maus-Event-Listener. Lassen Sie uns eine Funktion namens Ed Listeners erstellen. Wir sind daran interessiert, auf eine beliebige Stelle im Fenster zu klicken, also fügt das Fenster einen Event-Listener hinzu, und der Ereignistyp kann sein, wenn die Maustaste losgelassen wird, die Maus hoch, die Handle-Funktion kann als Funktion bezeichnet werden, wie wir sie in der vorherigen Liste verwendet haben , und es kann eine anonyme Inline-Funktion wie diese handeln Jetzt können wir darin endlich Audio Dot Play aufrufen. Wir können diese beiden Zeilen von hier oben entfernen und die Audioeigenschaft auch für die gesamte Skizze sichtbar machen , indem sie hier oben deklarieren, anstatt innerhalb der Funktion Jetzt müssen wir nur noch irgendwo den Hörer ankrähen, und ich werde das am Ende der Zeile machen , kurz vor Canvas Sketch Speichern Sie dann die Seite und klicken Sie auf eine beliebige Stelle. Und da wir jetzt eine gewisse Kontrolle haben, können wir dies in einen Schalter umwandeln, indem wir sagen, ob das Audio gestellt ist, rufen Sie Play auf oder rufen Sie Audio Dot Post Jetzt können wir klicken, um abzuspielen, und erneut klicken, um zu pausieren. Das brauchen wir, wenn wir nur Audio abspielen wollen, aber Audiodaten lesen wollen, damit wir sie visualisieren können. Das werden wir in der nächsten Lektion sehen. 36. Einen Analyzer erstellen: Wir wollen eine Audioquelle visualisieren. Wir benötigen die Audiodaten und dafür benötigen wir die Web-Audio-API. Die Web-Audio-API hat mindestens ein Konzept mit dem Compass IPI gemeinsam, nämlich dass sie auch einen Kontext hat Wir haben unseren Render-Two-D-Kontext verwendet, um die gesamte Drohne zu erstellen, und wir werden für alles, was mit dem Sound zu tun hat, einen Audiokontext benötigen funktioniert es mit Wie wir auf dieser Grafik sehen können, funktioniert es mit Knoten. Innerhalb des Kontextes werden wir einen Eingang oder eine Quelle haben, z. B. ein Audioelement mit einer MP-Datei, und wir werden es mit dem Ziel verbinden , das normalerweise der Lautsprecher des Systems ist . Und dazwischen können wir mehrere andere Knoten verbinden, die wir hier nicht näher eingehen werden. Die Web-Audio-API ist sehr umfangreich und wir könnten einen ganzen Kurs darüber machen. Wir werden uns auf einen Knoten namens Analyzer konzentrieren , den wir benötigen, um Daten aus einer Audioquelle zu extrahieren. Zurück zu unserer Skizze, wir müssen einen Audiokontext erstellen. Um für Ordnung zu sorgen, können wir eine neue Funktion namens ret audio schreiben und diese Zeilen darin verschieben Wir werden ein paar neue Variablen benötigen , die wir hier oben global deklarieren können Lassen Sie den Audiokontext, den Audiodatenquellenknoten und den Analyzer-Knoten stehen. zurück in die Funktion, gehen Sie zum Audiokontext, was einem neuen Audiokontext entspricht. Dann benötigen wir für unseren ersten Knoten einen Eingang oder die Audioquelle. Dies wird der Quellknoten sein, der der Audiokontext-Punkt-Create-Medienelementquelle entspricht . Und hier übergeben wir die Audioelemente, die wir erstellt haben. Die Quelle wird also unsere MP-Three-Datei sein, und wir müssen sie mit dem Audiokontext-Ziel verbinden , dem Speak. Jetzt ist es Zeit für den Analyzer-Knoten , der Audiocontext dot create Analyzer ist, und dann müssen wir auch den Quellknoten mit dem Analyzer-Knoten verbinden den Quellknoten mit dem Analyzer-Knoten Wir müssen den Analyzer nicht mit dem Ziel verbinden, da die Quelle bereits mit dem Ziel verbunden ist Dann benötigen wir ein Array zum Speichern der Audiodaten und es muss als Array eingegeben werden Genauer gesagt ein Float-32-Array. Wir müssen die Länge angeben und können die Eigenschaft des Analyzer-Knotens namens frequency been count verwenden . Wenn Sie an dieser Eigenschaft interessiert sind, können wir auf der MDN-Seite danach suchen Die Anzahl der Frequenz-Beans ist eine schreibgeschützte Eigenschaft der Analyzer-Node-Schnittstelle Dies entspricht im Allgemeinen der Anzahl der Datenwerte, mit denen wir für die Visualisierung spielen können, was genau das ist, was wir benötigen Das ist es für die Audiofunktion zum Beenden, aber von wo aus rufen wir sie Der Audiokontext unterliegt ebenfalls denselben Regeln wie das Autoplay Wir können es sogar außerhalb der Benutzerinteraktion erstellen, aber dann blieb es in einem angehaltenen Zustand , der sich nur bei einigen Benutzerinteraktionen ändern könnte bei einigen Benutzerinteraktionen ändern Es ist also besser, es bereits in einem Interaktionshandler zu erstellen , wie zum Beispiel in unserer Maus-App-Funktion hier, aber wir müssen das nur einmal tun. Nicht jedes Mal, wenn ein Mausklick erfolgt, können wir vor dieser Zeile eine Bedingung hinzufügen besagt, dass Audio nur dann beendet werden muss, wenn kein Audiokontext vorhanden ist. Beim ersten Mausklick wird die Eigenschaft Audiokontext undefiniert sein Dann werden wir im Inneren erstellt, Audio wird beendet. Und bei jedem weiteren Mausklick wird das einen Wert haben und die Bedingung wird falsch sein. Der Ton wird immer noch wie zuvor abgespielt. Und jetzt lass uns etwas zeichnen. Dies wird eine animierte Skizze sein. Fügen Sie also animiertes True zur Einstellung hinzu. Dann müssen wir in der Render-Funktion die Audiodaten aus dem Analyzer-Knoten in jedem Frame mit dem Analyzer-Knotenpunkt Get Float-Frequenzdaten lesen Analyzer-Knoten in jedem Frame mit dem Analyzer-Knotenpunkt Get Float-Frequenzdaten und sie in unser Audiodatenarray übergeben. Wenn wir versuchen, dies jetzt auszuführen, wird in der Konsole ein Fehler angezeigt, der besagt, dass die Cantad-Eigenschaften definiert liegt daran, dass der Analyzer-Knoten erst erstellt wird, wenn ein Klick erfolgt Wir müssen das also berücksichtigen und alles , was mit dem Audiokontext zu tun hat, überspringen , bis er erstellt ist. Eine einfache Bedingung, die ich machen würde , wenn es keinen Audiokontext gibt, zurückkehren. Schauen wir uns nun die Daten an. Lassen Sie uns zunächst sehen, wie groß dieses Array ist. Wir können hier in Quit Audio ein kurzes Konsolenprotokoll hinzufügen und die Länge der Audiodaten überprüfen, was der Anzahl der Frequenzen entspricht. Wir können auf eine beliebige Stelle klicken und sehen, dass es 1024 ist. Falls eine andere Nummer für Sie angezeigt wurde, brauchen Sie sich keine Sorgen zu machen. Was wir wollen, ist ein Durchschnitt all dieser Werte in den Audiodaten. Es sind alles numerische Werte, also müssen wir sie nur addieren und die Summe durch die Anzahl der Werte dividieren. Lassen Sie uns dafür eine Funktion namens get average erstellen. Sie nimmt einen Parameter namens Data auf, dem wir wissen, dass es sich um ein Array von Werten handeln wird. Dann benötigen wir eine Variable namens sum, die bei Null beginnt, und dann geben wir für jedes Element innerhalb der Daten Summe plus gleiche Eckige Klammern I an. Wenn die Schleife beendet ist, können wir den Durchschnitt zurückgeben, das ist die Summe geteilt durch die Datenpunktlänge. Jetzt können wir in der Render-Funktion, nachdem wir die Frequenzen aus dem Analyzer-Knoten extrahiert haben, die Frequenzen aus dem Analyzer-Knoten extrahiert haben, den Durchschnitt in einer Variablen namens AVG speichern Dies entspricht Get Average und Pass im Audiodatenarray. Mit diesem Wert können wir nun endlich unseren Kreis zeichnen. Wir beginnen mit Context Dot Save und Context Dot Restore. Dann übersetzen wir den Kontext in die Mitte der Leinwand. Und setze die Linie damit auf zehn. Dann wird für die Form der Kontextpunkt Pfad beginnen, Kontextpunkt Bogen, der in der Mitte bei 00 beginnt, und der Radius wird AVG sein. Da AVG jedoch eine negative Zahl sein kann, müssen wir dies mit einem mathematischen Punkt aBS , der uns den absoluten Wert ohne die Seite gibt. Es wandelt also eine negative Zahl in eine positive Zahl um und den Startwinkel Null und den Endwinkel den mathematischen Punkt Pi mal zwei und schließlich den Kontext-Punktstrich. gibt es ein paar Dinge zu verbessern Hier gibt es ein paar Dinge zu verbessern, die wir untersuchen werden . Am offensichtlichsten ist, dass wir die Skizze nicht posten, wenn wir das Audio posten. Um den Wiedergabestatus der Skizze kontrollieren zu können, benötigen wir Zugriff auf den sogenannten Sketch-Manager. Es gibt ein Beispiel dafür, wie man es hier hinbekommt, und wir können sofort sehen, dass es an einer Synchronisation und einem Gewicht liegt. Wir haben vor allen vorherigen Lektionen einen Blick darauf geworfen und ich habe erwähnt, dass sie sich als nützlich erweisen würden, und genau hier brauchen wir sie. Anstatt das Beispiel einfach zu kopieren, schreiben wir es selbst. Wir beginnen damit, eine globale Variable namens manager zu deklarieren, und dann müssen wir diese beiden Aufrufe in eine Sync-Funktion bringen , die ich Start nenne Der Aufruf von Canvas ist Sketch einen Verweis auf den Sketch-Manager zurück , gibt einen Verweis auf den Sketch-Manager zurück , den wir in unserer Manager-Variablen speichern werden, und wir müssen die Gewichtung für diesen Aufruf vorbereiten Das ist eine Synchronisationsfunktion. Sobald wir den Manager haben, können wir die Skizze bereits im entgegengesetzten Zustand mit der Punktstellung des Managers beginnen , und wir werden die Skizze erst abspielen , wenn das Audio abgespielt wird Wir können das in unserem Mouse-Up-Handler steuern und hier ein paar Zeilen hinzufügen. Niedriges Audio-Punktspiel, wir fügen Manager Dot Play hinzu. Unter der Audio-Punkt-Pose fügen wir die Manager-Punkt-Pose hinzu. Es passiert noch nichts, weil wir vergessen haben, unsere Startfunktion aufzurufen. Also lass uns das machen. Jetzt heißt es abspielen, wenn wir klicken, und Pause, wenn wir klicken. Das ist ein guter Anfang. In der nächsten Lektion werden wir etwas tiefer gehen. 37. So erzeugst du Frequenzen: Wir sind an diesem Punkt angelangt, ohne einen Schlüsselbegriff für die Audioanalyse zu nennen . Es ist FFT. FFT steht für Fast Fourier Transform und ist ein Algorithmus, der ein kontinuierliches Signal wie eine Schallwelle in eine Komponente mit unterschiedlichen Frequenzen umwandelt wie eine Schallwelle in eine Komponente mit unterschiedlichen Frequenzen Dies ist die Hauptfunktion des Analysatorknotens, und wir können die FFT-Größe ändern, um mehr oder weniger Daten zu lesen und mehr oder weniger dieser Komponenten zurückzugeben Der Standardwert ist 2048 und der Grund dafür, dass die Frequenz gezählt wird , ist 1024, weil es immer die Hälfte der FFT-Größe Wenn wir weniger Bohnen wollen, können wir die FFT-Größe auf 512 setzen Zum Beispiel muss dieser Wert immer eine Zweierpotenz sein. Schauen wir uns nun an, was sich im Audiodatenarray befindet. In jedem Frame werden viele Daten gesperrt. Also werde ich die Skizze unterbrechen und mir eine davon ansehen. Es gibt jetzt 256 Vallos. Und wenn wir uns die ersten hundert ansehen, können wir uns ein Bild von der Reichweite dieser Vals Wir können sehen, dass sie alle unter Null liegen. Warum ist das so? Um das zu verstehen, müssen wir uns den Analysatorknoten genauer ansehen, ausgehend von den G-Float-Frequenzdaten. Jedes Element im Array steht für einen Schülerwert für eine bestimmte Frequenz Der Wert, den wir hier sehen, ist also undisziplinär. Wir können uns einen Überblick über den Bereich dieses Wertes verschaffen , wenn wir eine Seite zurückgehen und diese anderen Eigenschaften des Analyzer-Knotens überprüfen des Der Mensch ist ein Schüler und der größte Schüler. Das Standard-Minimum ist -100 und das Standard-Maximum ist -30 Diese Eigenschaften beziehen sich eine andere Methode namens get byte frequency data, die den Wert in Byte zurückgibt, die diesem Bereich zugeordnet sind. Wir verwenden jedoch Get-Float-Frequenzdaten, die sich diese Minimal- und Maximalwerte nicht auswirken, wir können sie aber trotzdem als Richtlinie verwenden Wir können Werte ungefähr zwischen -100 und -30 erwarten. Und deshalb sind alle Zahlen, die wir sehen, negativ. Das ist auch der Grund, warum der Kreis beim Ausführen einer Skizze immer kleiner zu werden scheint, wenn ein lautes Geräusch zu hören ist , weil die absolute Zahl kleiner wird Es ist besser für uns, diesen Wert einem einfacher zu verwendenden Wert zuzuordnen, z. B. einem Bereich Auch hier können wir uns auf Canvas Sketch UTL verlassen und die Kartenbereichsfunktion aus dem mathematischen Modell verwenden Im Offline-Modus haben wir es bereits installiert. Im Online-Editor müssen Sie es als Abhängigkeit für jede Skizze erneut deaktivieren, und Sie wissen bereits, wie das geht. Geben Sie einfach Canvas sketch Util in das Abhängigkeitsfeld ein und fordern Sie es dann mit math require Cv sketch, Util Jetzt können wir eine zugeordnete Variable erstellen und sie Math Dot Maprench AVG zuweisen Von Minimum Discib und Maximum Discib bis Null und Eins. Und in diesem Fall wollen wir, dass der letzte Parameter wahr ist, weil wir diese Werte auf 0-1 beschränken wollen Und der Radius unseres Kreises wird jetzt mit 200 multipliziert. Der Kreis wird jetzt immer größer, wenn das Geräusch lauter ist, aber die meiste Zeit sehen wir den Kreis überhaupt nicht Also, was passiert hier? Lassen Sie uns den Wert von Map protokollieren, um das herauszufinden. Er scheint die meiste Zeit Null zu sein. Wir müssen die Audiodaten erneut überprüfen. Die meisten dieser Werte sind tatsächlich so niedrig, dass sie praktisch geräuschlos sind. Sie senken unseren Durchschnitt und wir sehen nicht einmal den Kreis, auch wenn wir die Musik immer noch hören können. Der Durchschnitt ist also eigentlich nicht sehr nützlich für die Visualisierung. Wir können weitere nützliche Werte finden , die näher am Anfang des Arrays wenn wir den Durchschnitt durch einen einzelnen Wert, sagen wir Index 12, austauschen. Dann ist der Kreis zurück. größte Teil der Energie konzentriert sich am Anfang des Audiodatenarrays. Und um zu erklären , warum das so ist, bräuchten wir eine viel längere Lektion. Aber lassen Sie mich Ihnen eine kurze Version geben. Ich habe hier eine weitere Skizze, die eine Frequenzstrahlzahl von 32 statt 256 zeigt . Jeder Strahl wird durch einen senkrechten Balken dargestellt , und die Höhe des Balkens entspricht einem Wert , der der halben Höhe der Leinwand entspricht Auf der linken Seite haben wir die niedrigen Frequenzen, beginnend bei Null Hertz, und auf der rechten Seite die Hochfrequenz bis etwa 22.000 Hertz, was in etwa dem menschlichen Hörbereich entspricht Das Intervall zwischen Niederfrequenzknoten auf einer Skala ist viel kleiner als bei Hochfrequenzknoten Die Knoten haben einen logarithmischen Raum, und die FFT-Biegungen haben lineare Abstände Wenn wir die Frequenzdaten vom Analysatorknoten erhalten, erhalten wir viele niedrige Frequenzen, die in wenigen Bindungen zusammengefasst sind, während höhere Frequenzen auf während höhere Frequenzen Diese Seite der Karte wird also tendenziell immer höhere Werte haben Hier gibt es mehr Details, die ich weglasse, aber ich hoffe, ich helfe, ein wenig von den Daten, mit denen wir es zu tun haben, zu verstehen. Und jetzt können wir zu unserer Skizze zurückkehren. Wir entwickeln kein Tool zur Anzeige präziser Audiodaten. Wir können nach eigenem Ermessen Werte auswählen , die gut aussehen. Wie wir es hier mit diesem Index 12 gemacht haben, würde ich sagen, machen wir dasselbe mit ein paar weiteren Werten. Lassen Sie uns ein Array namens Beans beenden es mit drei Werten initialisieren Ich werde vier, 12 und 37 verwenden. Dann können wir innerhalb der Render-Funktion eine Schleife von Null bis Bin Dot Link beenden. Verschiebe den gesamten Code in die Schleife. Wir können den Durchschnitt loswerden und eine neue Variable namens Ben erstellen, die aus eckigen Klammern I besteht. Dann verwenden wir in MA Branch eckige Klammern Ben für Audiodaten und vergrößern den Radius etwas, erhöhen ihn auf 300 Was sind im Moment die tatsächlichen Frequenzen, wir hier visualisieren Ich weiß es eigentlich nicht. Müssen wir das wissen? Ich glaube nicht. Wie ich schon sagte, wir sind hinter etwas her, von dem wir denken , dass es gut aussieht. Und es steht uns frei, alle Teile der Audiodaten auszuwählen , die zu uns passen. 412 und 37 sind nur zufällige Zahlen und wir wählen aus. Fühlen Sie sich frei, eine beliebige Zahl zu wählen und zu sehen , wie diese aussieht. Wenn Sie der Meinung sind, dass die Kreise zu sprunghaft sind, können Sie die Glättungskonstante ändern Ausgehend von seinem Standardwert , der 0,8 ist, auf einen höheren Wert, versuche ich 0,9 Jetzt wissen wir etwas mehr über die Daten, die wir verwenden, es ist an der Zeit, den Fokus in der nächsten Lektion auf die visuellen Elemente zu verlagern in der nächsten Lektion auf die visuellen Elemente 38. Lerne, Bogen-Audio zu erstellen: Mit dem Analyzer-Knoten erhalten wir, dass all diese Werte die verschiedenen Frequenzen der Audioquelle repräsentieren die verschiedenen Frequenzen der Audioquelle Sie ändern sich im Laufe der Zeit, was sich hervorragend für Animationen eignet. Was noch zu tun ist, einige interessante Formen zu zeichnen , die zu ihnen passen. Eines der Dinge, die ich gerne mache, um mich inspirieren zu lassen, ist das Stöbern auf klassischen Postern. Ich stelle mir gerne vor, wie sie aussehen würden , wenn sie Audioreaktoren wären. Diese Serie von Jessica Swenson passt sehr gut dazu. In dieser Lektion werden wir versuchen, diesen zu rekrutieren. Sie können sehen, dass es eine Reihe konstanter Kreise gibt , die mehr oder weniger organisiert aufgeteilt sind Je größer der Kreis, desto dicker die Bögen. So bekommen wir ein Gefühl von Tiefe. Auch wenn wir nur ziemlich einfache zwei D-Formen haben. Zurück zu unserer Skizze. Ich kann damit beginnen, ein paar variable Zahlenkreise zu deklarieren, die ich auf fünf setzen werde, und Num Scheiben, die auf neun gesetzt werden Der Wert jeder Schicht und der Strahlkraft ergibt die mathematische Zahl Pi mal zwei, was dem vollen Kreis geteilt durch die Anzahl der Schichten entspricht. Und dann wird der Basisradius unseres ersten Kreises 200 sein Ich möchte auch die Hintergrundfarbe auf Weiß wie EEA e Null ändern die Hintergrundfarbe auf . Wir können den Audioteil vorerst überspringen und diese Zeilen herausnehmen , um uns auf die Zeichnung zu konzentrieren. Wir benötigen zwei für Loop plus einen mit dem Buchstaben I, Loop und Wurf die Anzahl der Kreise. Und darin brauchen wir eine weitere Schleife mit dem Buchstaben G, Schleife und die Anzahl der Scheiben jedes Kreises. Wir können außerhalb dieser Schleifen verschieben, speichern und übersetzen , weil wir den Kontext nur einmal übersetzen müssen. Und dann können wir innerhalb der zweiten Schleife diese Linien verwenden, um unsere Bögen zu zeichnen Aber anstatt einen vollen Kreis von Null bis Pi mal zwei zu zeichnen , zeichnen wir einen Bogen von Null bis Scheibe Und wir können den Rest der alten Schleife loswerden. Wir brauchen es nicht mehr. Das zeichnet alle Bögen übereinander Wir müssen sie radial verschieben, indem wir den Kontext auf jeder Schicht drehen Wir benötigen also für jeden Kreis einen weiteren Block von Context Dot Save und Context Dot Restore Und für jedes Segment benötigen wir eine Kontext-Punktrotation. Slice Das ist besser, aber wir müssen den Kreis trotzdem entsprechend dem Radius verschieben. Wir könnten so etwas wie Radius plus I mal 50 machen, aber das wäre eine lineare Skala. Und wenn wir uns die Originalreferenz ansehen, können wir sehen, dass der Skalon definitiv nicht linear ist Ich weiß nicht genau, was die Skalierung hier vorantreibt, aber es sieht so aus, als ob die Bögen exponentiell wachsen, und das bringt mich zu einer weiteren sehr nützlichen Technik für kreatives Programmieren Diese werden normalerweise für Animationen verwendet, können aber auch für jeden beliebigen numerischen Wert verwendet werden Angenommen, Sie haben eine Skala von 0 bis 5 und teilen sie in Bei einer linearen Funktion sind alle Schritte gleich Bei Schritt eins wären wir also bei eins. Bei Schritt zwei wären wir bei zwei usw. Mit verschiedenen Funktionen wie dieser wären wir bei Schritt eins immer noch nahe Null Bei Schritt zwei, nur etwas weiter oben. Und dann, etwa bei Schritt drei und vier, würde der Wert schnell steigen. Einige dieser Funktionen sind bekannt und wurden von Robert Penn ausführlich dokumentiert Ich habe erwähnt, dass unsere Kreise exponentiell gewachsen sind, aber vielleicht ist das nicht der Fall Vielleicht wurden sie quadratisch oder kubisch oder vielleicht nach einer anderen Funktion gewachsen oder kubisch oder vielleicht , was hier Aber sicherlich wird eine davon für uns ausreichen , wie du es erwarten würdest, es gibt bereits Bibliotheken mit ESN-Funktion, die wir verwenden können, und die, die ich vorschlage, heißt Geben Sie im Online-Editor einfach ESS ein. im Abhängigkeitsfeld auf dem Terminal die Tasten Control C, PMI ESS Und wenn die Installation abgeschlossen ist, Canvas Sketch, Sketch Audio, um eine Skizze erneut auszuführen. Dann oben. Es entspricht Ess erforderlich. Und bevor wir es verwenden, schauen wir uns noch einmal unsere Referenz an Wir können sehen, wie die Bögen zusammen mit dem Radius wachsen. Wenn wir sagen, dass die Bögen Linien sind, dann variiert der Radius je nach Breite der Das heißt, wir können unsere Beschleunigungsfunktion verwenden , um die Linie entsprechend festzulegen und daraus einfach den Radius zu berechnen Lassen Sie uns also eine neue Variable namens linewid und damit eine neue Variablencodezeile Dann eine For-Schleife für jeden Kreis. Für die EM-Funktion benötigen wir eine Zahl 0-1, die ich in einer Variablen namens T speichern und sie auf zwei setzen werde einer Variablen namens T speichern und sie auf zwei setzen Ich dividiere durch numerische Kreise minus eine Zeile, wobei das ein Punkt ist und das T-fache des größtmöglichen Werts , den ich auf 100 setze und dann linewid in die Zeile schiebe, in der es Jetzt können wir unsere Zeile, die auf zehn gesetzt ist, durch Line damit ersetzen. I und Radius plus Kontakte Punktlinie damit. Das ist immer noch nicht ganz richtig. Das Problem ist , dass die Linien von der Mitte des Strichs aus gezogen werden . Wir benötigen nur die Hälfte der Linie für den Bogen und wir müssen den Radius um die gesamte Linienbreite verschieben können wir tun, indem wir den Radius in einer anderen Variablen anklicken, die ich C-Radius nennen werde Er wird zu Beginn jedes Frames auf den Basisradius gesetzt und dann um die aktuelle Linie erhöht, die sich auf jedem Kreis Und wir können den Bogen zeichnen, indem wir den Radius C plus die Breite der Kontaktpunktlinie mal 0,5 Jetzt haben wir eine perfekte Passform und es sieht so aus, als ob Expo eine extreme Wahl für eine Eason-Funktion war eine extreme Wahl für eine Eason-Funktion Also versuchen wir es mit Quag. Das sieht besser aus Mir ist auch aufgefallen, dass der erste Kreis fehlt , weil die kleinstmögliche Zeile mit ihm Null ist, also können wir hier einen Mindestwert haben und etwa 20 hinzufügen. Das sieht gut aus. Bringen wir jetzt die Audiodaten zurück. Im Moment haben wir ein Array für unsere Bohnen mit drei beliebigen Tellergrößen. Wir wollen eine Bohne pro Scheibe, also entfernen wir das. Erstellen Sie eine Variable namens bin, und wir benötigen eine neue für die Schleifeniteration über alle Kreise, die Zeit und alle Scheiben Dann kann der Bin-Index eine beliebige Zahl innerhalb eines bestimmten Bereichs sein beliebige Zahl innerhalb eines bestimmten Bereichs Wir haben so etwas gemacht, bevor wir das Zufallsmodell Chrom Canvas sketch TO verwendet das Zufallsmodell Chrom Canvas sketch TO Also lass uns das wieder benutzen. Wir müssen es zuerst benötigen. Und dann setze bin auf Random Dot Range Floor weil wir nur ganze Zahlen oder Floorzahlen wollen und der Bereich beliebig sein kann Ich setze es auf 4-64. Und dann schieb Been in das Bins-Array. Wir können diese Zeile kommentieren , weil wir die Audiodaten wieder verwenden Und innerhalb der zweiten Schleife bekommen wir einen Bean von Bins. Eckige Klammern I mal NAM-Scheibe plus G. Der erste Teil ist für jeden Kreis und der zweite Teil für jedes Segment in diesem Kreis. Die Daten müssen erneut zugeordnet werden, genau wie zuvor Ich möchte es nur aufgeräumter schreiben. Lassen Sie uns jetzt noch ein paar Variablen deklarieren. Hier fügen wir mapped und hier oben für den gesamten Sketch sichtbar hinzu, wir fügen Mean DB und Max DB Sie sind nur kürzer zu schreiben, und wir können sie innerhalb von Audio auf einen Wert setzen Der Mittelwert DB entspricht der Analyse eines Knotens. Viele Dissibel, max. DB, Analyse eines Knotens, Analyse eines Knotens, Zurück zur Render-Funktion setzen wir Mapped equals, um den Dotmap-Zweig und Audiodaten zuzuordnen, wobei die eckigen Klammern von Mean DB und Max DB auf Null und Eins stehen, und klammern den Mean DB und Max DB auf Null und Eins stehen, und klammern den Wert mit true. Dieser Wert kann verwendet werden, um die Leitung damit zu steuern. Linie mit ihm entspricht also Linie mit ihm. Eckige Klammern in der Karte, dann müssen wir nur Kontext-Punktlinie so setzen, dass sie wieder mit ihr übereinstimmt Okay, das funktioniert irgendwie. Wir sehen, dass sich jedes Slice entsprechend einer anderen Frequenz in den Audiodaten aufbaut , was nett ist. I O. Aber das muss noch angepasst werden. Manchmal ist die Linienbreite eine ungültige Zahl, sodass der Kontext bei der vorherigen gültigen Zahl bleibt, was dazu führt, dass einige der Bögen auf seltsame Weise blinken Wir können das mit einer Bedingung beheben. Wenn die Zeile wed kleiner als eins ist, einfach fort und überspringen Sie den Rest des folgenden Codes. Die andere Sache ist, dass der Kreis voll ist. Wir zeichnen alle Scheiben, aber es würde besser aussehen, wenn wir nur ein paar davon nach dem Zufallsprinzip zeichnen würden. Dafür können wir unser Beans-Array verwenden. Wir fügen hier eine weitere Bedingung hinzu. Wenn been gleich Null ist, fahren Sie fort. Und dann innerhalb der Schleife , in der wir die Behälter definieren. Wir können einige von ihnen nach dem Zufallsprinzip auf Null setzen. Wenn der Zufallswert größer als 0,5 ist, entspricht Been gleich Null Das ist jetzt besser. Sie können es auch mit anderen Audiophilen testen , wenn Sie möchten Das ist unser Sketch. Ich hoffe es gefällt dir. Als kleinen Bonus werden wir in der nächsten Lektion eine Variante davon sehen. 39. Erfahre mehr über die Postererstellung: Das Poster, das unsere Skizze inspiriert hat basierte auf einem anderen Poster, einem klassischen des Schweizer Designers Joseph Mueller Brockman Es ist von 1955 und hat viele Menschen inspiriert Es gibt Dutzende von Remixen und Variationen davon online. Wir werden hier unsere eigene Version erstellen, basierend auf dem Code, den wir bisher geschrieben haben Ich würde vorschlagen, eine Kopie der Skizze zu erstellen, bevor Sie beginnen. Ich nenne meinen Sketch Audio Two und führe ihn dann über das Terminal aus. Ich zeige den Online-Editor dieses Mal nicht , weil du schon weißt, was zu tun ist. Wir werden damit beginnen, die Anzahl der Scheiben auf nur eins zu ändern. Deklarieren Sie dann eine neue Variable namens PHI, was ein griechischer Buchstabe ist, um den Winkel der Scheibe zu speichern. Wir können diese Zeile löschen, die einige Beans auf Null setzt , und wenn wir zur Render-Funktion herunterscrollen, können wir diese Bedingung auch entfernen Und diese Zeile, mit der sich die Zeile ändert, dann setzen wir pi auf Slice Time Mapping Und wo wir den Bogen zeichnen, werden wir Slice gegen Pi austauschen Okay, das ist schon nicht allzu weit von unserer Referenz entfernt, aber wir müssen eine Lücke zwischen den Bögen lassen und das können wir tun, indem wir dem Radius ein paar Pixel hinzufügen Oder in diesem Fall ist es besser, wenn wir den Radius vor der Bogenfunktion erhöhen den Radius vor der Bogenfunktion Und dann erhöhen Sie ihn am Ende erneut um die andere Hälfte der Linienbreite Jetzt müssen wir diese Bögen nur noch so verschieben , dass sie am Anfang nicht alle ausgerichtet sind Wir können hier oben ein neues Array namens Rotationsoffsets erstellen hier oben ein neues Array namens Rotationsoffsets Wir benötigen wieder einen Wert pro Kreis , damit wir diese Schleife überhaupt verwenden können Lassen Sie uns einen neuen für die Rotation erstellen, um die Dinge voneinander zu trennen. Drehung des eingestellten Punktdrucks, zufälliger Punktschlüssel, mathematischer Punkt Pi mal -0,25 und mathematischer Punkt Pi Dadurch erhalten wir einen zufälligen Winkel zwischen -45 Grad und plus 45 Grad. Jetzt können wir den Kontext einmal pro Kreis drehen , direkt nach dem Speichern des Kontextpunkts geben wir den Punkt drehen, Drehung der gesetzten eckigen Klammern I ein. Wenn wir uns das Referenzposter noch genauer ansehen wollen , geben wir den Punkt drehen, Drehung der gesetzten eckigen Klammern I ein. Wenn wir uns das Referenzposter noch genauer ansehen wollen , können wir 90 Grad vom ursprünglichen Also minus Mathepunkt Pi mal 0,5. Und wenn Ihnen die Bewegung im Uhrzeigersinn nicht gefällt, können Sie einfach die gesamte Skizze auf der Y-Achse spiegeln , indem Sie den Maßstab auf eins und minus eins setzen Letzte Anpassung: Stellen Sie die erste Linie mit dieser 210 ein. Und da ist unsere bescheidene Hommage an ein klassisches Stück Grafikdesign Sie können versuchen, eine andere Anzahl von Kreisen oder Scheiben oder ein anderes S in der Funktion zu verwenden , oder Sie können sogar versuchen, etwas Farbe hinzuzufügen , das auf Delirys basiert , die wir in den vorherigen Lektionen gesehen haben Eine weitere Idee ist, dass Sie Ihre eigenen Designreferenzen finden und versuchen , sie zu rekrutieren und sie auch audioreaktiv zu machen Jim. In dieser Lektion haben wir gelernt, wie man Audiodaten nutzt , um audioreaktive Bilder zu erstellen . Wir haben nur an der Oberfläche der Web-Audio-API gekratzt. Ich hoffe, Sie fanden es interessant und vielleicht hat es Sie neugierig gemacht , weiter nachzuforschen und mehr darüber zu erfahren Jetzt gehen wir von Audio über und beginnen in der nächsten Lektion mit etwas anderem. 40. Ein einzelnes Partikel zeichnen: In dieser Lektion werden wir unsere letzte Skizze erstellen, und das Thema ist Partikel. Ertrunkene Partikel sind nichts Besonderes. Sie können nur winzige Kreise sein. Der interessante Teil ist, wie sie sich verhalten. Wie bisher zu Beginn jeder Lektion müssen wir eine neue Skizze erstellen. im Online-Editor Erstellen Sie im Online-Editor noch einmal einen weiteren Fork der Standardvorlage. Geben Sie im Terminal Canvas, Dash Sketch, Sketch Particles, Dash Dash New ein, öffnen Sie die JavaScript-Datei im Editor und ändern Sie die Abmessungen auf 1080 x 1080. Wir fangen einfach an und zeichnen einzelne Partikel. Aber zuerst müssen wir definieren, was Partikel sind. Am Ende der Datei werden wir im Konstruktor eine neue Klasse namens particle erstellen , ein Objekt mit den drei Eigenschaften X, Y und Radius mit einem Standardwert von 10. Dann speichern wir diese Eigenschaft als Zahlenvariablen, wobei dieser Punkt X gleich X, dieser Punkt Y gleich Y und dieser Punktradius gleich Radius Im Moment benötigen wir nur eine Funktion zum Zeichnen des Partikels, die den Kontext als Parameter berücksichtigt Dieser Teil sollte jetzt sehr vertraut sein. Wir beginnen mit Context Dot Save und Context Dot Restore, dann übersetzen wir den Kontext diesen Punkt X und diesen Punkt Y, dann beginnen wir eine neue Form mit dem Kontext Punkt Begin Path und zeichnen einen Kreis mit dem Kontext-Punktbogen x0y0 Dieser Radius von Null bis Mathe Pi mal zwei, dann rufen wir fill auf, und wir können den Feldstil diesmal auf Y setzen, also zurück zum Anfang der Datei ucrite und ray, die ucrite Um ein anderes Partikelobjekt zu speichern, können wir innerhalb der Skizzierfunktion X, Y und Partikel deklarieren Um das Array zu füllen, benötigen wir nun eine Schleife mit vier Schleifen, und ich werde das vorerst auf nur eine Iteration festlegen Wir können die Zahlen später erhöhen. X wird sich in der Mitte des Bildschirms befinden, also mal 0,5 und Y-Höhe mal 0,5. Denken Sie daran, dass diese Werte in der Skizzierfunktion verfügbar sind, wir sie jedoch deklarieren müssen, bevor wir sie verwenden können. Jetzt kann es sich bei einem Partikel um ein neues Partikel handeln, das sich in X und Y bewegt, und wir können den Radius als Standardwert beibehalten. Und dann schieben Sie Partikel in die Partikelanordnung. Gehen Sie zur Renderfunktion über, ändern Sie die Hintergrundfarbe auf Schwarz und erstellen Sie für jedes Partikel eine Schleife mit dem Namen Partikelpunkt w, der den Kontext weitergibt. Und da ist unser Partikel, passe A in der Mitte der Leinwand an und es ist nicht sehr aufregend Um es interessanter zu machen, müssen wir ihm mehr Eigenschaften hinzufügen, und wir werden uns einige Namen aus der Physik leihen X und Y können als Position bezeichnet werden. Dann benötigen wir zwei weitere Eigenschaften für die Beschleunigung, AX und AY. Zwei weitere für die Geschwindigkeit, VX und VY, und zwei weitere für die Anfangsposition, und IY, die im Grunde Kopien von X und Y sind. Dann benötigen wir eine neue Funktion namens update, die wir für jeden Frame der Skizze aufrufen, damit wir zur Einstellung wechseln und animate auf True setzen können True setzen Kurz bevor wir Particle Dot Draw aufrufen, wir auch Particle Dot Update Innerhalb von Update werden wir die Geschwindigkeit um die Beschleunigung erhöhen , wobei VX plus dieser Ax und dasselbe für VY und AY entsprechen Wir werden die Position um die Geschwindigkeit erhöhen , wobei dieser Punkt X plus diesem Punkt X entspricht und dieses Y-Plus diesem Punkt Y entspricht. an Ort und Stelle ist, müssen Sie nur noch etwas Kraft auf das Sie nur noch etwas Kraft auf können wir tun, indem wir die Beschleunigung, vorerst nur ax, um eine winzige Zahl wie 0,001 erhöhen vorerst nur ax eine winzige Zahl Dadurch beschleunigt sich das Partikel allmählich und schießt vom Bildschirm ab In der nächsten Lektion werden wir uns mit interessanteren Möglichkeiten befassen, Kräfte auf das Teilchen auszuüben . 41. Über das Aufbringen von Kräften lernen: Wir werden dafür sorgen, dass sich das Partikel vom Cursor wegbewegt. Wir müssen uns erneut mit einem Thema befassen, das wir zuvor behandelt haben, nämlich der Cursorinteraktion Dieser Teil wird Ihnen bekannt vorkommen und Sie können Sketch Curves gerne öffnen , um Code von dort zu kopieren , wenn Sie möchten Oder wir können es einfach noch einmal eingeben , da nicht viel zu tippen ist Wir beginnen mit einer globalen Variablen namens I Canvas. Und setzen Sie sie auf Canvas , eine Eigenschaft, die wir auch im Rahmen der Sketch-Funktion verfügbar machen müssen im Rahmen der Sketch-Funktion Dann fügen wir dem Canvas einen Event-Listener hinzu. Bei gedrückter Maus wird der Handler nach der Sketch-Funktion bei gedrückter Maus Wir deklarieren eine neue Funktion, die bei gedrückter Maus aufgerufen wird das Ereignisobjekt E als Parameter verwendet. Hier fügen wir dem Fenster zwei neue Listener hinzu, einen für die Mausbewegung und einen für die Mausbewegung nach oben Diesmal bewege ich mich etwas schneller , weil wir das schon einmal gesehen haben Deklarieren Sie bei Mausbewegung auch mit E als Parameter und bei Mausklick ohne Parameter. Hier wissen wir, dass wir den Event-Listener entfernen können, wir fügen ihn mit gedrückter Maus Zurück zur Mausbewegung. Wir können die Position des Cursors proportional zum Maßstab der Skizze mit derselben Formel berechnen Cursors proportional zum Maßstab der , die wir für Sketch Curve Entro verwenden X entspricht dem Abstand zwischen Klammern, E Offset X geteilt durch L Leinwand, Punkt, Offsetbreite, dann multiplizieren Sie das mit der Breite der Duplizieren Sie dann die Linie und tauschen Sie X gegen Y und Breite gegen Höhe Diesmal müssen wir diese Zeilen nicht kopieren und mit gedrückter Maus hineinfügen. Stattdessen können wir die Logik an eine Mausbewegung delegieren, indem wir sie bei gedrückter Maus aufrufen Jetzt müssen wir die Position des Cursors in einem Objekt speichern , das in der gesamten Skizze sichtbar ist Also lass uns hier oben einen erstellen. Nennen Sie ihn Cursor und geben Sie ihm zwei Eigenschaften, X und Y. Beide beginnen mit derselben großen Zahl, dann nach innen bei einer Mausbewegung setzen wir den Cursor X gleich X und den Cursor Y gleich Y. Drinnen mit der Maus nach oben können wir diese Werte wieder auf eine große Zahl zurücksetzen, nur um sicherzustellen , dass sie sich nicht in der Nähe des Partikels befinden , wenn wir den Cursor nicht Wir können dieses Objekt jetzt protokollieren um zu sehen, ob Und wir sollten um diese Ecke eine Zahl nahe Null und um diese Ecke eine Zahl nahe 1080 sehen und um diese Ecke eine Zahl nahe . Jetzt müssen wir den Abstand zwischen dem Cursor und dem Partikel berechnen . Wir haben das schon einmal in unserer IT-Testfunktion gemacht. Dieses Mal werden wir es im internen Update machen. Lassen Sie uns ein paar Variablen deklarieren. DX DY, DD und dieses Delta. DX ist der Unterschied zwischen diesem Punkt X und Cursorpunkt X. DY ist der Unterschied zwischen diesem Punkt Y und dem Cursorpunkt. Und DD ist die Hypotens, also die Quadratwurzel des mathematischen Punktes, dx mal dx plus dy mal dy Dann brauchen wir eine Bedingung, wenn DD kleiner als etwas ist, und das kann auch in einer Eigenschaft gespeichert werden Also lass uns hier oben einen erstellen. Nennen Sie es Min dist und setzen Sie es auf 100. Nun zurück zur Bedingung, wenn DD kleiner als dieser Punkt Min Dist ist, und hier werden wir die Beschleunigung einstellen. Wir wollen einen Wert, der proportional zum Kehrwert der Entfernung ist, was bedeutet, dass proportional zum Kehrwert der Entfernung ist, was bedeutet, er umso stärker ist, je näher der Cursor am Partikel ist Und deshalb brauchen wir eine Variable namens Delta, was einer Mindestentfernung minus der aktuellen Entfernung DD entspricht Dann kann Ax auf DX geteilt durch DD multipliziert mit diesem Delta gesetzt geteilt durch DD multipliziert mit diesem Delta Und das Gleiche gilt für AY. Wenn wir nun klicken und den Cursor in die Nähe des Partikels ziehen , schießt er in die entgegengesetzte Richtung. Die Druckkraft ist zu stark. Wir müssen das, was wir berechnet haben, mit einer kleinen Zahl multiplizieren, die wir in einer neuen Eigenschaft namens Push-Faktor speichern können . Ich werde ihn auf 0,02 setzen und dann sowohl AX als auch AY damit multiplizieren Das ist die Schubkraft und wir wollen auch die Zugkraft erhöhen. Dadurch wird das Partikel wieder in seine ursprüngliche Position gebracht. Jetzt schreibe ich es vor der Druckkraft, weil es ständig auf das Partikel einwirkt ständig auf das Partikel unabhängig davon, wo sich der Cursor befindet. Diesmal ist dx dieser Punkt x minus dieser Punkt X, und Dy ist dieser Punkt ay minus diesem Punkt Y. Ax wird Dx mal dieser Punkt-Pull-Faktor sein , den wir gleich deklarieren werden. Und AY ist DY mal Pullfaktor. Lassen Sie uns den Pull-Faktor hier oben deklarieren ihn auf 0,004 setzen Immer wenn wir diese Bedingung eingeben, die Druckkraft Vorrang vor der Zugkraft, aber wir wollen, dass sie addiert werden, also brauchen wir plus gleich Dadurch versucht das Partikel, zu seiner ursprünglichen Position zurückzukehren, aber es wird nie wirklich gestoppt Es gewinnt weiter an Dynamik und schießt über das Ziel hinaus. Wir müssen es mit einem Dumpingfaktor beruhigen , den ich auf 0,95 setzen werde Und das verwenden wir, nachdem wir die Geschwindigkeit berechnet haben, also multiplizieren wir sowohl VX als auch VY mit diesem Punkt Dam-Faktor Jetzt ist das Verhalten viel besser unter Kontrolle, und wir können spüren, wie beide Kräfte auf das Teilchen einwirken, wenn wir versuchen , es wegzudrücken, und es versucht, zu seiner ursprünglichen Position zurückzukehren Das macht Spaß, aber es ist nur ein einzelnes Partikel. In der nächsten Lektion werden wir mehr davon machen. 42. So verteilt man die Partikel: Wir werden mehrere Partikel erzeugen, und wie wir es bereits in diesem Kurs getan haben, werden wir sie mithilfe einer Zufallsfunktion auf der Leinwand verteilen . Wir werden eine andere Funktion als Canvas Sketch UTLT Time namens Inside Circle verwenden Sketch UTLT Time namens Inside Circle Wenn Sie den Online-Editor verwenden, gehen Sie erneut zum Feld Abhängigkeiten und geben Sie CasketchTo Sie müssen das zufällige Modul oben in der Datei portieren oben in der Datei Skizze auf Leinwand, zufällig. Dann können wir ein neues Array erstellen, um die zufälligen Positionen zu speichern, die als Pose bezeichnet werden. Ändern Sie unseren Wert für die Schleife 1—200 und rufen Sie dann einen zufälligen Punkt innerhalb eines Kreises Der erste Parameter ist der Radius, den ich auf 400 setze Und der zweite Parameter ist das Array für das zufällige X und Y, das die Pose sein wird Diese Funktion füllt das Array also mit einem zufälligen X und einem zufälligen Y auf. Wir haben bereits X und Y in der Mitte der Leinwand, also müssen wir nur die eckige Pauseklammer Null zu X und die eckige Klammer eins zu Y hinzufügen . Und jetzt haben wir unsere Partikel zufällig innerhalb des Kreises verteilt Wir haben schon einmal eine zufällige Verteilung verwendet, und obwohl sie funktioniert und ziemlich gut aussieht, ist sie manchmal auch ein Wir können andere interessante Möglichkeiten finden die Partikel zu verteilen, und auch hier können wir uns von einer vorhandenen Referenz inspirieren lassen. Ich habe ein bisschen geblättert und dieses Bild von Paul McNeil gefunden. Ich denke, wir werden versuchen, das in einem Code nachzubilden Ich behandle diese Punkte Ich werde Ihnen helfen, die Logik hinter der Neuerstellung dieses Partikellayouts zu verstehen Aber die Absicht hier ist , Sie dazu zu bringen, über die Logik hinter jeder Anordnung oder jedem Layout nachzudenken die Logik hinter jeder Anordnung oder jedem , das Sie erstellen möchten Ich mache eine schnelle Analyse dieses Themas. Ich sehe einen konzentrischen Kreis der von der Mitte ausgeht und nach außen wächst Wenn sie größer werden, schaffen sie Platz für mehr Punkte, und die Punkte scheinen einen gewissen Abstand voneinander einzuhalten Je kleiner die Punkte sind, desto weiter sind sie voneinander entfernt. Das gibt uns einen Ausgangspunkt. Wir müssen herausfinden, wie viele dieser Punkte wir entlang der Umfänge dieser Kreise platzieren können entlang der Umfänge dieser Sie erinnern sich vielleicht , dass die Formel für den Umfang des Kreises zwei Pi R lautet. Wenn wir also einen Kreis mit einem Radius von 100 nehmen, wären die Umfänge zwei mal drei Punkte, 14 mal Das ist ungefähr 628. Wir können den Kreis öffnen und die Umfänge als eine einzige Linie darstellen Um dann die Anzahl der Punkte zu ermitteln, teilen wir diese durch die Breite jedes Punktes Sagen wir, wenn die Breite jedes Punktes 60 ist, dann sind sechs bis 8/60 zehn Punktieren Sie etwas mit einer Bodenpunktzahl, was bedeutet, dass wir zehn volle Punkte entlang des Umfangs platzieren können zehn volle Punkte entlang des Umfangs Ich hoffe, diese Erklärung jetzt fertig. Schreiben wir sie im Code Wir beginnen mit ein paar neuen Kreisen mit variabler Zahl, die auf 15 gesetzt sind, dann den Punktradius , der 12 entspricht, dann den Kreisradius , der bei Null beginnen kann, dann den Anpassungsradius, der dem anfänglichen Punktradius entspricht. Kann die vier Schleifen, die wir zuvor geschrieben haben, auskommentieren und eine neue Schleife von Null bis Zahl von Kreisen schreiben. Darin benötigen wir eine weitere Schleife, bei der der Buchstabe G von Null auf NumFit wechselt Numfit ist die Anzahl der Punkte, die wir entlang des Kreises einpassen können, und wir müssen sie noch berechnen Zuerst benötigen wir die Umfänge, also mathematischen Punkt Pi mal zweimal den Kreisradius, und die NumFit, also die Umfänge geteilt durch die Breite des Punktes , also den Anpassungsradius , Wir wollen keine Verstöße, also müssen wir diesen Wert unterschreiten, und wir müssen auch den allerersten Punkt berücksichtigen , wenn der Kreisradius Null ist also müssen wir diesen Wert unterschreiten, und wir müssen auch den allerersten Punkt berücksichtigen, wenn der Kreisradius Null ist, also brauchen wir eine Ausnahme. Wir können ihn hier als eine einzige Zeile schreiben. Wenn ich diese Formel verwende, wird L gleich eins gesetzt. Wenn ich also Null ist, wird Non-Fit Eins sein. Andernfalls wird es auf der Grundlage der Circum-Referenzen berechnet Die letzte Variable hier wird die Größe des Segments sein. Nachdem wir den Kreis durch Unpassung geteilt haben, also mathematischer Punkt Pi mal zwei geteilt durch Nu-Fit. der inneren Schleife können wir nun den Winkel jedes Punktes berechnen In der inneren Schleife können wir nun den Winkel jedes Punktes berechnen und mit einer neuen Variablen namens Theta beginnen entspricht der Passschicht mal G. Um die X- und Y-Position zu ermitteln, verwenden wir eine Formel, die wir bereits gesehen haben bei der X der Kosinus von Theta mal dem Radius des Kreises und Y der Sinus von Theta mal dem Radius ist. Dieser nächste Teil ist derselbe wie zuvor, dass Partikel gleich neuem Partikel, X und Y und Partikelpunktschiebepartikel sind. Und jetzt der wichtigste Teil , der darin besteht, den Radius des Kreises bei jeder Iteration weiter zu vergrößern Also Kreisradius plus gleich Fußradius mal zwei. Lassen Sie uns das überprüfen und wir sind irgendwo angekommen, aber noch nicht ganz da Wir müssen den Kreis in die Mitte der Skizze verschieben, also müssen wir sowohl zu X als auch zu Y wieder Breite mal 0,5 und Höhe mal 0,5 addieren . Die Punkte liegen sehr dicht beieinander, also müssen wir einige Lücken hinzufügen, eine Variable für die Lücken zwischen den Kreisen Ich setze sie auf acht und füge sie dann zum Kreisradius am Ende der Schleife hinzu. Wir benötigen auch eine Variable für die Lücke zwischen den einzelnen Punkten Ich setze sie auf vier und addiere sie hier zur Breite des Punktes. Um nun einige dieser Punkte kleiner zu machen, setzen wir den Partikelradius auf den Punktradius. Am Ende der Schleife können wir ihn ändern, indem wir die Zahl der durch die Zahl dividierten Kreise multiplizieren. Eigentlich brauchen wir das Gegenteil, eins minus geteilt durch die Zahl der Kreise, und wir haben es fast geschafft. Diese Linie ist eine Änderung der Größe der Punkte unter Verwendung einer linearen Funktion. Wie wir in der vorherigen Lektion gesehen haben, können wir auch die ESN-Funktion verwenden Lassen Sie uns also dasselbe Modell importieren. ESS, vergessen Sie nicht, die Abhängigkeit zu installieren , wenn Sie einen Online-Editor verwenden, dann kostet es so viel wie ESS zu benötigen, und wir können es hier als eins minus Est quadout verwenden, ich dividiere durch numerische Kreise. Das ist eleganter. Und obwohl es nicht genau wie die Referenz ist, denke ich, es ist ziemlich nah dran und es sieht besser aus als reiner Zufall Um das Verhalten interessanter zu gestalten, können wir nun in die Partikelklasse gehen und die Werte randomisieren Statt eines Push-Faktors von 0,02 können wir einen Zufallsbereich zwischen 0,01 und 0,02 Das Gleiche gilt für den Pull-Faktor mit einem Bereich zwischen 0,002 und 0,006 Ein Dump-Faktor kann zwischen 0,90 und 0,95 variieren. Der Mindestabstand kann auch zwischen 100 und 200 variieren. Lassen Sie uns das ausführen Ich finde, es sieht in Ordnung aus. Die Partikel verhalten sich immer noch genauso wie zuvor, aber irgendwie fühlt es sich besser an , sie mit diesem Layout zu durchqueren. Wir haben das Verhalten der Partikel und wir haben eine interessante Verteilung, und in der nächsten Lektion werden wir einige Farben einführen. 43. Skalierung und Farben ändern: In der Aktualisierungsfunktion haben wir Zugriff auf einige Werte, haben wir Zugriff auf einige Werte denen wir die Grafik beeinflussen können Zum Beispiel können wir die Partikel vergrößern , weiter sie von ihrer Ausgangsposition entfernt sind Lassen Sie uns eine neue Eigenschaft namens Skala erstellen und sie auf eins setzen. Dann multiplizieren wir in der Zeichnungsfunktion den Radius mit der Skala. Beim Update, bei dem wir DX und DY für die Ausgangsposition berechnen, können wir auch die Hypotens berechnen und diese Linie kopieren Stell es hier auf, um DD zu bekommen. es dann auf DD aufbauen, können wir den Maßstab abbilden und wir wissen genau , welches Modell wir dafür benötigen . Also lass es uns importieren. Es ist das mathematische Modell von Canvas SketTL und dann zurück zur Skala. Wir werden den Bereich auf der Grundlage von DD 0-200 abbilden Ändern Sie die Skala der Partikel 1-5 speichern Sie dann die Datei, und das sieht Könnten Sie dieselbe Idee verwenden und weitere Eigenschaften der Partikel wie die Farben ändern ? Das passt auch gut zur Colormap-Bibliothek Wir verwenden es für Skizzierkurven. Wir haben es bereits ohne Styling, aber wenn Sie ein Online-Editor sind, müssen Sie das für jede Skizze tun Geben Sie also die Farbtabelle ein, um die Formatierung aufzuheben. Und dann benötigen Sie die Farbkarte für die Vorderseite der Farbkarte. Deklarieren Sie eine neue Variable namens colors, setzen Sie sie auf Colormap, öffnen Sie geschweifte Klammern und für die Map selbst verwende ich Varies. Für die Anzahl der Farben entscheide ich mich dann für 20. Wir können diesen kommentierten Outloop löschen weil wir ihn nicht mehr verwenden werden , und dann nach unten zur Partikelklasse scrollen und eine neue Eigenschaft namens color deklarieren, für die Farbe eckiger Klammern, Null, gesetzt werden kann Bei der Aktualisierung wollen wir einen weiteren abgebildeten Bereich, genau wie wir es für die Skala getan haben Aber dieses Mal für den Index des Farbarrays, sodass wir eine Variable für den Farbindex erstellen und sie auf den mathematischen Punktboden setzen können , weil der Index eine Ganzzahl für mathematische Punktkarten sein muss, der Bereich DD von Null bis Hundert bis Null und die Länge der Farbpunkte Minus eins. In diesem Fall möchten wir auch die Klammer 22 als letzten Parameter festlegen. Aktualisieren Sie dann die Farbeigenschaft auf Farben, eckige Klammern und die Farbe. In der Zeichenfunktion können wir den Feldstil auf diese Punktfarbe aktualisieren. Das sieht nett aus, aber vielleicht ist es ein bisschen seltsam, kleine Partikel vor den großen zu sehen. Sie werden in derselben Reihenfolge gezeichnet. Sie wurden geschaffen. Wenn Sie also möchten, dass die großen Partikel im Vordergrund erscheinen, müssen wir ihre Reihenfolge in der Anordnung ändern. Das können wir mit einer Funktion des Arrays namens sort tun. Es funktioniert, indem es Wertepaare vergleicht und die Arrays an einem Ort sortiert Wir haben zufällig einen geeigneten numerischen Wert für die Sortierung in Form unserer Skaleneigenschaften Im Grunde wollen wir, dass kleinere Skalen zuerst gezeichnet werden und große Skalen zuletzt gezeichnet werden. Das Array kann in aufsteigender Reihenfolge der Skalen sortiert werden , wobei die Partikelpunktsortierung A und B verwendet wird. Anschließend wird die Punktskala bei Skala minus B zurückgegeben Das sieht jetzt natürlicher aus. Wir verwenden eine Farbkarte, um Partikeln Farben zuzuweisen, aber es gibt noch eine andere Technik , um ihnen Farben zuzuweisen, die wir in der nächsten Lektion kennenlernen werden. 44. Erstellen von Bilddaten: Dies ist unsere letzte Lektion, also werden wir etwas Fortgeschritteneres ausprobieren. Wir legen die Farbe unseres Partikels fest, legen ein Bild zugrunde und mischen diese dann später mit den Farben aus einem anderen Bild. Wir brauchen ein paar Bilder, mit denen wir arbeiten können. Ich werde zwei von nsplash.com auswählen. Sie können kostenlos heruntergeladen werden und haben normalerweise Das erste, das ich auswählen werde, wird dieses Porträt von Art Huntington Und ich wähle diese Farbe auch für den Ballon von Jess Wir brauchen nicht wirklich ein hochauflösendes Bild. In der Tat, noch besser, wenn sie Les sind. Ich ziehe sie in Photoshop, schneide sie auf ein quadratisches Format zu und skaliere sie auf 64 mal 64 Pixel herunter Ich speichere sie als Bild. 01 und Bild 02 befinden einem Ordner namens Images, ich in den Skizzen erstellt habe Jetzt zurück zum Code. Wir werden eine neue Synchronizer-Funktion namens Load Image erstellen eine neue Synchronizer-Funktion namens Load Sie verwendet eine URL als Parameter und gibt ein neues Versprechen zurück. Mit Resolve und Reject innerhalb des Versprechens können wir ein neues Bildobjekt erstellen. Wenn das Bild dann geladen ist, geben wir resolve zurück und übergeben das Bildobjekt. Falls ein Fehler auftritt, lehnen wir das Versprechen und setzen dann die Bildquelle auf die URL, die wir übergeben haben. Dies ist eine Synchronisierungsfunktion und wir möchten, dass unser Bild geladen wird, bevor wir mit dem Skizzieren beginnen. Wir müssen also etwas Ähnliches wie in der Audioskizze tun Ähnliches wie in der Audioskizze und darin eine Sync-Startfunktion erstellen. Wir können unser erstes Bild laden, wobei Emga entspricht, um auf das Laden des Bildes zu warten Und hier wird die URL für mich Bild 01 sein. Dieser Pfad bezieht sich auf den Sketches-Ordner Wenn Sie also einen anderen Namen oder einen anderen Ordner verwenden , stellen Sie sicher, dass Sie den richtigen verwenden Wenn Sie einen Online-Editor verwenden, benötigen Sie ebenfalls eine öffentlich gehostete URL, genau wie die Audiodatei aus der vorherigen Lektion Diese von Splash finden Sie in den Links unter dem Video. Und nur für den Online-Editor müssen Sie Cross-Origin auch auf Anonym setzen. Andernfalls können Sie die Daten nicht aus einem Bild lesen , das aus einer anderen Domain stammt. Hier verwenden wir es EMGA, was wir noch nicht deklariert haben. Also lass uns das oben in der Datei machen. Unser Ziel ist es, Daten aus dem Bild zu extrahieren, aber das können wir direkt aus dem Bildobjekt machen. Wir müssen das Bild zuerst auf eine Leinwand zeichnen, und es muss nicht dieselbe Leinwand sein , die wir für unsere Skizze verwenden Lassen Sie uns also eine neue Leinwand erstellen und sie als EMGA Canvas speichern, was dem Dokumentpunkt Create Element Compass entspricht Und speichern Sie auch den EMGA-Kontext, nämlich Emga Canvas, Canvas Dot G Context zwei D. Die Abmessungen dieser neuen Leinwand entsprechen denen des Bildes, das wir gerade Also MGA mit einer ENGA-Höhe, und wir brauchen nur eine Sache aus diesem Kontext, das Zeichnen von Image Emga X Null und Y Null Wenn wir sehen wollen, was sich auf diesem neuen Canvas befindet, können wir es mit einem Context-Draw-Bild, Emga Canvas 00, in unseren Haupt-Canvas zeichnen Und da ist unser kleines Bild in der oberen linken Ecke. Das hier zu sehen, kommt Ihnen vielleicht bekannt vor. Um nun Farben aus dem Bild zu extrahieren , werden wir Bilddaten abrufen. Lassen Sie uns in einer Variablen namens EMGA-Daten speichern, was dem AMGA-Kontext Ruft Bilddaten von X Null und Y Null bis MGA-Breite und MGA-Höhe Dadurch wird ein Objekt vom Typ Bilddaten zurückgegeben, und die Eigenschaft, an der wir interessiert sind, wird auch als Daten bezeichnet. Das ist also der, den wir hier speichern. Es ist ein großes Array mit sequentiellen LGBA-Werten. Für jedes Pixel des Bildes erhalten wir also vier Elemente im Array Der nächste Schritt besteht darin, das Pixel auf dem Bild zu finden, das der X- und Y-Position jedes Teils entspricht. Das äquivalente Bild X ist X geteilt durch die Breite, multipliziert mit der Bildbreite Das muss eine Ganzzahl sein, also müssen wir sie mit einem mathematischen Punktboden umschließen, dann die Linie duplizieren und diese gegen Y und Höhe austauschen Um nun den Index dieser Position im Bilddatenarray zu ermitteln , verwenden wir etwas Ähnliches wie das, was wir zuvor in unserer Lektion über Raster- und Audiodaten gesehen haben . Der Index ist AY mal die Breite des Bildes plus X, und da das Array vier Elemente pro Pixel RGBA hat, müssen wir dies mit vier multiplizieren Der rote Wert des Pixels entspricht den Emga-Daten, eckigen Klammern, Index plus Null, Grün entspricht Index plus eins und Blau entspricht Index plus zwei Dann können wir eine Farbzeichenfolge erstellen, die A heißt, Bectis für Zeichenkettenliterale, dann RGB, und zwischen Klammern setzen wir R Deklarieren wir diese Variable, die wir gerade zitiert haben. Dann übergeben wir cool A an das neue Partikel, deklarieren es im Konstruktor und wir können es unserer bestehenden Farbeigenschaft zuweisen und diese Zeilen auskommentieren oder aus dem Update löschen Jetzt können wir sehen, dass unser Partikel die Farbe aus dem Bild verwendet Es sieht noch nicht gut aus, also lassen Sie uns die Lücken verkleinern und mehr Kreise verwenden. Sagen wir 30. Wir können den Partikel auch anhand der Helligkeit des Pixels oder eines der Farbkanäle fertig stellen . Wir können den Radius dem Bereich des roten Kanals von Null und 255 bis Eins und 12 zuordnen. Der Effekt ist interessant, aber es gibt noch eine weitere Technik, die ich behandeln möchte, bevor wir zum Abschluss kommen. Ähnlich wie bei der Farbkarte werden wir die Farben auf der Grundlage der Entfernung der Partikel zu ihren Ausgangspositionen ändern der Entfernung der Partikel zu ihren Ausgangspositionen und Farben aus einem zweiten Bild verwenden. Überall im Code , wo wir EMGA haben, werden wir auch EMGB haben In der Startfunktion entspricht EMGB dem Laden von Bild, Bild 02, dann hier oben EMGB deklarieren und all diese Zeilen duplizieren EMGB deklarieren und all diese Zeilen duplizieren und A gegen B, EMGB Canvas, EMGB-Kontext, Breite und Höhe, Draw Image, EMGB-Daten austauschen EMGB Canvas, EMGB-Kontext, Breite und Höhe, Draw Image, und hier Call B deklarieren Wenn dann innerhalb der Schleife, wenn Ihre beiden Bilder dieselbe Breite und Höhe haben wie meine, müssen Sie nicht berechnen Sie erneut und Sie müssen nur RG und B duplizieren und aus EMGB-Daten lesen und dann Call B setzen Diesmal müssen wir Cd B nicht in das neue Partikel übergeben . Stattdessen übergeben wir ein neues Objekt, die Interpolation zwischen Call A und Call B. Dafür benötigen wir eine neue Lackierung namens Sie kennen die Routine bereits. Gehen Sie zum Feld Abhängigkeit und geben Sie Crawler Interpolate ein. Drücken Sie auf dem Terminal C, um den Prozess PMI zu stoppen, Crawler Dann die Pfeiltaste nach oben drücken und Sketch Particles erneut ausführen . Als Interpolat aus Crowler-Interpolate importiert. Hier gehen uns die Variablennamen für Farbe aus, also nennen wir es Call Map und stellen es so ein, dass es zwischen eckigen Klammern interpoliert, genannt A und genannt B. Dies ist das Objekt, genannt A und genannt B. das wir an das neue Partikel übergeben , anstatt A aufzurufen. Wir können mit einer Eigenschaft beginnen, die Farbe so Dann werden wir beim Update dasselbe tun, was wir für den Maßstab tun, und Farbe auf Cool Map setzen und basierend auf DD von Null und 200 auf Null und eins mit dem Spannsatz auf True anordnen Null und 200 auf Null . wir uns nun bewegen, sieht der Cursor, wie Wenn wir uns nun bewegen, sieht der Cursor, wie die Partikel Farben aus beiden Bildern annehmen. Und hier ist ein Beispiel mit einem anderen Bildpaar. Das war eine lange Lektion, aber ich hoffe, es gefällt euch, was wir erstellt haben. Wir decken viel ab und haben viele Techniken gesehen. Jetzt sind Sie dran, all diese Techniken, die wir gelernt haben, anzuwenden all diese Techniken, die wir gelernt haben , um Ihre eigenen visuellen Künste zu machen. Vielen Dank, dass Sie an dem Kurs teilgenommen haben, und ich hoffe, er war nützlich für Sie. 45. Kursprojekt: Hallo Leute. Für das Klassenprojekt möchte ich, dass Sie im Internet nach einigen Kunstreferenzen von berühmten Künstlern suchen , die Sie mögen oder einem anderen Künstler und versuchen, die Kunst nachzuahmen indem Sie sie im Java-Stil codieren und sie statisch machen wie ein Stück eines Posters oder versuchen, sie zu animieren oder zu einem versuchen, sie zu animieren Audiovisualisierer zu machen Versuchen Sie, Ihrer Fantasie freien Lauf lassen und Ihr eigenes einzigartiges Kunstwerk zu schaffen Das ist es. Ich warte darauf, dass deine Kunstschöpfung sie in Form eines Kurses präsentiert. 46. Letzte Tipps: Hallo zusammen. Ich hoffe, dir hat die Reise gefallen. Wir haben an einigen Kompositionen zusammen gearbeitet, aber der wichtigste Teil war die Technik, die wir gelernt haben, denn jetzt kannst du sie übertragen, sie woanders beantworten und etwas anderes kreieren. Obwohl wir viel besprochen haben, gibt es immer mehr zu besprechen. Deshalb habe ich eine kleine Liste mit Tipps für dieses letzte Video vorbereitet. Bibliotheken. Wir haben während des gesamten Kurses einige benutzt, aber es gibt noch 1.000 mehr. Manche Leute machen gerne alles selbst, aber manchmal ist es so, als ob man versucht, das Rad neu zu Wann immer Sie etwas Bestimmtes benötigen, würde ich empfehlen, zuerst MPM zu überprüfen Möglicherweise hat bereits jemand anderes an demselben Problem gearbeitet Wenn Sie Daten aus einer CSV-Datei lesen müssen, gibt es dafür Bibliotheken. Wenn Sie mit den Vektoren arbeiten zwischen Farbräumen konvertieren oder Schriftdateien laden müssen, gibt es auch Bibliotheken dafür. In die Website einbauen. Eine Skizze kann von selbst leben. Sie können Ihre Komposition exportieren und ausdrucken oder irgendwo veröffentlichen. Wenn Sie Ihre Skizzen jedoch online teilen möchten, können Sie dies auch mit einem Build-Befehl tun Generieren Sie statische JavaScript - und HTML-Dateien, die überall als normale Webseite gehostet werden können Falls Sie Ihre Skizze in eine bestehende Website integrieren möchten , denken Sie daran, dass wir immer die Canvases-API verwenden. Kann die wertvollen Teile Ihres Codes in ein anderes Projekt kopieren und es ohne Canvas-Sketch ausführen, Viele Leute beginnen mit der Verarbeitung von P Five Dot GS mit kreativem Programmieren , und das macht sehr viel Sinn Es gibt großartige Tools. Ich bin es gewohnt, mit einer nativen API zu arbeiten. Aber wenn Sie bereits mit pfive dotGS vertraut sind, können Sie es zusammen mit Canvas Sketch verwenden Es gibt ein einfaches Beispiel aus dem Bereich der Atemwege, das Ihnen zeigt, wie das geht Dokumentation. Das ist offensichtlich. Schauen Sie sich unbedingt die Dokumentation an, die nicht nur für Canvas Sketch oder Canvas API gilt, sondern für jede API, mit der Sie arbeiten Jemand hat sich die Zeit genommen, seinen Code zu organisieren und zu dokumentieren, damit wir das nutzen können. Es ist da, um uns zu helfen. Das war's also für mich. Ich bin gespannt, was Sie mit dem, was Sie im Kurs gelernt haben, geschaffen haben. Denken Sie daran, Ihre Komposition im Forum der Klasse zu veröffentlichen . Ich freue mich darauf, sie zu sehen.