Transkripte
1. Einführung: Hallo. Mein Name ist Asher. Bejahend. Illegal. Und ich heiße Sie heute in meiner Klasse willkommen. Wir werden lernen, wie abstrakte Kunst programmgesteuert mit nur Javascript und
der Broza zu erstellen . Hier sind ein paar Beispiele der Kunst, die wir kreieren werden. Wie Sie sehen können, sind
diese Grafiken extrem flexibel. Indem wir einfach ein paar Variablen erreichen, können
wir ihre Formen und Farben dramatisch verändern. Nun, Sie denken vielleicht, es wird eine
Menge los sein, Matt, Matt, unsere Programmierung in dieser Klasse involviert. Aber nein, ich versichere Ihnen, dass das definitiv nicht der Fall ist. Dies wird eine sehr einfache Klasse sein, und es wird
auch leise scharf sein . Aber ich weiß, ob es, obwohl Sie mit einer neuen Art von Wissen bewaffnet sein werden, die Sie verwenden können während Sie etwas Kreatives tun. Wenn nichts anderes, werden
Sie zumindest in der Lage sein, einige sehr coole Hintergrundbilder mit Ihren Freunden zu erstellen und zu teilen. Also, worauf wartest du? Öffnen Sie einfach die nächste Lektion und wir werden direkt in den Code eintauchen
2. Den de Jong Attraktor zeichnen: Hallo und willkommen zurück alles, was Sie brauchen, um zu folgen. Was ich in dieser Klasse unterrichte, ist ein Browser. Open coat, Ben, sind jede andere kostenlose Online-Code-Editor zu verwenden, und Sie werden alle eingestellt sein. Sie können diesen Editor verwenden, ohne sich anzumelden, aber Sie haben eine bessere Erfahrung, wenn Sie sich anmelden. In Ordnung. Jetzt werden wir eine Bibliothek namens P five Dajae verwenden, um unsere abstrakten Grafiken zu erstellen. Nur damit Sie wissen, ist
dies eine sehr beliebte und leistungsstarke Bibliothek, und es ist ein JavaScript-Port von visueller Programmiersprache namens Verarbeitung. immer, um die Bibliothek im Codeplan-Editor verwenden zu können, brust du einfach einen Einstellungsknopf. Öffnen Sie den JavaScript-Reiter und geben Sie p fünf Punkt ein. Hier können Sie diese drei
Optionen sehen . Für den Moment brauchen
wir nur die ersten 2 Optionen. So werden Juden 50 J s erste. Nächste Juden,
seien fünf Punkte stumm noch Js. Wie Sie aus ihren Links sehen können. fünf Js ist der Kern Grafikbibliothek und sein fünf Punkt Dom Georges ist ein Add auf, dass ich dich liebt, mit dem Dharma von deiner Seite leichter zu arbeiten, können Sie jetzt den Speichern und
Schließen Knopf drücken , weil wir nichts anderes hinzufügen müssen. Wir werden keine schreiben. Es ist TML unser CSS-Code in dieser Klasse, so fühlen Sie sich frei, diese Fenster zu minimieren. Um etwas auf einer Webseite zu zeichnen, benötigen
Sie eine Leinwand mit 50 J s. Sie müssen die Leinwand innerhalb einer Funktion namens „fed up“ erstellen, also erstellen Sie zuerst den Satz der Funktion und darin eine Create Canvas-Funktion genannt. Diese Funktion benötigt zwei Argumente. Overt und Höhe. Sie können Ihre eigenen Werte basierend auf Ihren Präferenzen angeben. Ich werde sagen, 500 com ein 500 Jahr, so dass ich eine schöne quadratische Leinwand standardmäßig haben kann. Wir haben einen schwarzen Stift, den wir austrocknen werden. Wenn Sie die Farbe des Stifts ändern möchten, müssen
Sie die Strichfunktion verwenden. Nun erwartet diese Funktion drei Werte. Eine für die rot kompetent aus Ihrer Farbe, eine für die grüne Zuversicht und eine für die blaue Zuversicht. Also im Grunde will es die R-, G- und B-Werte getrennt, um unsere abstrakte Kunst mehr drei d aussehen zu lassen, obwohl ich schlage vor, dass Sie 1/4 Wert einschließen, der der Alfa Value und Alfa Off 50 sollte gut genug
sein. An dieser Stelle sind
wir bereit, mit dem Zeichnen zu beginnen. Um es zu fahren, ist 50 J. S. Sie müssen eine neue Funktion namens drop erstellen und alle Ihre Trocknung darin machen. Dies ist eine spezielle Funktion, die automatisch 60 Mal pro Sekunde aufgerufen wird, so dass Sie leicht Animationen erstellen können. Ok. Nun, um unsere abstrakte Kunst zu schaffen, werden
wir nur auf mathematische Gleichungen verwenden. Und das sind die Fragen. Zusammen definieren sie eine sehr beliebte Art von Handwerk namens Peter der Junge einen Traktor. Der Name ist nicht so wichtig, weil es Dutzende solcher Traktoren gibt und man sie alle auf Wikipedia finden
kann. Aber ich denke, die Anmerkung ist, dass dies ein Traktor ist sehr einfach. Es sind Gleichungen sehr Hai und sie enthalten nur, um metrische Funktionen zu ignorieren. Wie Sie vielleicht erraten haben, ist
die Idee, dass Sie gerade die einfachen Fragen gesehen haben, um Werte für X und Y zu erhalten und Blut ernennen. Sind das Koordinaten auf der Leinwand? Es ist extrem einfach. Wie Sie in den nächsten Minuten sehen werden. Fangen wir an, sie zu lösen. Zunächst einmal gibt es vier Koeffizienten in unseren Fragen. Hey B, C und D. Sie werden nicht in unserer Draw-Funktion pflegen, also lasst uns sie draußen deklarieren. Um die Dinge einfach zu halten, werde
ich sie an der Spitze unseres Programms als globale Variablen deklarieren. Sie können diesen Koeffizienten beliebige Zufallswerte angeben, aber stellen Sie sicher, dass sie alle innerhalb des Bereichs minus drei und blusterig liegen. Das ist sehr wichtig, denn sonst werden die Fragen nichts als nächstes ziehen. Die Gleichungen enthielten X und Y als Variablen, also lassen Sie uns erklären, sie zu hören, beide können eine als ihre Anfangswerte haben. nun innerhalb der Zeichenfunktion zwei neue Variablen definieren, Lassen Sie unsnun innerhalb der Zeichenfunktion zwei neue Variablen definieren,um die aktuellen Werte von X und y zu speichern. Ich werde sie alt,
ex und alt nennen . Warum und dann aktualisieren wir einfach X und Y basierend auf diesen Fragen. Um das Vorzeichen zu berechnen, können
wir direkt die Sinusfunktion verwenden und um das Co-Zeichen zu berechnen, können
wir die Kostenfunktion verwenden. Ich übersetze buchstäblich die einfachen Fragen in JavaScript-Code. Also nichts Besonderes, das hier passiert, tut dasselbe für die Hawaii-Frage, und das war's. Es gibt jetzt ein Problem. Unsere Gleichungen enthielten nur Zeichen und Co-Zeichen, so dass der Wert von X und Y sehr klein sein wird. In der Tat werden
sie immer innerhalb des Bereichs minus zwei und plus zwei liegen. Wenn Sie versuchen, einen Punkt mit diesen Werten zu plotten, wird
Ihre abstrakte Kunst extrem klein sein. Es wird fast unsichtbar sein. Also, was wir jetzt tun wollen, ist diese Werte so zu skalieren, dass sie in diesem Spiel die Dimensionen von unserer Leinwand tun, das ist sehr einfach, aber Verarbeitung ings Map-Funktion. So geben Sie einfach den ursprünglichen Bereich des Wertes an
, der minus zwei und plus zwei ist, und dann den gewünschten Bereich des Wertes für die X-Koordinate. Es wird Null auf der Arbeit der Leinwand sein. Wir müssen dasselbe für die y-Koordinate wiederholen, aber der gewünschte Bereich wird Null und die Höhe der Leinwand sein. Jetzt und jetzt. Wir können die Punktfunktion aufrufen, um einen Punkt auf unserer Leinwand mit diesen Koordinaten zu zeichnen, und das ist es nur frisch die Ausführungstaste, um das Diagramm zu sehen, das Sie erstellt haben. Wie ich bereits sagte, wird
die Draw-Funktion jedes Mal wiederholt aufgerufen, wenn sie aufgerufen wird. Ein neuer Punkt wird auf der Leinwand gezeichnet, so dass Sie in der Lage sein sollten, die abstrakte Kunstform langsam auf der Leinwand zu sehen. Wenn Sie ungeduldig sind wie ich, fühlen Sie sich frei, eine Schleife innerhalb der Draw-Funktion hinzuzufügen, so dass während ihres Aufrufs mehrere Punkte gezeichnet werden. Ich werde versuchen, 1000 Punkte pro Anruf zu ziehen. Wie Sie sehen können, ist
das viel schneller. Diese abstrakte Kunst hängt stark von den Werten dieser Koeffizienten ab. Wenn Sie sie ändern, erhalten
Sie eine völlig andere Trocknung. Also lassen Sie mich schnell ein paar von ihnen ändern. Nun, wie Sie sehen können, sieht
das ganz anders aus. Aber das manuelle Ändern der Koeffizienten ist ziemlich mühsam. In der nächsten Lektion zeige
ich Ihnen, wie Sie eine einfache grafische Benutzeroberfläche erstellen, mit der Sie
sie ändern können, indem Sie einfach ein paar Schieberegler ziehen. Ich seh dich dort.
3. Den Anzieher manipulieren: Willkommen zurück. In dieser Lektion werden
wir die P five Dom Bibliothek verwenden, um vier Schieberegler zu erstellen, um die Werte von unseren vier
Koeffizienten zu ändern . Also werde ich sie alle hier erklären und sie anrufen ist später. Schieberegler sein. Siehe Slater und diese später. Innerhalb der Einrichtungsfunktion müssen
Sie alle Ihre Schieberegler mit der Create-Schiebereglerfunktion initialisieren, die Reichweite als Eingabe
erwartet . Alle Koeffizienten müssen innerhalb des Bereichs minus drei und plus Baum sein. Sagen Sie also, dass Sie hier als nächstes den Standardwert später angeben müssen, also können Sie einfach hey hier sagen. Und schließlich müssen
Sie den Schrittwert angeben. Dieser Wert legt fest, wie stark sich der Koeffizient ändert, wenn Sie den Schieberegler ziehen. Nehmen wir an, wir wollen es in Schritten von 0.1 ändern, initialisiert die anderen drei Schieberegler die gleiche Weise. Stellen Sie einfach sicher, dass der Standardwert mit dem Koeffizienten übereinstimmt. Als nächstes lade ich einen C Slater und Sie sehen als Standardwert und schließlich den Schieberegler. Wenn du an deiner Schnur bist, solltest
du jetzt in der Lage sein, diese Schieberegler zu sehen. Gerade jetzt Ziehen nichts, also lassen Sie uns auch eine Schaltfläche zu unserer Webseite hinzufügen. Sie sollten in der Lage sein, diesen Knopf zu drücken, nachdem Sie diese Buchstaben gezogen haben, um die abstrakte
Kunst neu zu zeichnen , so dass Sie ihm eine Ebene sagen neu zeichnen können. Okay, jetzt klickt der Zehengriff auf diesen Knopf. Sie können die mundgedrückt Funktion verwenden und eine anonyme Funktion an sie als Argument übergeben . Innerhalb der Funktion müssen
Sie die Werte der Koeffizienten aktualisieren, so dass sie mit den Werten von der
geringsten übereinstimmen , Also ändern Sie den Wert von A in einen Schieberpunktwert. In ähnlicher Weise werden Schieberegler sein, der Wert C zwei c slater, der Andy auf diese später diesen Wert Wert Wert angibt. Wir wollen natürlich die Leinwand löschen, wenn wir anfangen, mit diesen neuen Koeffizienten zu zeichnen, also rufen Sie die Hintergrundfunktion hier auf hinter 255 als Argument dafür auf. Dies entfernt im Wesentlichen alle Punkte, die wir zuvor gezeichnet haben, und macht unsere Leinwand komplett weiß. Alles klar, gehen Sie weiter und führen Sie den Code aus und beginnen Sie, die Schieberegler zu ziehen, um verschiedene Kunstwerke zu erstellen . Es ist so einfach wie das. Wenn Sie mit der Farbe Ihrer Punkte nicht zufrieden sind, ändern Sie
einfach die Strichfarbe in der Einrichtung und führen Sie erneut aus. Wenn Sie möchten, können Sie auch Schieberegler für die R-,
G- und B-Werte der Strichfarbeerstellen G- und B-Werte der Strichfarbe . Aber ich überlasse das als Übung für das Klassenprojekt. Stellen Sie sicher, dass Sie das Projekt auf teilen Sie Ihre Kreationen mit mir und anderen Studenten abgeschlossen. Ich freue mich auf sie. Sie wissen jetzt, wie Sie Kunst mit JavaScript und ein wenig abseits von Karten erstellen können. Danke, dass du beißst.
Ashraff Hathibelagal, App Developer
