Grafiken programmieren I: Einführung in die generative Kunst

1. Trailer: Mein Name ist Joshua Davis, und ich bin ein Designer, ich bin ein Programmierer, ich bin ein Technologe, Liebhaber von Open-Source, Liebhaber von zufälligem Chaos und wir werden eine Klasse nehmen, um zu lernen, wie man generative algorithmische Kompositionen programmiert. Was ist generative Kunst? Es ist Kunst zu machen, die hauptsächlich von einem Computerprogramm angetrieben wird. Ich mag diese Idee, auf den Bildschirm schauen zu können und die Komposition Entscheidungen treffen zu lassen, die völlig außerhalb der Geste liegen. Es kann eine Weile dauern, um Ihnen beizubringen, wie Sie diesen Prozess einrichten, aber sobald Sie mit diesem Prozess fertig sind, haben Sie ein System, um aber sobald Sie mit diesem Prozess fertig sind, haben Sie eine unendliche Anzahl von Wettbewerben zu generieren. Ich denke, wo ich mehr aufgeregt bin, ist zu sehen, was andere Leute tun. Welche Art von Zeichnungen machen andere Leute? Welche Art von Farben verwenden andere Leute? Auch dieses Kunstwerk, das am Ende generiert wird, wird einzigartig für dieses Individuum sein, weil sie alle Entscheidungen innerhalb der Parameter getroffen haben. Ich gebe Ihnen nur die Werkzeuge, um diese Parameter einzustellen. 2. Einführung: Umgebungseinrichtung: Also, jetzt werden wir uns auf die Einrichtung der Umwelt konzentrieren. Ich habe das mit Skateboarding in Verbindung gebracht. Ich erinnere mich an Profis, die ich bewundert habe, und die Art und Weise, wie sie skateboardeten, und als ich herausgefunden habe, wie sie ihre Boards eingerichtet haben, vielleicht, welche Art von Lager sie verwendet haben, um dieses Setup zu replizieren, half mir, ein besseres Verständnis davon zu bekommen, wie diese Person tat, wie sie so gut skaten, wie sie es taten. Also, ich beziehe das auf die Technologie zurück, die wir tun. Wir werden in der Verarbeitungsumgebung arbeiten, aber ich schreibe tatsächlich keinen Code innerhalb der Verarbeitungsumgebung oder der IDE. Ich schreibe tatsächlich Code in einem Programm namens Sublime Text 2. Wir werden uns also einige Zeit nehmen, um Sublime Text 2 herunterzuladen. Ich werde Ihnen zeigen, wie Sie das Verarbeitungspaket installieren um die Verarbeitung in Sublime Text 2 zu erstellen, und ich werde Ihnen auch zeigen, wie Sie Snippets einrichten. Zum Beispiel werden wir eine für die Einrichtung einrichten. Also werde ich anfangen, S-E-T-U-P einzugeben, und es wird tatsächlich einen sehr großen Teil Code automatisch vervollständigen, der normalerweise der Code ist, den ich immer und immer wieder neu schreibe. Warum also nicht ein Snippet einrichten, um diesen großen Codeblock auszuführen. Also, die Arbeit in Sublime Text 2 wird super hilfreich sein, um zu optimieren, wie wir tatsächlich in dieser Umgebung erstellen. 3. Herunterladen von Processing: Hey, das ist Joshua Davis und willkommen bei Programming Graphics, einer Einführung in die generative Kunst. Wir werden uns amüsieren. Wir werden Spaß haben, und wir haben eine Menge Inhalt zu decken. Ich werde diese in eine Reihe von unabhängigen Videos aufteilen , so dass Sie in Ihrer Freizeit verdauen können, und dieser erste Abschnitt, den wir behandeln werden, ist eigentlich Umgebungs-Setup. Für mich ist es das Wichtigste. Es ist ein Fenster, wie Menschen ihre Umgebungen einrichten, und ich werde Ihnen zeigen, wie ich meine Umgebung eingerichtet habe und ich finde es faszinierend und hilfreich. Welche Art von Abkürzungen nehmen die Leute, um die Arbeit zu machen, die sie machen. Also, in dieser Klasse werden wir die Verarbeitung abdecken. Wir werden eine kleine Bibliothek abdecken, an der ich arbeite, namens Hype, und wir werden mit SVG arbeiten, skalierbare Vektorgrafiken, was bedeutet, dass wir Assets in einem Illustrator zeichnen und dann diese in Programme, die wir mit der Verarbeitung schreiben, okay. Also, das erste, was ich tun möchte, ist mit dem Herunterladen und Installieren der Verarbeitung fortzufahren . Also, wenn Sie einen Browser öffnen und zu processing.org gehen, werden Sie oben auf der Seite feststellen, dass es Download-Verarbeitung gibt. Wenn Sie auf Download Processing klicken, können Sie eine Spende tätigen. Wenn Sie möchten, können Sie auf keine Spende klicken und trotzdem die Verarbeitung kostenlos herunterladen. Sie können sehen, dass es Windows-, Linux- und OS X-Installationsprogramme gibt. Offensichtlich werde ich OS X verwenden. Wenn Sie voran gehen und auf Download klicken, sollten Sie eine ZIP-Datei zu bekommen, und wenn Sie diese ZIP-Datei entpacken, erhalten Sie tatsächlich die Verarbeitung der Anwendung. Nun, wenn ich die Verarbeitung der Anwendung ausführen würde, würde es ungefähr so aussehen. Das erste, was Sie wissen sollten ist, dass die Verarbeitung ein Texteditor ist. Es ist eine Umgebung, in der Sie Code schreiben, diesen Code ausführen und die visuellen Ergebnisse anzeigen können. Also, sagen wir, ich wollte etwas auf den Bildschirm malen. Was ich tun könnte, ist, ich könnte einfach direkt in die Verarbeitungs-IDE eingeben, und ich werde sagen, void setup. Ich werde voran gehen und sagen, dass die Füllfarbe orange ist, und dann werde ich voran gehen und ein Rechteck zeichnen. Nehmen wir an, dass dieses Rechteck 20 Pixel auf der X-Achse, 20 Pixel auf der Y-Achse, eine Breite von 50 und eine Höhe von 50. Jetzt habe ich gerade ein wenig Code hier innerhalb des Verarbeitungseditors geschrieben, und wenn ich diese Datei speichern sollte, werde ich dies als Verarbeitungs-IDE speichern und dies auf meinen Desktop legen. Wenn ich hier auf der Verarbeitungs-IDE auf Ausführen klicke, wird es tatsächlich den Code kompilieren, den ich geschrieben habe, und wieder kann ich die Ergebnisse direkt hier auf dem Bildschirm anzeigen. In der Tat zeichnete es ein orangefarbenes Rechteck bei 20 auf der x-Achse, 20 auf der y-Achse, eine Breite von 50 und eine Höhe von 50. Nun, für das nächste Video, werde ich Ihnen tatsächlich zeigen, wie Sie mit Sublime Text 2 arbeiten. Also, während ich es liebe, in der Verarbeitung zu erstellen, es eigentlich nicht mein Herausgeber der Wahl. Eigentlich schreibe ich gerne meinen Code in Sublime Text 2. Der Grund dafür ist, dass es eine Menge von Verknüpfungen für, meiner Meinung nach, Code zu schreiben , schneller, einfacher und ein wenig effizienter. Also, während ich die Verarbeitung mag. Ich mag es nicht, in seinem Editor zu autorisieren. Also, nächstes Video Arbeit mit Sublime Text 2. 4. Arbeiten mit Sublime Text 2: Ok. In diesem Video werden wir die Arbeit mit Sublime Text 2 behandeln. Also, wenn Sie zurück zu Ihrem Browser und gehen Sie voran und tippen Sie in Sublime Text 2 in eine Suchmaschine sollte das Top-Ergebnis sein. Wenn Sie fortfahren und klicken, werden Sie feststellen, dass die URL Sublime Text 2 sublimetext.com/2. Ganz oben haben Sie die Möglichkeit zum Download und haben wieder auch Windows-, Linux- und OSX-Varianten. Ich gehe weiter und klicke auf, um das Installationsprogramm herunterzuladen, was ich bereits getan habe. Ich habe bereits installiert. Auch wenn ich Sublime Text 2 ausführen würde, werden Sie feststellen, dass es ein Texteditor ist, genau wie die Verarbeitungs-IDE hat, aber es hat einige interessante Vorteile. Wenn ich beginne, etwas des gleichen Codes zu schreiben , wie ich es zuvor im vorherigen Video getan hatte, werden Sie feststellen, dass, wenn ich voran gehe und leere und wenn ich voran gehe und setup tippe und ich öffne paren, Sie werden feststellen, dass es generiert automatisch das schließende Paren, und wenn ich voran gehe und offene Klammer tippe, werden Sie feststellen, dass es durch die schließende Klammer abgeschlossen wird. Wenn ich eine harte Rückkehr machen würde, setzt es diese schließende Klammer in die dritte Zeile und blättert automatisch meine zweite Zeile. Es hat also Möglichkeiten, Code meiner Meinung nach viel effizienter zu schreiben. Jetzt und wieder, das ist nur ein Texteditor und ich kann Dinge tun, wie den Typ für den Fall dieser Videos größermachen den Typ für den Fall dieser Videos größer , so dass Sie tatsächlich den Code sehen können, den ich schreibe. Also, es hat diese Verbesserungen, die ich nur denke, sind ein wenig effizienter. Wenn Sie nun in die untere rechte Ecke gehen, werden Sie feststellen, dass dies all die verschiedenen Sprachpakete sind , die mit Sublime Text 2 geliefert werden. Möglicherweise stellen Sie fest, dass die Verarbeitung nicht Teil dieser Basisinstallation ist. Es ist etwas, das wir hinzufügen müssen. Also, wenn Sie zu den Ps kommen, die Verarbeitung waren, sollte es sein PHP zu Python, aber es gibt keine Verarbeitung in Ordnung. Nun, es endet, dass es ein Verarbeitungspaket gibt, also müssen wir Sublime Text 2 wissen lassen, dass die Verarbeitung existiert. Ich gehe voran und kehre zu meinem Browser zurück und ich werde weitergehen und Sublime Text 2 Verarbeitungspaket eingeben. Wenn Sie das tun, interessieren Sie sich für die beiden oberen Links. Dies ist das GitHub-Repository, das das Paket hostet und es gibt diesen großartigen zweiten Link, der tatsächlich ein Video auf Vimeo für Sie hat, um den Inhalt zu verdauen. Eistee. Also, ich werde voran gehen und öffnen Sie dieses Sublime Text 2 Vimeo Video. Es ist ungefähr eine Minute lang. Auch hier ist es super hilfreich, Ihnen zu zeigen, wie Sie Sublime Text 2 an die Verarbeitung binden können. Jetzt gehe ich weiter und klicke auf diesen Top-Link, weil ich offensichtlich das Video bereits gesehen habe und hier ist, wo Sie alle Informationen erhalten können, die Sie benötigen, um die Verarbeitung zu Sublime Text 2 hinzuzufügen. Jetzt werde ich es mit der Paketsteuerung tun. Nun, um Package Control zu verwenden, werden Sie hier sehen, dass wir unter Installation suchen wollen und die erste ist die Verwendung von Sublime Package Control. Nun, wenn Sie fortfahren und klicken Sie auf diesen Link. Wenn Sie Sublime Package Control verwenden, können Sie das Verarbeitungspaket einfach über installieren und dann zeigt es Ihnen die Schritte. Leider ist die Paketsteuerung standardmäßig nicht installiert. Also, wenn Sie unter Einstellungen kommen, Paketsteuerung ist eigentlich nicht hier. Also, ich werde auf diesen Link klicken, wenn Sie Sublime Package Control verwenden. Der Sublime Text Package Manager, der es extrem einfach macht, jetzt zu installieren. Wenn Sie also auf Jetzt installieren klicken, werden Sie feststellen, dass es Code gibt, den Sie kopieren und in die Konsole von Sublime Text 2 einfügen müssen. Nun, Sublime Text 3 ist tatsächlich in der Beta, so dass Sie einige Informationen hier sehen. Ich gehe weiter und klicke auf diesen Link für Sublime Text 2. Nun, Sie werden diese eine lange Reihe von Anweisungen kopieren. Also, ich gehe weiter und kopiere das und ich komme zurück zu Sublime Text und ich möchte die Konsole öffnen. Also, wenn Sie voran gehen und klicken Sie auf Ansicht, Sie werden direkt hier sehen es zeigt Konsole. Nun, wenn Sie Show console sagen, wird es den unteren Abschnitt von Sublime Text 2 laden und hier unten gibt es eine Eingabe, Cursor blinkt, alles, was ich tun werde, ist tatsächlich einfügen, was wir gerade aus dem Browser kopiert haben. Also, ich gehe voran und füge das ein und ich gehe voran und klicke auf Rückkehr, und du wirst feststellen, dass eine Reihe von Sachen passiert ist und dann nur gesagt, bitte lesen Sie Sublime Text starten, um die Installation zu beenden. Die Anweisungen zum Hinzufügen von Paketsteuerung wurden nun zu Sublime Text 2 hinzugefügt. An dieser Stelle kann ich die Installationsanweisungen für Package Control schließen. Ich muss Sublime Text 2 beenden und es tatsächlich neu starten. Also, wenn ich Sublime Text 2 neu starte, scheint es so, als ob nichts anders ist, aber tatsächlich, wenn Sie in das Hauptmenü kommen hier, Sublime Text 2, wenn Sie in Präferenzen kommen, werden Sie jetzt feststellen, unten ist ein Paketsteuerung, bei der die Paketsteuerung zuvor nicht da war. Wenn ich nun auf Paketsteuerung klicke, wird es mir dieses kleine Untermenü oben mit Dingen geben , die ich mit Paketen machen möchte. Soll ich Pakete hinzufügen, Pakete löschen, so weiter und so weiter? Also, was wir tun wollen, ist tatsächlich ein Paket zu installieren. Wir möchten das Verarbeitungspaket installieren. Also, ich gehe weiter und klicke auf Paket installieren und du wirst feststellen, dass eine Liste von Paketen gekommen ist. Alles, was ich tun muss, ist zu beginnen, in der Verarbeitung zu tippen und Sie werden feststellen, dass es das Top-Ergebnis ist. So heißt es, ein Sublime Text 2 Paket für die Verarbeitung der Programmiersprache zu verarbeiten. Also, ich gehe voran und klicke darauf und merke hier unten ganz, ganz unten, sagt es, dass Paketverarbeitung erfolgreich installiert ist. Nun, was das bedeutet, ist, dass nicht nur das Verarbeitungspaket installiert ist, sondern ich kann jetzt auf das Menü unten rechts klicken und Sie werden feststellen, dass die Verarbeitung jetzt als Sprache in der Sprachauswahlliste erscheint. Also, ich gehe voran und klicke Verarbeitung und ich werde anfangen, Dinge wie Farbcodierung und all das zu bekommen . Also das macht super Spaß, aber es macht sogar noch ein paar andere Sachen. Sie werden bemerken, dass ich, als ich diesen Code zum ersten Mal schrieb, void eingegeben habe. Ich habe das Setup getippt, Minuten von meinem Leben rasiert, Mann. Ich will die Dinge schneller machen. Also, was das Bundle tut, ist, viele Verarbeitungsfunktionen in Verknüpfungen zu packen . Also, zum Beispiel kann ich tatsächlich all diesen Code löschen, und sagen wir, dass ich Setup machen möchte. Alles, was Sie tun müssen, ist S-E-T zu tippen, und Sie werden jetzt feststellen, dass es uns eine Liste von Aktionen gibt, die wir aufrufen können. Also, ich möchte voran gehen und einrichten, ich gehe voran und drücke Enter, und Sie werden feststellen, dass es meine Void Setup-Funktion ausspuckt, meine Void Draw Funktion. Also muss ich diesen Code nicht mehr neu eingeben. Ich kann diese Abkürzung verwenden, um Dinge zu tun. Also, wieder, sagen wir, ich wollte eine For Loop machen. Du kannst voran gehen und For sagen. Auch hier werden Sie feststellen, dass es das Untermenü hochzieht, ich kann voran gehen und auf Enter klicken, es spuckt automatisch die Struktur für For Loop aus, und es tut Tab-Hervorhebung. Also, Sie werden bemerken, dass es sagt, Integer i gleich Null ist, das ist in Ordnung. Wenn ich fortfahre und auf die Registerkarte klicke, werden Sie feststellen, dass es auf die Null geht. Wenn ich die Tabulatortaste erneut drücke, könnte ich 100 eingeben. Wenn Sie die Tabulatortaste erneut drücken, Sie in die Mitte der For Loop versetzt. Daher ist diese Idee, nicht nur Verknüpfungen auszuführen, sondern durch diese Verknüpfungen zu wechseln, sehr hilfreich. Also, ich möchte ein Rechteck zu machen, und Sie gehen und klicken Sie auf Enter. Hey, wo willst du es auf der X-Achse? Von vorher, 20 auf der x, Tab; 20 auf der y, Tab; 50 für Breite, Tab; 50 für Höhe. Also, Sublime Text 2 macht es super einfach, Code nur schneller, einfacher zu schreiben, es ist hübsch, es ist ein Spielwechsler. Ok. Also, wir haben Verarbeitung installiert, wir haben Sublime Text 2 installiert. Es gibt nur noch ein paar Dinge, die ich sagen würde, die wir tun müssen. Eines der letzten Dinge ist, dass wir tatsächlich Code in Sublime Text 2 schreiben, aber wenn wir auf Build klicken, müssen wir diese Brücke zwischen der Verarbeitung der Anwendung und Sublime Text 2 erstellen. Also, was das letzte, was ich tun muss, ist tatsächlich die Verarbeitung erneut zu starten, und Sie werden unter Tools feststellen, es Install Processing Java gibt. Sie müssen dies tun, andere Wörter können Sie den ganzen Code schreiben, den Sie den ganzen Tag lang in Sublime Text 2 wollen und nichts wird passieren, weil Sie Processing Java noch nicht installiert haben. Also, ich gehe weiter und klicke auf Install Processing Java. Es wird sagen: „Möchten Sie es für alle Benutzer installieren?“ Blah-blah-blah. „Möglicherweise benötigen Sie ein Passwort.“ Ich gehe voran und klicke auf Ja, ich gehe voran und gebe mein Passwort ein, ich gehe voran und klicke auf OK, und das hat jetzt erfolgreich Processing Java in meiner Umgebung installiert. Also, an diesem Punkt kann ich tatsächlich die Verarbeitung wieder beenden, okay? Denn jetzt habe ich Processing Java installiert. Also, wenn ich dieses Fenster schließe und wenn ich dieses Fenster schließe und wenn ich dieses Fenster schließe, und lassen Sie uns diese Datei speichern. Eine andere Sache, die ich sagen würde, das ist irgendwie nett über die Verarbeitung von IDE ist, dass, wenn Sie tatsächlich auf Datei speichern klicken, es einen Ordner erstellen und dann Ihre Datei in diesen Ordner legen würde. In der Tat, so funktioniert die Verarbeitung. Verarbeitung muss eine Skizze in einem Ordner mit dem gleichen genauen Namen gespeichert werden. Also, wenn Ihre Skizze Joshuadavis.pde heißt, dann muss Ihr Ordner Joshua Davis heißen, sonst erhalten Sie Compiler. Sublime Text 2 weiß noch nicht, wie das geht, es weiß, dass es diese Datei speichern kann, aber es weiß nicht, dass der Ordner für erstellt werden soll. Also, das ist eine, die ich sagen würde milde Ärger mit der Arbeit mit Sublime Text 2. Also, lassen Sie uns fortfahren und einen neuen Ordner auf meinem Desktop erstellen. Ich gehe weiter und rufe diesen Ordner an, sagen wir, er heißt Test One, oder? Nun, das ist in der Regel, was ich tue, wird ich Test One öffnen und ich werde einen neuen Ordner namens Build erstellen, okay? Ich werde dann diesen Code nehmen, den ich geschrieben habe, in diesem Fall möchte ich diese For Loop nicht, dieses Rechteck ist in Ordnung. Wir werden das Unentschieden noch nicht abdecken. In unserer Originalfeile hatten wir es mit einer Füllung Orange. Ich werde fortfahren und das jetzt retten. Ich gehe weiter und speichere das auf meinem Desktop. Ich werde dies in Test One-Ordner speichern, und dann werde ich es im Build-Ordner speichern, und ich werde nur diesen Build.pde aufrufen. Ok. Also, lassen Sie mich das einfach zur Seite bewegen und lassen Sie mich Ihnen einfach meine Ordnerstruktur hier zeigen. Also, wir haben Test One, wir haben Build, wir haben Build.PDE. Also jetzt an dieser Stelle können Sie tatsächlich zu Tools kommen und Sie können auf Erstellen klicken. Wenn ich auf Erstellen klicke, wird es tatsächlich die Verarbeitung von Java ausführen, und Sie werden feststellen, dass ich die visuellen Ergebnisse genau wie in der Verarbeitungs-IDE ansehe. Ok. Nun, es gibt ein paar Dinge, die Sie beachten sollten. Ich werde fortfahren und damit aufhören. Einer ist Josh. Warum tun Sie dies als Test One, Build, Build.PDE? Denn wenn ich eine Reihe von Mutationen von Test One machen möchte, muss ich nur ziehen und kopieren, ziehen und kopieren, ziehen und kopieren, ziehen und kopieren, ziehen und kopieren, oder? Jetzt habe ich fünf Tests von vielleicht dieser ersten Skizze, die ich entwickelt hatte. Aber statt, wie soll ich das sagen? Da der Skizzenname der gleiche sein muss wie der Ordnername, wenn ich diese Art von Kopie und Duplizierung machen würde, müsste ich gehen und die PDE-Datei, test1.pde, test2.pde, umbenennen. Wieder, rasierte Minuten von meinem Leben Mann. Ich würde viel lieber diese Art von Verschachtelung haben, also habe ich Test One. Innerhalb von Test One ist Build, und innerhalb von Build ist Build.pde. Also muss ich Build.pde nie umbenennen. Also kann ich diese erste Skizze duplizieren und mich nicht darum kümmern, meine PDE jedes Mal umbenennen zu müssen , wenn ich eine neue Mutation mache. Das bin nur ich und ich bin verrückt. Nun, diese Klasse wird Spaß machen, Spaß Klasse. Eine andere Sache, die Sie bemerken sollten, ist, dass etwas, das in Sublime Text 2 passiert , das nicht bei der Verarbeitung von IDE passiert, und das ist dieses build-Temp-Verzeichnis. Also, jedes Mal, wenn ich eine Datei erstelle, wird es dieses build.temp-Verzeichnis erstellen, okay? In ein wenig hier werde ich Ihnen einige Verknüpfungen zeigen, wie Sie diese Dateien einfach löschen, so dass Sie nicht alle diese Build.temp-Dateien akkumulieren. Leider wird Sublime Text 2 immer diese build.temp-Datei generieren, und es gibt keine Möglichkeit, sie innerhalb von Sublime Text 2 auszuschalten. Auch hier macht die Verarbeitung von IDE das nicht. Verarbeitung von IDE hat keinen Grund, diese Build-temporäre Datei zu erstellen, wo Sublime Text 2 tut, okay? Also, wir haben jetzt die Verarbeitung heruntergeladen, wir haben Sublime Text 2 heruntergeladen, wir haben das Bundle installiert. Wir lernen über Verknüpfungen innerhalb von Sublime Text 2. Wir haben die Verarbeitung geöffnet und wir haben Processing Java installiert. Im nächsten Video zeige ich Ihnen einige weitere Schritte innerhalb von Sublime Text 2 sowie einige wichtige Apps, die ich nur auf OSX verwende, und wir werden darüber sprechen, warum und wie diese hilfreich sind. Wir sehen uns im dritten Video. 5. Letzte Tipps für die Umgebungseinrichtung: Ok. In Video drei möchte ich nur noch ein paar weitere Dinge skizzieren , die ich im Rahmen meiner Umgebungseinrichtung mache. Nun, wir haben diese Datei, die ich gerade sehr schnell zusammengepeitscht habe, wir nennen diesen Test eins, bauen, build.pde. Sie können hier aus dem Code sehen dass wir eine Füllung aus Orange setzen und wir zeichnen ein Rechteck. Jetzt habe ich dieselbe exakte Datei sowohl in Sublime Text 2 als auch in der Verarbeitung geöffnet . Der Grund, warum ich das getan habe, ist, weil es einen Unterschied zwischen diesen beiden Programmen gibt, wenn Sie tatsächlich den Code erstellen. Wenn Sie innerhalb der Verarbeitung auf dieses Symbol klicken, wird ausgeführt, aber wenn Sie Sketch markieren, werden Sie sehen, dass der Lauf tatsächlich Befehl+R ist. Also, ich kann tatsächlich eine Reihe von Code ausschlagen, ich kann Befehl+R drücken und das ist gehen, um meinen Code zu kompilieren und es wird ausgeführt, und wir können die visuellen Ergebnisse anzeigen. Also, wenn ich zu Processing komme und Befehl+Run drücke, da ist es. Leider ist es in Sublime Text 2, wenn Sie unter Tools kommen, tatsächlich Befehl+B für Build. Also, ich finde das ein wenig leicht verwirrend, weil es in der Verarbeitung Befehl+R und Sublime Text 2 seinen Befehl+B ist. Ich hatte wie ein Jahr in der Verarbeitung IDE gearbeitet, bevor ich Sublime Text 2 benutzte und so ist mein Gehirn auf eine bestimmte Weise verdrahtet . Ich würde Code in Sublime Text 2 schreiben und ich würde Befehl+R drücken und es würde etwas völlig anderes tun. Also, ich möchte tatsächlich die Einstellungen in Sublime Text 2 ändern , so dass Build Befehl+R genau wie in der Verarbeitung ist. Auf diese Weise kann ich zwischen diesen beiden Umgebungen arbeiten und ich muss mich nicht darum kümmern, mich zu erinnern, Befehl+B in einer und Befehl+R in einer anderen. Also, was ich tun werde, ist, ich werde zu Sublime Text 2 kommen und unter Einstellungen, werden Sie Key Bindings sehen. Jetzt sehen Sie Tastenbindungen für Standard- und Tastenbindungen für Benutzer. Nun, ich werde zuerst Key Bindings für Default öffnen und Sie werden feststellen, dass sich dieses riesige Dokument öffnet. Sie werden hier sehen, dass Sie dies verschieben können und es gibt viele verschiedene Tastenbindungen, die mit Sublime Text 2 verbunden sind. Jetzt bin ich ein individueller Benutzer. Also, ich möchte Sublime Text 2, Preferences, Key Bindings, User öffnen . Wenn Sie dies tun, werden Sie feststellen, dass dieses Dokument leer ist. Sie haben keine spezifischen benutzerbezogenen Tastenbindungen angegeben. Also, was ich tun möchte, ist, ich möchte zu Standard gehen und ich möchte die Bindung für Build finden. Also, ich werde nur Befehl+F tun, um zu finden und hier unten unten, Sie werden feststellen, dass ich Build tippe und ich klicke auf finden. Wenn Sie auf „Suchen“ klicken, werden Sie feststellen, dass diese Jungs hier markieren. Sicher genug, das ist derjenige, den ich auf Zeile 232 suche, Schlüssel, super plus b oder Befehl+B ist der Befehl von Build. Also, ich werde tatsächlich diese Zeile hier auswählen, nicht das Komma am Ende, das Komma ist nur, wenn es mehrere Schlüsselbindungen gibt, die ich festlegen möchte, aber ich setze immer die eine. Also, ich brauche das Komma am Ende nicht. Ich gehe weiter und drücke Kopie. Dann werde ich zu der benutzerspezifischen Schlüsselbindung gehen und ich werde mir nur ein bisschen härter drehen und ich werde einfügen. Also, jetzt habe ich Build in die benutzerspezifische Präferenz eingefügt. Dann werde ich dies nur in Super Plus R.So ändern, auf diese Weise werde ich keine Standardlasten, Standardlasten durcheinander bringen, aber dann wird es dieses benutzerspezifische laden und dann den Standard überschreiben. Wenn ich also jetzt auf Speichern klicke und dann zu Tools komme, werden Sie feststellen, dass der Build jetzt unter Befehl+R festgelegt ist, genauso wie er sich in der Verarbeitung befindet. Also, ich kann das schließen, ich kann zu meinem Code zurückkommen und einfach Befehl+R drücken und es wird genau wie in der Verarbeitung ausgeführt. Also, das ist nur eine andere Sache, die ich mag, so dass diese beiden ähnlich sind und ich muss mich nicht daran erinnern , das ist eine Sache und eins in einer anderen Sache zu bauen , ich will das nicht tun. Also, jetzt ist es Befehl+R in beiden Umgebungen, über die ich super glücklich bin. Jetzt Macintosh-spezifische Anwendungen. Für Ihre Windows-Benutzer werden Sie hier in einer Sekunde verstehen, warum diese Konversation nicht für Sie gilt. Ich schreibe Code und ich mag es, die Dinge auf eine bestimmte Art und Weise zu organisieren. Also, Mac-Benutzer brauchen wirklich diese Anwendung namens SizeUP. Also, wenn Sie tatsächlich einen Browser öffnen und in „Größe up“ eingegeben, werden Sie feststellen, dass es der obere Link ist, „Bestrahlte Software, SizeUP“, und es ist der fehlende Window Manager für OS X PC Leute, Sie haben diese eingebaute. Sie nehmen ein Fenster, Sie ziehen es auf eine Seite und es rastet ein und Sie können Dinge auf diese Weise organisieren. Unter OS X haben wir das nicht. Also, SizeUp ist ein super effizienter für die Organisation Ihres Arbeitsbereichs zum Schreiben von Code meiner Meinung nach. Also, sobald Sie SizeUp auf OS X installiert haben, werden Sie sehen, was alle Verknüpfungen hier sind, aber es ist super hilfreich, ich kann sagen, ich will dies nach links, ich will das nach rechts, ich will es nach oben, ich will es nach unten, Ich möchte es für jede der Ecken oder Sie können drücken, um es tatsächlich zentriert zu haben. Also, es ist nur ein paar nette Tastenkombinationen für den Mac, um Dinge zu organisieren. Also, Sie werden bemerken, dass genau wie ich hier habe, dieses kleine Verarbeitungsfenster oben rechts habe, ich habe meinen Finder unten rechts und ich habe Sublime Text 2 auf der linken Seite. Wenn ich ein neues Dokument erneut starten würde, mag ich diese Idee nicht, hin und her und Tabs umschalten zu müssen, ich kann das tatsächlich beiseite ziehen und es dann auf der rechten Seite des Bildschirms positionieren und dann an zwei Dokumenten arbeiten Seite an Seite. Also, ich finde die Verwendung von Sizeup super hilfreich bei der Organisation des Raumes, in dem ich Code.Second App schreibe, die ich wirklich mag, ist Koffein. Koffein, das Sie aus dem App Store bekommen können , und es legt eine kleine Kaffeetasse in Ihre Taskleiste. Das bedeutet, dass Ihr Computer nicht in den Ruhezustand versetzt wird. Weil alles auf Koffein gesprungen ist. Also, wenn ich die Kaffeetasse mit Koffein befülle, bedeutet das nur, dass ich weg gehen kann oder ich kann etwas sehen und ich muss mir keine Sorgen darüber machen , dass mein Computer schlafen und meine Bildschirme schwarz werden. Dies ist das gleiche wie das Starten Ihrer Systemeinstellungen und dann gehen Sie in Energy Saver und dann innerhalb von Energy Saver, Sie gehen nie und er geht, sind Sie sicher? Du klickst auf OK. Du sagst Nie und dann sagst du: „Okay, lege keine Festplatten ein.“ Also, anstatt das jedes Mal tun zu müssen, überschreibt Koffein dies nur und setzt es im Grunde immer auf Nie immer setzt die Dinge nicht in den Schlaf. Also, ich mag es, Coffein installiert zu haben, nur damit ich Code schreiben kann, Pausen machen, wenn ich muss, Schritt zurück, wenn ich weggehen muss, wenn ich muss, und dann keine Sorge darüber , dass alles geschlafen ist, während ich kurz abwesend. Also, zwei Apps, die ich wirklich mag SizeUp und Koffein und wieder Koffein, Sie bekommen einfach aus dem App Store. Also, Sie tippen einfach in Koffein und es wird installieren. Also, wir haben über dieses dritte Video gesprochen, Koffein, wir haben über SiZeup gesprochen. Wir haben über Build-System gesprochen. Nun, das letzte, was ich über einen Snippets reden möchte. Snippets kommt in eine Expertenstufe des Schreibens von Code, aber ich möchte Ihnen mindestens ein Snippet geben und Ihnen zeigen, wie Sie es verwenden. Sie können sehen, warum es super hilfreich ist, und wenn Sie sich mit der Arbeit mit Code und speziell mit Hype und speziell mit Sublime Text 2 vertraut machen, werden Sie feststellen, dass Snippets einfach genial sind. Also, lass mich einfach aufhören und hier ein paar Sachen machen. Nun, was ein Snippet ist, sagen wir, dass Sie Ihre Umgebung immer auf eine bestimmte Weise einrichten. Für mich mache ich immer dasselbe, was, ich sage, leere Setup ist und ich werde sagen, ich möchte die Größe 640 Pixel mal 640 Pixel und vielleicht möchte ich, dass der Hintergrund immer schwarz ist und vielleicht möchte ich immer glätten. Vielleicht möchte ich immer eine Draw-Funktion. Ich befinde mich in der Verarbeitung immer wieder das gleiche Zeug zu schreiben und immer und immer wieder. Was Snippets Ihnen erlauben zu tun, ist, Dinge zu packen, die Sie als individueller Content-Ersteller auf einer Tagesbasis eingeben, all das Zeug in ein Snippet packen. Also, lassen Sie mich Ihnen zeigen, wie ein Snippet aussieht. Dies ist mein erstes Snippet und es ist darauf ausgerichtet, Hype zu verwenden und war nicht offensichtlich nicht bis zu den Videos, in denen wir den Hype nur noch abdecken, aber was ist schön ist , dass ich möchte, dass Sie die Snippets installieren , so dass später, wenn wir anfangen , die diesen Inhalt abdecken, können wir diese die Verknüpfung ausführen. Also, denken Sie daran, als wir eine for-Schleife eingegeben haben und es automatisch die for-Schleife ausspuckt und es hatte sogar alle Tabbing und erlaubte Ihnen, zu allen verschiedenen Tabs zu springen.? Das ist ein Schnipsel. Also, das ist nur ein Setup-Snippet , das ich immer mit Hype verwende. Wieder schön ist, dass Sie das Snippet innerhalb von erhabenem Text 2 öffnen können und Sie sehen, wie die Dinge strukturiert sind. Sie können sehen, wie Sie den Tab-Code ausführen, so weiter und so weiter. Um dieses Snippet zu installieren, müssen wir es in den Snippet-Ordner der Verarbeitung einfügen und es ist ein wenig vergraben. Also, was ich möchte, dass Sie tatsächlich in den Ordner gehen und dann werde ich ~/Library eingeben. Ich gehe weiter und klicke auf Los, und Sie werden jetzt feststellen, dass Sie den Bibliotheksordner anzeigen. In OS X ist dieser Bibliotheksordner standardmäßig ausgeblendet. Also, wenn Sie einfach Ihre Festplatte öffnen und versuchen, den Bibliotheksordner zu finden, können Sie nicht, weil es ein versteckter Ordner ist. Also, indem Sie gehen, verbinden Sie sich mit dem Ordner ~/Library mit einem Großbuchstaben L wir jetzt den Bibliotheksordner sehen können. Jetzt sehen Sie in diesem Bibliotheksordner die Anwendungsunterstützung. Unter Anwendungsunterstützung wird Sublime Text 2 angezeigt. Unter Sublime Text Zwei sehen Sie Pakete und Sie werden sehen, dass dies alle Pakete aller verschiedenen Sprachen sind, die, die wir gerade installiert haben, direkt hier Verarbeitung. Also, wenn ich auf Verarbeitung klicke, werden Sie jetzt sehen, dass es einen Ordner namens Snippets und innerhalb von Snippets sind alle diese Snippets, die Sie in Sublime Text zwei wie, Setup, diese vier Schleife, Rechteck verwenden können . Nun, irgendwo werde ich Ihnen diese Snippet-Datei geben und alles, was Sie tun müssen, ist, sie einfach in den Snippets-Ordner zu kopieren. Also, es wurde jetzt dort kopiert. Dies wird hype_set up genannt, also wenn Sie tatsächlich zum Hs gehen würden, würden Sie sehen, dass es genau dort ist, hype_setup. Nun, was das bedeutet, ist, dass ich zu Sublime Text 2 zurückkehren kann und ich einfach voran gehen und anfangen kann, diese Verknüpfung einzugeben. Also, unten unten. Ich muss sicherstellen, dass Sie Verarbeitung ausgewählt haben, da dies ein Verarbeitungssnippet ist. HY und schau, hype_setup kommt auf. Dies ist das Snippet, das wir gerade hinzugefügt haben, und wenn ich voran gehe und auf Enter klicke, werden Sie feststellen, dass es mein Setup erstellt, es baut meine Zeichnung, es konstruiert meine Größe, wie ich es immer mag. Soll es 640 mal 640 sein? Ich weiß es nicht. Schau, ich kann auf Tab klicken, ich kann auf Tab klicken. Wollen Sie, dass es 3D ist? Nein, nicht nur noch, also kann ich fortfahren und auf Löschen klicken. Also, jetzt wird diese Verarbeitungsskizze keine 3D-Koordinaten verwenden. Zeile drei, wir haben total noch nicht abgedeckt, aber wieder, Ich kann Tab klicken, wenn ich wollte, um die Hintergrundfarbe ändern. Wollen wir 3D verwenden? Nein, das haben wir wirklich ausgeschaltet. Ich kann also auf Löschen klicken. Automatisch löschen, willst du das? Ja oder nein? Wenn Sie es wollen, wollen Sie, dass es wahr oder falsch ist? Ich klicke erneut auf Tab. Unten in der Auslosung feuern wir Draw Stadium. Habe ich das aufgezeichnet? Wir werden über die Ausgabe in Bildformate sprechen. In diesem Fall würde dies 900 Tiffs darstellen, was 30 Sekunden Film entspricht. Also, willst du sagen, Rahmen? Vielleicht ja, vielleicht nein. Ich werde „Löschen“ sagen. Also, es ist ein Weg für, wenn Sie sichmit der Programmierung vertraut machen und Sie feststellen, dass Sie Dinge immer mit der Programmierung vertraut machen und Sie feststellen und immer wieder tun, anstatt sie immer und immer wieder eingeben zu müssen, Sie könnten daran interessiert sein, Ihre eigenen benutzerdefinierten Snippets zu erstellen. Auf diese Weise können Sie einfach anfangen, etwas teilweise zu tippen und ja zu gehen, ich möchte Hype Setup machen und auf hyp_setup klicken und Sie wissen, dass es immer Dinge automatisch generieren wird, die Sie ständig wiederverwenden. Das schließt diesen Abschnitt ein, dies ist Umgebungs-Setup. Also, wieder haben wir Processing installiert, wir haben Sublime Text zwei installiert, wir haben Processing Paket installiert, wir lernten einige Anwendungen kennen, die ich gerne benutze, wir haben unsere Umgebung Setup. Also, wenn wir jetzt zu Abschnitt zwei gehen , die nur eine Einführung in die Verarbeitung und Hype ist und was diese beiden Dinge sind und warum sie zusammenarbeiten und wie sie etwas anders sind als das Schreiben von Code und Verarbeitung und so weiter so weiter. Das wird der nächste Abschnitt sein, aber jetzt haben wir unsere Umgebung genau so eingerichtet, wie ich arbeite. Also, wenn wir anfangen, Code zu schreiben, haben wir einige der Verknüpfungen, wir haben einige dieser Prozesse, um das Schreiben von Code nur ein bisschen einfacher, ein bisschen effizienter und Spaß zu machen . Also, sehen Sie im nächsten Abschnitt Intro zu Processing und dem Hype Framework. 6. Einführung: Processing und HYPE: Für den nächsten Schritt werden wir über die Verarbeitung sprechen und wir werden über das Schreiben von Code und Verarbeitung sprechen. Alles, was Sublime Text zu ist, es ist eine Authoring-Umgebung. Es ist ein Texteditor. Es ist, wo wir tatsächlich den ganzen Code schreiben, der tut, was wir tun wollen. Wenn wir den Code tatsächlich schreiben und ausführen, passiert, ist, dass Code dann durch Verarbeitung kompiliert wird und etwas auf dem Bildschirm passiert. Also, wenn ich sage, dass ich eine Leinwand einrichten möchte, möchte ich, dass der Hintergrund rot ist und ich ein grünes Quadrat zeichnen möchte, das ist Zeug, das tatsächlich innerhalb des Sublime Text-to-Editors eingegeben wird. Wenn wir tatsächlich auf Build klicken, wird die Verarbeitung es bauen, es wird diese Anweisungen lesen und tatsächlich etwas auf dem Bildschirm anzeigen. Also, was ist Hype? Hype ist das dritte, was heißt, sagen wir, dass wir dieses grüne Quadrat immer und immer und immer wieder wollen , weil wir wirklich grüne Quadrate lieben. Also könnten wir etwas schaffen, das die grüne Quadratklasse genannt wird. Also, anstatt den ganzen Code für dieses Rechteck schreiben zu müssen, machen es grün, setzen Sie es hier, werden wir tatsächlich eine Codezeile schreiben, die „Grünes Quadrat hier“ sagt. Also, es ist eine Abkürzung. Hype ist eine Reihe von Verknüpfungen für größere, robustere Aktionen innerhalb der Verarbeitung. 7. Lade HYPE herunter: Willkommen bei Sektion zwei. Sehr emotional. Abschnitt zwei. Wir werden über das HYPE-Framework sprechen. Also, wir arbeiten in der Verarbeitung, aber ich arbeite auch an dieser externen Bibliothek namens HYPE-Framework, die eine Sammlung von Dingen ist, die Dinge tun. Ok? Wenn Sie nun zu hypeframework.org gehen, können Sie die Projektseite hier sehen. Sie können alle verschiedenen Beispiele sehen, die ich veröffentlicht habe, aber dies ist nur die Website für das Projekt. Der eigentliche Quellcode existiert auf Github. Also, Sie werden hier oben in der linken oberen Ecke sehen, es gibt github.com/hype. Ok? So können Sie die URL hier github.com/hype/hype_processing sehen. Nun, in den Projektschritten hier auf Skillshare, habe ich tatsächlich eine andere URL gesetzt. Ich habe GitHub.com/HYPE/HYPE_Processing Tree Staging. Das liegt daran, dass der Master-Build des Codes nicht alle Änderungen enthält, an denen wir gerade arbeiten. Also, wenn du hier oben siehst, heißt es Zweige. Es gibt hier einen Zweig namens Staging und wenn Sie auf Staging klicken, ist dies tatsächlich die aktuellste Sammlung des Codes. Auch hier ist die URL unten in den Projektschritten. Nun, wenn Sie neu in der Codierung vollständig sind, können Sie eine Menge von dem Zeug ignorieren. Wir werden hier ein bisschen darüber reden. Das Einzige, an dem du wirklich interessiert bist, ist genau hier. Da steht Download-zip. Also, wenn ich voran gehe und auf Download zip klicke, sollten Sie feststellen, dass es die ZIP-Datei auf Ihren Desktop herunterlädt. Nun, diese Zip-Datei wird alles enthalten, was existiert, was Sie hier auf der Website sehen. Zum Beispiel hat es einen Ordner für die Dokumentation, an dem wir arbeiten, wo wir einige der Bits des Quellcodes dokumentieren. Es enthält eine Beispieldatei. Die Beispiele sind, wo ich bestimmte Dinge nehme, die wir geschrieben haben, und ich mache nur einige Barebone-Beispiele, um Ihnen durch den Prozess zu helfen. Java, unser Quellcode. PDE, unser Quellcode. Website, die eigentliche Website, die Sie hier sehen, das ist tatsächlich, wenn sie aktualisiert wird, sie lebt tatsächlich im Website-Ordner, und es gibt offensichtlich eine Reihe von anderen Sachen. Ok? Sobald Sie diese ZIP-Datei heruntergeladen haben, ist die einzige Sache, die Sie 100% interessieren werden , um alle Beispiele zu machen , die wir machen werden, diese eine Datei namens Hype.pde. Hype.pde enthält also jede einzelne Klasse, die sich in der Bibliothek befindet. Es enthält jede einzelne Sache, die wir für alle Projekte verwenden werden, die wir machen werden. Also, nachdem Sie diese ZIP-Datei heruntergeladen haben, schauen Sie sich einfach diese Hype.pde an, denn das ist die Datei, die wir in jedem einzelnen Projekt verwenden werden, das wir erstellen. Ok. Ich werde dieses Video beenden. Ich werde ein neues erstellen, in dem wir über einige zusätzliche Dinge sprechen , die in dieser Zip-Datei sind. Wir sehen uns im zweiten Video. 8. Projektschritte 2, 3, 4: Okay, zweites Video. Also, wir haben die ZIP-Datei heruntergeladen. Wir haben es entpackt. Hier kann ich Ihnen den Inhalt des Ordners zeigen, und wieder sehen Sie, dass er genau das repliziert, was Sie hier auf GitHub sehen. Es gibt den Dokumentationsordner, hier ist der Beispielordner, so weiter und so weiter. Wieder, hier ist, was wir total interessiert sind, ist Hype.pde. Also, in Bezug auf die Projektschritte, die Sie hier auf der Skillshare Website sehen, werden wir an diesem Punkt zwei, drei und vier abdecken . Nun, in Abschnitt zwei der Projektschritte, heißt es im Grunde, hey, graben Sie sich um diesen HYPE Staging-Ordner und machen Sie sich einfach mit einigen der Dinge vertraut, die hier drin sind. Zwei Dinge, die von großem Interesse sind: offensichtlich, die Hype.pde, Ich sagte Ihnen, dass wir gehen, um das in all unseren Projekten zu verwenden, aber dann, diese Beispiele Ordner. Dieser Beispielordner hat Gründen mehr Beispiele als ich tatsächlich auf der Website habe. Die Website veröffentlicht die Skizzen in Processing.js, sodass sie im Canvas-Objekt HTML5 ausgeführt wird. Nicht alles hier wird von Processing.js unterstützt. Also, es gibt einige Beispiele, die ich nie auf der Website setzen kann , weil sie einfach nicht im Browser funktionieren. Nun, einige andere Dinge, die Sie berücksichtigen sollten , wenn Sie sich diesen Beispielordner ansehen, und ich habe im Projektschritt ein wenig darüber gesprochen. Wenn ich zum Beispiel zu Swarm gehe, wirst du bemerken, dass ich dir gebe , lass uns das ändern. Sagen wir mal, Hoscillator, weil ich weiß, dass Hoscillator viele Beispiele darin hat. Hoscillator, Sie werden sehen, dass es 14 Beispiele gibt. Normalerweise sind die oberen, Beispiel eins, das am meisten nackte Knochenbeispiel. Es bedeutet, dass ich nicht viele andere Dinge eingeführt habe, ich habe nur ein Beispiel erstellt, das einfach veranschaulicht, was Hoscillator tut. Allerdings können alle diese Klassen tatsächlich zusammenarbeiten. So werden wir zum Beispiel in dieser Klasse ein Rasterlayout abdecken, in dem Sie ein Rasterlayout mit ColorPool, mit einem Oszillator, mit HPath mischen können . So können Sie Aspekte von HYPE in einem Ordner kombinieren. Also, das erste Beispiel hier, Beispiel eins, wenn ich das tatsächlich veröffentlichen würde, zeigt es Ihnen nur, was Oszillation ist. Es ist eine Welle, es ist eine Art, eine Welle zu beschreiben. Wenn Sie durch die Beispielprojekte navigieren, werden sie robuster. Zum Beispiel ist dieser nur 50 Codezeilen. Wenn ich zum Beispiel zur Nummer 14 springen würde, würden Sie sehen, Nummer 14 ist 76 Codezeilen. Wenn ich diesen Film jedoch tatsächlich laufe, im Falle dieses speziellen verwende ich im Falle dieses speziellenFilms tatsächlich 3D. Also, ich oszilliere diese 3D-Boxen. Berücksichtigen Sie also, dass der Beispielordner, normalerweise Beispiel eins oder die Beispiele nach oben, der einfachste Ausdruck dieser bestimmten Klasse sind, den Sie betrachten. Während ich hinuntergehe, gebe ich Ihnen einige Vorschläge, um mögliche Klassen miteinander zu mischen und zusammenzupassen. Also, auf jeden Fall, schauen Sie sich den Beispielordner an, denn es gibt eine Menge Sachen drin, die wiederum nicht auf der Website vertreten sind. Nun, eine Sache, mit der Sie beginnen möchten ist dieser spezielle Ordner hier namens H_BASICS. H_BASICS versucht, die Grundlagen für die Arbeit mit HYPE zu dokumentieren. Also, was ist Methodenverkettung? Wie zeichne ich Formen? Wie definiere ich, wo sich eine Ankerposition befindet? Wie drehe ich mich um einen Anker? Wie füge ich Bilder an? Wie verbinde ich SVG? Also, H_BASICS ist wirklich der Starter-Ordner, dem ich dir einige der Dinge gebe, die, hey, in dem ich dir einige der Dinge gebe, die, hey,um wirklich schaukeln zu können, das sind die Dinge, die du zuerst wirklich verdauen solltest. Also, außerhalb des Beispielordners ist Hype.pde wirklich die Datei, die wir in allen unseren Skizzen verwenden werden. Jetzt werden Sie im Projekt sehen, Schritte Nummer drei Vorträge darüber, wie wir unsere Ordnerstruktur erstellen werden. Zum Beispiel könnte ich ein neues Dokument erstellen, und dann sagen wir einfach, dass dieses Dokument Projekt 1 genannt wird, und in diesem werde ich einen neuen Ordner namens build erstellen. Innerhalb dieses Build-Ordners werde ich Hype.pde kopieren. Wenn ich Sublime Text 2 öffnen und dies zu Verarbeitung wechseln und auf Speichern klicken würde, würde ich zu meinem Desktop gehen, ich würde zu Projekt 1 gehen, ich würde zu bauen gehen, und ich würde diese build.pde nennen. Jetzt werde ich keinen Code schreiben, aber ich zeige Ihnen die Struktur, dass sich in diesem Build-Ordner Ihre build.pde und hype.pde befindet. Was ist Hype.pde? Ich werde hier in einer Sekunde ein wenig über Projektschritt vier sprechen. Was Hype.pde in der Tat ist, wenn Sie versuchen, dies in Sublime Text 2 zu öffnen, werden Sie feststellen, dass wir auf ein wenig warten werden. Hype.pde enthält jede einzelne Codezeile innerhalb des HYPE-Universums. Also, was ist das HYPE-Universum? Wenn Sie sich beispielsweise den PDE-Ordner ansehen, sind dies alle verschiedenen Klassen, die wir haben. Nun, sieh dir das an. Seht ihr? Es ist alles in einer Zeile, und tatsächlich, wenn du nur [unhörbar] wärst, wärst du für immer da. Also, Hype.pde ist eigentlich jede einzelne dieser 53 PDE-Dateien, aber mit all den harten Renditen entfernt und in einer Zeile verkleinert. Also, das ist das HYPE-Universum. Also, zum Beispiel, sagen wir, wir haben über HoScillation gesprochen. Wenn Sie Hoscillator.pde öffnen, ist dies tatsächlich der Code, der alle Anweisungen enthält , die sich mit jeder Art von Schwingung befassen, die Sie in einem Ihrer Projekte verwenden möchten. So kommt es einfach so vor, dass diese eine Datei hier, die 244 Codezeilen ist, alle Registerkarten entfernt werden, alle harten Renditen werden entfernt, und sie ist irgendwo in Hype.pde begraben. Also, nochmals, nur wiederholen, Hype.pde ist jede einzelne dieser einzelnen Pdes, die in einer Datei platziert wird. Also, wenn wir neue Klassen hinzufügen, fügen wir zu Hype.pde hinzu. Vielleicht möchten Sie weiter auf die GitHub-Site zurückschauen, vielleicht möchten Sie auf Twitter hören , um zu sehen, ob ich neue Klassen ankündige, die wir geschrieben haben, denn wenn ja, wird Hype.pde aktualisiert. Nun, Schritt vier in der Skillshare Klasse, JAR versus pde. Was zum Teufel bedeutet das? Es gibt viele externe Bibliotheken, die Sie mit Processing verwenden können. Das Problem ist, dass Sie keine externe Bibliothek und Ausgabe in JavaScript mit Processing.js verwenden können. Sie können keine externe Bibliothek verwenden, die als JAR-Datei verpackt ist, und Sie können nicht in Processing.js ausgeben, was bedeutet, dass alle Funktionen, in HTML5 ausgeben zu können, sie auf meinem iPhone anzeigen zu können, in der Lage zu sein, es auf einem iPad anzuzeigen, wird all das aus dem Fenster geworfen , wenn Sie die Bibliothek tatsächlich als JAR-Datei erstellen. Deshalb haben wir uns entschieden, HYPE zu einer Reihe von PDE-Dateien zu machen. Indem sie PDE-Dateien bedeutet, dass wir in HTML5 veröffentlichen können, können wir in Processing.js veröffentlichen. Nun, Sie fragen sich vielleicht, wie kann ich in Processing.js veröffentlichen? Also, wenn Sie tatsächlich Processing 2 hier starten, werden Sie feststellen, dass hier oben rechts Java steht, und das ist der einzige Modus, der da ist. Aber Sie können auf Add-Modus klicken, und Sie würden diesen kleinen Modus-Manager bekommen, und Sie werden genau hier bemerken, JavaScript-Modus. Wenn Sie tatsächlich auf Installieren klicken, wird der JavaScript-Modus in Processing 2 heruntergeladen. Also, wenn ich das tatsächlich schließe, kann ich eine Reihe von Code schreiben, ich kann in Java veröffentlichen, wenn ich auf Ausführen klicke. Weißt du was? Ich muss vielleicht neu starten. Verarbeitung 2, und jetzt haben wir JavaScript. Wenn Sie auf JavaScript klicken, können Sie jetzt Ihre Skizzen öffnen und auf Erstellen klicken. Es wird tatsächlich alle Dateien für die Verwendung in einem Webbrowser verpacken. Es wird den HTML generieren, es wird das JavaScript ausspucken, und jetzt, viele dieser Skizzen, die wir machen, können wir tatsächlich in einem Browser laden und anzeigen. Also, Projektschritte zwei, drei und vier, sprachen wir über das Betrachten der ZIP-Datei, das Verdauen aller Inhalte dort, viele gute Sachen, viele gute Beispiele. Projizieren Sie Schritt drei, suchen Sie Hype.pde. Erinnern Sie sich an die Ordnerstruktur, die wir verwenden werden , da wir diese Ordnerstruktur in jedem unserer Projekte verwenden werden. JAR versus pde. Ich möchte keine JAR-Datei verwenden, möchte pde verwenden, damit Sie tatsächlich im Web veröffentlichen können. Nun, im nächsten Video, werden wir über HYPE sprechen, und speziell werden wir darüber sprechen, was Fluid Interface ist und was Methodenverkettung ist, denn das sind Konzepte, die tatsächlich Teil von HYPE sind. Im nächsten Video werden wir darüber sprechen, was in der AS3-Version von HYPE passiert ist und was in der Verarbeitungsversion in HYPE passiert ist. Wir sehen uns im nächsten Video. 9. Java vs. JavaScript: Ich habe meine Meinung geändert. Bevor ich zum nächsten Abschnitt übergehe, möchte ich nur sehr schnell das Java versus JavaScript-Szenario zeigen. Wir haben uns Hoscillator angesehen und wenn Sie tatsächlich ein Beispiel öffnen, zum Beispiel in Sublime Text 2, hier ist der Code. Und wenn ich auf „Build“ klicke, sehe ich diesen Inhalt tatsächlich in Java an. Okay, also das ist Java, das hier läuft, okay. Nun, wenn ich genau dieselbe Datei nehmen würde, Beispiel eins und sie tatsächlich in der Verarbeitung von zwei öffnen würde, okay. Sie können beide Redakteure hier sehen, oder? Diese sind beide identisch, und wieder habe ich Java in der oberen rechten Ecke ausgewählt. Wenn ich tatsächlich auf „Click“ geklickt wurde und das ausgeführt wurde, okay, aus der Verarbeitung von zwei. Auch hier sind diese beiden identisch, Sie führen sie im Modus von Java aus. Ok. Wenn ich das jedoch jetzt schließe und hier in den Modus gehe und zu JavaScript wechselt, okay. Ich möchte, dass Sie sich diese Mappe hier ansehen. Die Tatsache, dass ich zu JavaScript wechseln, eine sketch.properties-Datei hinzugefügt und wenn ich tatsächlich auf „Ausführen“ klicke, ist, dass es sie tatsächlich im Web veröffentlicht. Sie werden feststellen, dass es eine neue Datei namens web-export erstellt hat. Es enthält die index.html, es enthält die PDE-Datei, die diese Animation durchführt, und die Verarbeitung von JS, die Ihre PDE-Datei interpretiert, um in der Leinwand in HTML5 ausgeführt wird . Also sieh mal, diese beiden sind absolut identisch. Die, die in Java ausgeführt wird und die im Browser ausgeführt wird, ist die Leistung gleich. Also wieder, das ist nur ein Grund, warum wir uns entschieden haben, Hype nicht mit dem JAR-Format zu erstellen. Wir haben uns entschieden, das PDE-Format zu verwenden, damit wir unsere Inhalte in JavaScript veröffentlichen können . Okay, wir sehen uns im nächsten Video. 10. HYPE AS3 / Projektschritt 5: Was ich jetzt tun möchte, ist tatsächlich zu sehen, wie die alte Version von Hype tatsächlich strukturiert war, wenn Sie Code schreiben. Nun wurde die alte Version von Hype für Flash und ActionScript 3 entwickelt. Es war ein fantastisches gemeinsames Projekt zwischen einem guten Freund von mir Brandon Hall und mir. Es führte den gleichen Dienst durch, der heißt, ich möchte Sachen machen und das Zeug kann in separate Klassen verpackt werden, um das Leben einfacher zu machen. Es wird also hilfreich sein, sich anzusehen, wie die alte Version von Hype konstruiert wurde, weil sie Ihnen einen Einblick in die Abfahrten geben wird , die wir genommen haben, als wir den Verarbeitungsport gemacht haben. Stellen Sie sich also für einen Moment vor, dass wir ein Gitter auf dem Bildschirm zeichnen wollen. In der Hype AS3-Version könnte ich so etwas tun, wo ich sagen würde, var NumAssets ist eine ganze Zahl gleich 25. Also, das ist eine Variable, die die Anzahl der Dinge darstellt, die ich auf dem Bildschirm berühren möchte. Jetzt hatten wir ein GridLayout in der AS3-Version und das Schöne an dem GridLayout ist, dass Sie GridLayout aufrufen könnten, es einige Argumente übergeben und dass diese Argumente Informationen darin wären , das Gitter auf dem Bildschirm visuell zu konstruieren. Also, um das zu tun, könnte ich so etwas schreiben, wo ich sagen würde, var Layout ist ein GridLayout gleich neuem GridLayout. Dann sehen Sie vielleicht in einigen meiner Beispiele, dass einige Zahlen an GridLayout übergeben werden. Es könnte also so etwas wie 50,50,100,100,5 sein. Nun, wahrscheinlich die größte Beschwerde mit diesem Code ist, dass Sie keine Ahnung haben, was diese Zahlen darstellen. Keine Ahnung, was 50 , 50, 100, 5 ist. Sie müssten tatsächlich die GridLayout-Klasse öffnen, sich die Funktion ansehen und dann schauen, was diese Argumente sind und was sie setzen. Also, das bedeutete, dass ich in allen Beispielen einen Kommentar abgeben müsste, der den Leuten sagt, was diese fünf Argumente waren. So endet es, dass die Argumente oder xStart, YStart, XSpacing, ySpacing und Spalten. Nun, da wir ein Gitter auf dem Bildschirm erstellen, waren die ersten beiden Argumente, wo soll das Gitter in seiner Gesamtheit auf dem Bildschirm existieren? Also würde ich sagen: „Okay, nun, ich möchte, dass es 50 Pixel hat, beginne bei 50 Pixeln auf der X-Achse, beginne bei 50 Pixeln auf der Y-Achse. Die nächsten beiden Argumente, XSpacing und YSpacing, definieren den Abstand zwischen den einzelnen Zellen im Raster. Also würde es anfangen, das erste Element anzuhängen und dann 100 Pixel später würde es das zweite Element anhängen. Nun, das letzte Argument ist Spalten. Also, in diesem Fall bauen wir ein Raster auf, das 25 Assets enthält, und wenn Sie also 25 geteilt durch fünf nehmen, erhalten Sie fünf. Also, es weiß, dass es ein fünf mal fünf Gitter machen wird, indem man 25 geteilt durch Spalten nimmt. Dieses fünfte Argument würde also die Anzahl der Spalten beschreiben , die sich innerhalb dieser Gruppe befinden. Also, ich denke, wenn man sich das ansieht, gibt Ihnen einen Einblick, wie wir einen Abflug gemacht haben , als wir uns entschieden haben, den Hype Processing-Port zu machen. Also, im nächsten Video, werden wir die gleiche genaue Struktur aufgreifen, aber wir zeigen, wie es in dem Prozess wichtig ist, anders ist. 11. HYPE Processing / Projektschritt 6: Okay, jetzt beschäftigen wir uns mit Schritt sechs im Projektleitfaden, und das geht wirklich darum, was sich im Verarbeitungsport von HYPE geändert hat. Nun, die HYPE AS3 Version, tolles Projekt zwischen Brandon Hall und mir. Als ich mich jedoch entschied, in Flash als Entwicklungstool zu arbeiten, und wirklich zur Verarbeitung übergehen wollte und diesen Wunsch hatte, die HYPE AS3-Version in die Verarbeitungsumgebung zu portieren, war es eine Gelegenheit für mich, um einige der Dinge zu adressieren, wie der Code strukturiert wurde, nur um es für mich und andere einfacher zu machen. Also, die Verarbeitung Port ist ein Projekt zwischen mir und einem wunderbaren Gentleman in Manila, Philippinen, James Cruz. Wieder begannen wir, Erfolgsgeschichten in der Programmiergemeinschaft zu betrachten und gab es etwas, das in der Programmiergemeinschaft von Vorteil war, das den Verarbeitungsport von HYPE besser machen könnte als vorher. Damit würde diese Idee von Fluent Interface und dieser Einsatz von Methodenverkettung neu definieren wie sich der Verarbeitungsport von HYPE grundlegend unterscheidet. Ok? Wirklich, das war eine Gelegenheit für uns, uns die jQuery-Community anzusehen und zu sagen: „Ja, das ist der richtige Weg.“ Nun, diese Links wurden in den Projektschritten zur Verfügung gestellt , so dass Sie auf fließende Schnittstelle lesen können, können Sie über Methodenverkettung nachlesen. Aber schauen wir uns einfach an, was wir in den HYPE AS3 Tagen gemacht haben und wie sich dieser Code im Verarbeitungsport geändert hat. Also, sagen wir, ich öffne hier ein neues Dokument, ich werde offensichtlich die Verarbeitung als meine Sprache festlegen und dann werde ich nur den Anfangscode aus den AS3-Tagen einfügen. Var NumAssets 25, var GridLayout, und dann sprachen wir über diese Zeile zwei, die in den Kommentar setzen müssen, so dass Sie einige Anweisungen geben können , was diese Argumente sind. Nun, was fließende Schnittstelle und Methodenverkettung uns erlaubt, ist, diesen Code tatsächlich ein wenig eleganter zu schreiben. Also, lassen Sie uns einfach sagen, dass dies HYPE-Verarbeitung ist. Ok. Wenn ich denselben Code schreiben würde, aber im HYPE-Verarbeitungsport, würde ich wahrscheinlich so etwas tun, Integer NumAssets entspricht 25, okay? Also, das ist ein bisschen anders geschrieben, aber immer noch das Gleiche. Ich erstelle eine Variable, die die Anzahl der Dinge darstellt, die ich auf dem Bildschirm zeichnen möchte. Nun, wenn Sie sich erinnern, müssen wir die Rasterlayout-Klasse aufrufen. Also, ich werde voran gehen und sagen, hGridLayout, Layout entspricht neues HGridLayout, so. Lassen Sie uns einfach darüber reden. Jedes Mal, wenn Sie HYPE-spezifische Aufrufe verwenden, wird den meisten Methoden ein H vorangestellt. Also, HColorPool, HGridLayout, Hoscillator, also ist es nur eine Möglichkeit für uns zu identifizieren was regulärer Verarbeitungscode ist und was des HYPE-spezifischen Verarbeitungscodes. Also, hier erstelle ich eine Variable namens Layout, ich werfe sie als HGridLayout und ich sage, es ist ein neues HGridLayout. Nun, an diesem Punkt denkst du vielleicht: „Oh ja, Josh wird da ein paar Zahlen reinlegen.“ Nein, bin ich nicht. Ich werde die Variablen tatsächlich ein wenig anders definieren. Also, was ich tun werde, ist in der nächsten Zeile, die ich sagen werde: „Hey, Layout, ich möchte Sie nur wissen lassen, dass Sie diese Variable namens start X haben und das wird gleich 50 sein.“ Ok? Wenn ich das kopieren und einfügen und dann ändern würde, um Y 50 zu starten, könnte ich sagen, Layout Punktabstand, in Ordnung? Oben oben war es X Abstand und Y Abstand. In der HYPE-Verarbeitungsversion werde ich nur Layoutpunktabstand sagen, und dann werde ich 100 auf dem X, 100 auf dem Y sagen, und im letzten Argument werde ich voran gehen und sagen: „Hey Layout die Spalten ist fünf.“ Ok? Also, dieser Code ist jetzt konzeptionell ein Duplikat dessen, was die AS3-Version tun wird , um eine Klasse aufzurufen und einige Argumente zu übergeben. Nun, du sagst vielleicht zu dir selbst. „ Wow, okay, das ist viel mehr Code als der oben.“ Die oben oben haben Sie es nur in drei Zeilen, aber wir können dies tatsächlich kürzer machen, indem wir Ihnen zeigen, welche Methode Verkettung ist. Aber bevor ich die Methodenverkettungsversion mache, reden wir einfach über ein paar Sachen. Eine ist, Sie müssen keinen Kommentar mehr setzen weil Sie tatsächlich nennen, was es ist, das Sie einstellen. Also, du sagst: „Hey, Layout-Punkt-Start-X-Nummer.“ Also, offensichtlich, Zeile 12 setzt die Start-X-Position. Wenn Sie den Code auf diese Weise strukturieren, bedeutet dies, dass Sie Bezeichner einfügen , was die Zahlen tatsächlich sind. Was ich denke, macht dies viel hilfreicher für Anfänger. Nicht nur das, aber Sie könnten sagen, dass Sie Start X hier definieren wollten, es muss nicht diese starre Reihenfolge oben sein. Denken Sie daran, ich sagte Ihnen, das erste Argument war immer X Start, das zweite Argument war immer Y Start. Also, es musste in dieser Reihenfolge sein. Indem Sie den Code auf diese Weise entwickeln, können Sie in beliebiger Reihenfolge angeben, die Sie tatsächlich wollen, und es endet, dass jede Klasse tatsächlich einige Standardeinstellungen hat. Also, wenn Sie sich tatsächlich entschieden haben, nicht X start, Y start zu schreiben, und Sie tatsächlich den Code ausgeführt haben, würde es tatsächlich funktionieren, weil die Klasse selbst einige Anfangszahlen für Start X und StartY hat . Y hat Dies ist eine großartige neue Ergänzung zu HYPE. Diese Idee, dem Anfänger zu helfen , zu verstehen, was die Zahlen mit jeder Klasse verbunden sind. Nun, kommen wir zurück zu: „Josh, oben oben sind es nur zwei Zeilen Code und offensichtlich ist das viel mehr.“ Das Interessante ist, dass wir diese Methode Verkettung tun können. Also, wenn Sie möchten, könnten Sie den Code auf diese Weise schreiben. Sie könnten jedoch auch den Code auf diese Weise schreiben, was heißt, man könnte sagen, Integer NumAssets ist gleich 25, und dann könnten Sie sagen, hGridLayout entspricht neues GridLayout und dann, nachdem Sie das offene paren schließende paren gemacht haben, könnten Sie sagen Punkt Start X, können Sie dann Punkt Start Y sagen, Sie könnten dann Punktabstand sagen, und dann können Sie es mit Punktspalten beenden. Das ist also eine Methodenverkettung, bei der Sie eine Methode aufrufen und dann jedes der Argumente verketten, die Sie diese Methode danach übergeben möchten. Also, jetzt sind wir wieder dabei, zwei Codezeilen zu verwenden, okay? Also, du sagst: „Hey, ich will ein Layout machen, und das Punkt, Punkt dies, Punkt dies, Punkt dies, Punkt dies,“ und du könntest einfach weitermachen. Also, diese Idee, Methodenverkettung zu verwenden, könnten Sie dies in beliebiger Reihenfolge setzen oder Sie könnten zuerst Abstand machen, dann X starten und Y starten, Sie können neu anordnen, wie Sie sie schreiben. Es ist nicht so starr wie oben. Nun, in vielen meiner Beispiele, könnten Sie so etwas sehen, wo ich tatsächlich mit dem Code auf diese Weise beginne, aber ich mache das tatsächlich, was heißt, ich werde das schließende Semikolon am Ende auf seine eigene Zeile setzen, und dann könnte ich harte Rückkehr, Tab, Tab, ich setze nur harte Returns und Tabs ein, um den Code zu bereinigen, so dass das Argument nur ein wenig einfacher zu lesen ist. Allerdings werden alle drei funktionieren, und alle drei von ihnen tun genau das Gleiche. Also, wieder, Sie könnten es auf diese Weise tun, wo Sie Layout aufrufen und dann Layout-Punkt-Argument, Layout-Punkt-Argument, Layout-Punkt-Argument sagen , oder Sie könnten die Methode Verkettung tun, um es zu schreiben, wo Sie -Layout und dann Verketten der Argumente nach. Dies ist offensichtlich genau das gleiche, außer dass ich harte Returns und Tabs einfüge , so dass ich den Code einfach ein wenig einfacher betrachten kann. Sie werden sehen, wie bei einigen Klassen wie Hoscillator, Sie können tatsächlich viele Argumente in Hoscillator angeben, und wenn es viele Argumente hat, könnte diese Zeile 20 wirklich lang sein. So lange, dass ich vielleicht nicht sehe, was am Ende ist. Also, die Zeile 24 bis 30 zu machen, die Sie finden, ist das, was ich oft tue, nur weil es ein wenig einfacher macht alle Argumente, die ich in das HGridLayout übergebe, visuell zu betrachten . Ok. An diesem Punkt haben wir Abschnitt eins gemacht, der Umgebungseinrichtung ist. Wir schließen jetzt Abschnitt zwei ein, nur eine Einführung in das ist, was HYPE für die Verarbeitung ist und was, wieder, es ist eine ganze Bibliothek von Dingen, die Dinge tun. Also, wenn Sie mit Farbe arbeiten wollen, haben wir einen Farbpool. Wenn Sie mit Rastern arbeiten möchten, haben wir ein Rasterlayout. Es ist also eine Reihe von Klassen, die Ihnen helfen, Dinge schneller und effizienter zu machen , so dass Sie diesen Code nicht noch einmal schreiben müssen. Jetzt werden wir zu Abschnitt drei übergehen. Abschnitt drei ist, visuelle Assets zeichnen. In der Tat werden wir eigentlich nicht anfangen, echten Code für unser Projekt zu schreiben , bis Schritt vier, wo wir tatsächlich auf den Bildschirm malen. Also, Schritt drei ist, wir werden unsere visuellen Assets zeichnen. Also, wir werden umschalten, um ein paar Bilder zu zeichnen. Wie bereiten wir das Kunstwerk vor? Dann werden wir das Kunstwerk an der Seite speichern, denn wenn wir in Abschnitt vier Gemälde auf den Bildschirm gehen , haben wir einige Ufer von Kunstwerken, mit denen wir anfangen können zu malen. Also, Abschnitt zwei, nur eine allgemeine allgemeine Ansicht davon, was HYPE ist, wie es einfach zu bedienen sein wird, und als nächstes gehen wir zum Zeichnen einiger visueller Assets. Wir sehen uns im nächsten Abschnitt. 12. Einführung: visuelle Assets zeichnen: So zeichnen. Wirklich, das ist nicht kompliziert. Es ist nur, wie bereiten wir das Kunstwerk vor, das wir machen werden. Die Art der Programmierung, die ich mache, die Art der Programmierung, die wir zusammen machen werden, ist völlig Artwork agnostisch. Also, dies ist der Teil, der wirklich spannend wird, weil das Programm wird zufällig eine Komposition basierend auf der Art von Kunstwerk, die Sie erstellen erstellen erstellen. Ich bekam das, als ich in Malaysia war, und wie denken Sie an diese, nicht die ganze Komposition, aber denken Sie an diese als individuelle Vermögenswerte, die die Zeichnungen, die wir machen, die in die Programmierung, die wir schreiben, bevölkert werden können . Sieh dir dieses Zeug an, diese beiden sind aus Istanbul, der Türkei, und sieh dir die Muster dieser Krieger an. Ich mag diese ganze Zeichnung machen, aber ich kann das in sechs verschiedene Vermögenswerte aufteilen. Manchmal muss ich mich nur von einer Zeichnung inspirieren lassen, aber ich werde diese Zeichnung in sechs verschiedene abstrakte Assets aufteilen. Insbesondere werde ich sie von Illustrator zu SVG ausgeben, was skalierbare Vektorgrafiken ist, weil wir diese SVGs sehr schön in die Verarbeitung ziehen können und wir diese Zeichnungen verwenden, um zufällig Kompositionen. Willst du etwas mit Kätzchen und Kettensägen machen? Kätzchen und Kettensägen. 13. Visuelle Assets zeichnen: Okay, willkommen in Abschnitt drei, Zeichnen von visuellen Elementen. In diesem Abschnitt werden wir über das Mapping von Artwork auf die Programmierung, die wir schreiben sprechen . Also, das ist meine Art von Denken seit Jahren und Jahren. Es gibt Leute, die nur Code verwenden, um die visuellen Assets zu zeichnen. So gibt es zum Beispiel eine riesige Gruppe von Menschen, die einfach mit Rechtecken, Linien und Ellipsen zeichnen und das ist in Ordnung. Aber die Verarbeitung unterstützt natürlich die Arbeit mit Bildern, es unterstützt auch die Arbeit mit SVG, Scalable Vector Graphics. Also, was ich tun möchte, ist eigentlich Vektor-Basis-Assets, die ich in diese Programme abbilden werde, zu zeichnen , die wir schreiben werden. So, zum Beispiel, Rasterlayout. Warum machen wir kein Raster, aber dieses Raster ist eigentlich visuell handgezeichnete Assets? Also, im Moment sehen Sie ein paar Sachen auf dem Bildschirm , die ich etwas Zeit mit dem Zeichnen verbringen werde. Ich bin ein absoluter Freak, wenn es darum geht, kulturelle Ästhetik und Inhalte zu jagen . Wir könnten die ganze Klasse damit verbringen, nur Dinge anzuschauen , die ich auf der ganzen Welt gesammelt habe. Also, zum Beispiel, lassen Sie uns das überprüfen. Hier ist ein Buch Gramm 4000 Blumen- und Pflanzenmotive. Auch hier ist dieser nur mit verschiedenen Pflanzenmotiven gefüllt. Für mich könnte dies ein Beginn einer Abreise sein, ein Beginn der Inspiration, oder vielleicht gibt es hier Dinge, die perfekt funktionieren werden, genau wie es ist. Also, ich sammle eine Menge Bücher, die ich ständig Inspiration Jagd. Aber manchmal setze ich mich einfach mit einem Skizzenbuch und erfinde Ideen auf Papier. Es gibt also ein Blumenmotiv, das ich gerade auf Papier gezeichnet habe. Vielleicht setze ich mich hin und zeichne die Zimmerpflanzen, die in meinem Haus sind. Und wieder, ich suche nach Form, ich suche nach Form, ich suche nach Textur. Vielleicht setze ich mich hin und arbeite nur ein paar Zuckerschädel aus, und das sind einige. Anfangs wurde ich tätowiert, aber die erste Art der Planung war nur das Skizzieren auf Papier. Manchmal denke ich nur an geometrische Formen. Manchmal setze ich mich einfach hin und denke nur an einige geometrische Formen. Oder Sie könnten sogar nach draußen gehen, und das ist von der Architektur, also gibt es hier eine Fenstermarkisen-Rate, die Gebäude-Nummer war 314. Das sind Rahmen aus einem Fenster, und dieser hatte ein Schild. Manchmal bekomme ich nur Formen aus einer abstrahierten Sicht auf das Leben um mich herum, im Falle dieser Architektur. Ich verbrachte eine tolle Reise in Istanbul, Türkei. Das letzte Projekt, das ich gemacht habe, basiert auf diesen Kriegern, die ich am Ende in Istanbul gekauft habe, und nur irgendwie einige dieser Formen von diesen Kriegern neu vorzustellen. Auch hier denke ich abstrakt über sie nach. Ich kann also eine ganze Komposition zeichnen, nur um sie in einzelne abstrakte Teile zu zerreißen. Also, jetzt sollten Sie ein paar Sachen auf dem Bildschirm sehen. Das ist eigentlich aus einem Buch, das mir jemand schickte, mit dem Wissen, dass ich ausflippen würde , Mongolisches Nationalornament. Also, der Scan, den du auf dem Bildschirm siehst, stammt eigentlich aus diesem Buch, und offensichtlich habe ich ihn verloren. Das hier sind nur Bananen. Einige der Sachen, die hier drin sind, sind nur ein interessanter Anfang für ein Gespräch. Aber es ist ein Rätsel, es ist ein Rätsel. Ich muss Sie warnen, ich habe keine Ahnung, ob das klappt. Ich glaube, es wird funktionieren. Ich habe das lange genug getan, um zu wissen, dass ich denke, dass das funktionieren wird. Aber oft setze ich mich hin und zeichne Sachen mit der einzigen Absicht, dass ich es einem Programm zuordnen werde, und visuell funktioniert es nicht. Also gibt es diese Art von Versuch und Irrtum. Diese Seite ist für mich ziemlich sicher. Es ist das, was du gerade auf dem Bildschirm siehst. Ich denke, das wird ziemlich gut funktionieren. Also, ich habe es mit 150 DPI gescannt, und jetzt werde ich den Prozess des Zeichnens durchlaufen. Ich möchte es vektorisieren, und natürlich gibt es viele Werkzeuge zum Erstellen von Vektoren. Ob Sie es glauben oder nicht, ich werde das tatsächlich mit Flash zeichnen, und es gibt eine Reihe von Gründen, warum. Ich mag es, in Flash zu zeichnen, weil es so nah an Freehand ist, wie ich es bekommen kann. Und anfangs war ich Freihandbenutzer. Ich mag diese Idee, Vektorlinien und Sachen zeichnen und dann wegschneiden zu können. Also, jedes Mal, wenn sich eine Linie tatsächlich schneidet, kann ich diese Abschnitte tatsächlich formen oder wegschneiden, indem ich einfach auswähle und lösche. Also etwas, das Illustrator lange Zeit nicht unterstützt hat. Nun, es unterstützt es mit Live-Farbe, Sie können tatsächlich etwas in Live-Farbe umwandeln und dann können Sie durch den Prozess der Bildhauerei gehen. Aber Illustrator ist für mich auch wie ein erstaunliches Vektorwerkzeug, fast zu erstaunlich. Flash ist in vielerlei Hinsicht nicht erstaunlich. Das gefällt mir. Ich mag die Verzerrung, die Flash mir bringt. Also, Sie werden in diesem nächsten Video sehen, ich werde wahrscheinlich eine Zeitraffersache machen, oder Sie werden sehen, wie ich sehr schnell zeichnen, so dass Sie sehen können , wie ich eines dieser Stücke vektorieren. Aber was ich am Blitz liebe, ist, dass ich das Bleistift-Werkzeug verwenden werde und ich werde eine Wacom-Tablette verwenden, und die Linien sind nicht perfekt. Sie können sehen, als würde ich eine Linie zeichnen und sie werden eine Menge Verzerrung in der Linie sein, und das gefällt mir wirklich. Ich mag, dass es nicht perfekt ist, weil es ihm mehr von diesem Handzeichnen Gefühl gibt. Ich habe viel über Rekorde geredet. Ich habe noch einen Plattenspieler hier im Studio, ich habe Schallplatten hier oben. Und es gibt tatsächlich eine analoge Wärme für Aufzeichnungen, die digitale Audio einfach nie haben wird. Ich meine, wir können dieses Argument haben, aber das ist die Wahrheit. Ich mag, dass ich diesen wirklich technischen Prozess habe , um die Komposition mit Programmierung zu generieren, aber es verwendet Assets, die nicht perfekt sind. Sie verwenden Assets, die von Hand gezeichnet werden. Wenn ich einen Kreis machen will, zeichne ich manchmal den Kreis, damit dieser Kreis kein perfekter Kreis ist. Ich verwende das Stiftwerkzeug nicht gerne, um perfekte Bézierkurven zu machen, es ist zu sauber für mich. Ich mag Verzerrung, ich mag, dass meine Hand schüttelt, ich mag diese Art von, es ist symmetrisch, aber es ist handgezeichnet, und dann nehmen Sie diese handgezeichneten Vermögenswerte und bringen Sie sie in eine sehr unberührte und geordnete Situation, wie -Programmierung. Also, nächstes Video werde ich zum Wacom-Tablet übergehen. Ich werde wahrscheinlich kein Audio an haben. Also, der Bildschirm, den du gerade siehst, ist eine Antike von Wacom, und ich werde das verwenden, um zu zeichnen. Außerdem nehme ich das auf, was großartig ist, und es ist ein Handschuh, der speziell für die Arbeit an dieser Antike gemacht wurde, denn diese Antike ist ein Monitor und es erwärmt sich. Was passieren wird, ist, dass meine Hand dazu neigt, zu bleiben. Also, was schön ist, ist, dass es mir erlaubt, Kurven zu machen , ohne dass ich mir Sorgen machen muss, dass meine Hand am Bildschirm klebt. Also, wenn Sie ein Wacom-Benutzer sind, empfehle ich den Handschuh, den Power-Handschuh, weil Sie diese schönen flüssigen Kurven bekommen können , ohne dass Ihre Hand tatsächlich an der Oberfläche haftet. Ob es sich um diese antike oder auch wenn es nur eine normale Wacom Tablette ist, die Fähigkeit, nicht an der Oberfläche zu kleben und diese Art von schönen Kurven zu machen, ist super hilfreich. Also empfehle ich den Handschuh. Also, nächstes Video, kein Audio, Zeitraffer, und wir werden eine dieser Vermögenswerte erstellen. Ich möchte, dass du guckst, wie ich Flash benutze, um diese Zeichnungen, die ich machen werde, tatsächlich zu schneiden und zu formen. Nun, ich werde dieses Video mit beenden, sollten Sie sich überlegen, welche visuellen Assets Sie verwenden möchten, um dieser Umgebung zuzuordnen? Auch hier kann es blumig sein, es kann organisch sein, es kann geometrisch sein. Ich werde offensichtlich ein paar Vermögenswerte für Sie zusammenpacken, damit Sie einige der Zeichnungen sehen können, die ich mache. Sie werden an die Projektschritte als ZIP-Dateidownloads angehängt. Aber Sie sollten denken „Josh wird uns diese Programmierung beibringen, und diese Programmierung will Dinge auf dem Bildschirm anhängen, was sind die Dinge, die angehängt werden?“ Es werden Zeichnungen sein, die du machst. Und das ist, wo die Individualität wirklich mit allen von der Klasse eingereichten Sachen durchscheinen wird, denn die Programmierung wird Ihre Assets verwenden, Programmierung wird meine Assets verwenden, so weiter und so weiter. Jedes Stück sollte also einzigartig sein, denn jeder von Ihnen wird verschiedene Assets in dieser Umgebung zuordnen. Sehen Sie mir beim Zeichnen zu, und denken Sie darüber nach, was Sie machen werden, um in diese Umgebung einzuordnen. Ok? Wir sehen uns im nächsten Video. 14. Abstraktion zeichnen: Ich wollte mir nur eine Minute Zeit nehmen, um dieses Bild auf dem Bildschirm zu zeigen. Hier ist ein perfektes Beispiel für einen Ausgangspunkt der Inspiration, der abstrahiert wird. So, zum Beispiel, das ist diese Reise nach Istanbul. Also, am Ende ziehe ich diesen Kerl neu, aber vielleicht wird das zu einem meiner visuellen Vermögen, das zufällig Teil seines Arms ist. Beachten Sie, dass ich die Gesichter nicht verwende. Ich möchte keine Art von Bildern verwenden, die erkennbar werden, wo man „Oh, das ist ein Gesicht“ geht. Ich mag mich ändern, aber ich versuche, meine Sachen irgendwie abstrakt zu halten , damit du anfänglich nicht weißt, was du gerade ansiehst. Sehen Sie sich diese eigenständige Form hier an, die zufällig eine Auswahl dieses Rumpfes ist. So können Sie manchmal eine Zeichnung machen und diese Zeichnung in sechs verschiedene Assets oder fünf verschiedene Assets aufteilen , oder je nachdem, was auch immer. Also, denken Sie daran, dass, wenn ich sage, suchen Sie nach Bildern, die in Assets umgewandelt werden, es ein Bild sein könnte. Dann, dass ein Bild, könnten Sie in separate unabhängige SVG-Dateien zerlegen. Auch hier ist dies nur ein kurzes Beispiel dafür, wie eine Zeichnung oder zwei Zeichnungen zu meinem Inhalt werden. Ok. 15. Zeitraffer zeichnen: - Gut. - In Ordnung. 16. Letzte Asset-Vorbereitungen: Ok. So haben Sie gerade das vorherige Video gesehen, das eine Zeichnung Zeitraffer war. Du solltest jetzt auf dem Bildschirm das Kunstwerk sehen, das wir gezeichnet haben. Nun, Sie haben vielleicht im Zeitraffer bemerkt, ich tatsächlich angefangen habe, etwas Farbe in der eigentlichen Zeichnung zu blockieren, die ich gemacht habe. Ich tue das, weil es mir hilft, zu organisieren, wie ich möchte, dass Dinge in Bezug auf Farbe blockiert werden. Ok. Also, zum Beispiel, wie vielleicht diese speziellen Formen hier, möchte ich alle die gleiche Farbe haben. Also, ich habe bereits einige erste Graustufenblockierung durchgeführt. Jetzt muss ich das aus Flash holen und es tatsächlich in Illustrator bringen , damit ich es in eine SVG-Datei ausgeben kann. Nun, wenn Sie überhaupt nicht in Flash zeichnen, wenn Sie nur in Illustrator zeichnen, dann können Sie natürlich den ganzen nächsten Satz von Schritten überspringen. Aber was ich tun werde, ist tatsächlich die Zeichnung hervorheben, die ich gerade in Flash erstellt habe, und dann werde ich voran gehen und sagen Datei, Export, Auswahl exportieren, und wenn ich sage Export Selection, wird es wollen, um diese als FXG-Datei zu speichern. Okay, und ich werde voran gehen und das einfach auf meinen Desktop stellen. Nun, nachdem ich das getan habe, kann ich gehen und Flash minimieren oder ich kann es schließen, und Sie werden hier auf meinem Desktop sehen, ich habe FMLA bekommen und ich habe diese FXG-Datei. Nun, es kommt einfach so vor, dass Sie dieses FXG innerhalb von Illustrator öffnen können, und wenn ich das tue, kann ich sehen, dass es alle Vektorinformationen ausgegeben wird. Also, lassen Sie mich einfach dieses Dokument aufräumen, lassen Sie mich zu den Kunsttafeln gehen und ich mache das eine Breite von 300 und eine Höhe von 300, und ich werde einfach zentrieren, das nochmal versuchen, Josh. Versuchen Sie es noch einmal. Lassen Sie mich das einfach so zentrieren. Ok. Auch wenn ich auf Gliederung anzeigen klicken würde, würden Sie sehen, dass dies alle Vektorinformationen sind. Ordnung. Nun, die Sache auf die Sie sich an dieser Stelle konzentrieren, ist eigentlich die Palette der Schichten, denn das ist super wichtig. Möglicherweise stellen Sie fest, dass sich innerhalb von Illustrator sieben Ebenen und die Layer tatsächlich zusammengesetzte Pfade sind. Wenn Sie jede Ebene ausblenden und sie einzeln betrachten würden, würden Sie sehen, dass die Gruppierung, durchgegangen ist und es alle einzelnen Farben gruppiert, die ich in Flash festgelegt habe. Also, das ist wichtig, wie Sie hier sehen können, alle Formen, die ich dieses besondere Dunkelgrau gemacht habe , wurden alle als einen zusammengesetzten Pfad gruppiert. Ordnung. Nun, eine andere Sache, die Sie beachten müssen, ist, dass die oberste Ebene normalerweise immer die Strichdaten sind. Also, die Füllungen oder tatsächlich die unteren sechs, die obere ist diese Strichinformationen. Nun, an dieser Stelle, kann ich fortfahren und auf „Speichern unter“ klicken und ich kann dies als SVG-Dokument speichern. Also, aus dem Format, wählen Sie einfach die SVG und ich werde gehen, um dies auf meinem Desktop und klicken Sie auf „Speichern“. Sie erhalten diese Optionspalette, die sich öffnet, Sie können wirklich alle diese Sachen ignorieren und einfach auf „OK“ klicken. Jetzt werde ich dieses Dokument schließen und so habe ich jetzt ein SVG-Dokument auf meinem Desktop. Also, was ist SVG? Nun, Sie können dies tatsächlich zu Sublime Text 2 ziehen, und Sie würden sehr schnell sehen, dass ein SVG-Dokument tatsächlich eine Textdatei ist. Es handelt sich um eine Textdatei, die alle Punktdaten enthält , aus denen das jeweilige Bildmaterial besteht, das Sie auf dem Bildschirm gesehen haben. Also, wieder super wichtig zu beachten, dass ein SVG ein Textdokument ist. Ordnung. Also, was ich getan habe, ist, in diesem speziellen Abschnitt, wir reden nur über das Zeichnen von visuellen Assets. Im nächsten Abschnitt werden wir über das Malen auf dem Bildschirm sprechen, wie malen Sie Sachen auf den Bildschirm, und im fünften Abschnitt werden wir über die Arbeit mit Farbe sprechen. Also, es ist wirklich eine wissen Abschnitte, die ich wirklich beginne, über Code zu sprechen, aber ich muss jetzt etwas Code mit Ihnen teilen und ich werde tatsächlich eine Datei an dieses bestimmte Video anhängen , weil wir eigentlich nicht fertig sind, die Kunstwerk, denn Sie werden feststellen, dass, wenn wir diese Schritte durchlaufen, es in Illustrator gezogen haben, wir einige seltsame Ereignisse bemerken werden. Also, sieh dir an, was ich hier getan habe. Ich habe auf meinem Desktop einen Ordner namens Mongo 1 erstellt, ich habe einen Ordner namens Build erstellt. Innerhalb von Build, als mein Build-PDE und mein Hype PDE und dann habe ich einen anderen Ordner namens Daten erstellt, und es ist tatsächlich in dem Datenordner, den Sie Ihre externen Assets ablegen. Also, in diesem Fall ist hier Mongo.SVG. Nun, wenn ich diese PDE-Datei öffnen würde, habe ich ein paar Sachen geschrieben. Ok. Ich habe geschrieben, dass ich möchte, dass die Bühne 900 mal 900 sein soll, ich habe den Hintergrund angegeben, ist ein hellgrau, ich habe tatsächlich eine Auswahl an Farben angegeben, die diese Datei verwenden soll. Hier ist weiß, es gibt drei Grautöne, es gibt zwei Blues und es gibt zwei Orangen. Dieser spezielle Codeblock behandelt hier das Laden und Anhängen der externen SVG-Datei. Ich habe gesagt, dass ich will, dass das Strichgewicht 0,5 beträgt, ich habe gesagt, ich möchte, dass die Strichfarbe schwarz ist. Ich will keinen Phil, ich möchte, dass der Ankerpunkt des Kunstwerks in der Mitte ist. Ich habe seine Position angegeben, die in der Mitte angebracht werden soll, also Breite geteilt durch zwei, Höhe geteilt durch zwei. Nun, das Kunstwerk ist klein, also habe ich es in eine Skala drei gesetzt, so dass es nur ein bisschen größer wäre. Maßstab eins ist offensichtlich 100%, Skala drei ist 300%. Nun, Zeile 19 ist, wo wir tatsächlich durch das Kunstwerk laufen und etwas Farbe nur auf die Philen setzen. Nun, ich werde das nur kommentieren, weil ich diese Datei tatsächlich ausführen möchte und ich sehen möchte, was passiert. Nun, wenn Sie diese Datei ausführen, toll, schauen Sie es tat genau das, was ich dachte, es würde tun, das ist, es in die SVG-Datei geladen, es hat es an die Mitte des Bildschirms angehängt, es sieht identisch aus, wie es innerhalb von die Illustrator-Datei. Erst wenn wir anfangen, zufällige Farben anzuwenden, werden wir feststellen, dass wir in Illustrator noch mehr Vorbereitungsarbeiten durchführen müssen. Also, ich gehe voran und setze diesen Kommentar zurück , auf dem zufällige Farbe nur auf die Füllungen angewendet wird. Ordnung. Sehen Sie sich an, was passiert, wenn ich diese bestimmte Datei ausführe. Wenn ich diese Datei ausführe, flippt sie aus. Ich kann einfach nicht verstehen, was passiert, als ob es eine seltsame Blockierung hier macht, etwas wirklich Funky ist in diesem Abschnitt passiert. Irgendetwas stimmt nicht. Ok. Also, ich schließe diese Datei und gehe zurück zum Illustrator. Also, wenn ich in Mongo gehe, gehe in Build, gehe in meinen Datenordner, es gibt Mongo.SVG und ich werde dies in Illustrator wieder öffnen. Ok. Nun, da ist mein Verschwörung. Öffnen wir die Ebenenpalette, und lassen Sie mich versuchen, dies zu erklären. Wenn dies in SVG exportiert wird , enthält dieses SVG-Dokument alle Vektorinformationen für alle Grafiken, die Sie auf dem Bildschirm sehen. Also, wenn und es spielt keine Rolle, diese Vektorinformationen spielen keine Rolle, ob Sie eine Füllung festgelegt oder einen Strich festgelegt haben. Legen Sie eine Strichstärke fest, legen Sie eine Strichfarbe fest, legen Sie eine Füllfarbe fest. Vergiss das alles. Alles, was es enthält, sind die Punkte, um dieses Kunstwerk zu zeichnen. Nun, der Teil, der gerade ausflippt, ist eigentlich die oberste Schicht des Strichs. Der Grund, warum die Striche ausflippen, ist, weil diese oberste Schicht nur Striche ist und wenn Sie dies in die Verarbeitung laden und sagen: „Hey, ich möchte zufällige Füllung machen“, denkt es „Oh, du willst Füllungen auf allen Vektor Informationen.“ Also, was es tut, ist, dass es versucht, Füllfarbe auf diese Strichausgabe anzuwenden. Also, was ich tun werde, ist, diese Schicht zu verrotten. Alles, was ich auf meinen Ebenen übrig habe, ist, was nur Füllungen zu sein scheint. Nun, wenn ich voran gehe und auf Speichern klicke und lass mich das einfach zur Seite bewegen und lass uns tatsächlich zu unserem Code zurückgehen und jetzt lass es uns ausführen, mal sehen, was passiert. Bumm! Es funktioniert völlig wie erwartet, weil es zufällig Farbe auf die Füllungen anwendet. Aber dann sagst du vielleicht: „Warte einen zweiten Josh. Warum kamen die Schläge zurück?“ Nun, die Striche kamen zurück, weil wir die Striche genau hier auf Linie 11 und Linie 12 angegeben haben . Zeile 11 und in Zeile 12 hast du gesagt: „Hey, diese Füllungen, die du hast, diese Füllungen, die du hast, die keinen Schlaganfall haben. Ja, ich will Striche auf sie.“ Gib mir ein Strichgewicht von 0,5, gib mir eine Strichfarbe von Schwarz. Also, obwohl das Kunstwerk in Illustrator nur Füllungen ist. Ich wende tatsächlich einen Strich auf diese Füllungen an, innerhalb der Verarbeitung. Es war also die oberste Schicht, die die Strichinformationen hatte, die ausflippten , weil sie tatsächlich versuchte, zufällige Füllungen auf diesen zusammengesetzten Pfad anzuwenden. Also, indem ich es lösche, komme ich wieder dorthin zurück, wo ich sein wollte. Nun können Sie feststellen, dass die Farbe auch symmetrisch auf das gesamte Bildmaterial angewendet wird. In Ordnung. Das ist zum Beispiel hellblau, das ist hellblau, das ist hellblau, und genau das gleiche hellblau ist auf diesem, auf diesem und auf diesem, in Ordnung. Lassen Sie mich also voran gehen und schließen Sie das und lassen Sie mich tatsächlich zu Illustrator umschalten. Nun, lassen Sie mich diesen bestimmten Satz von Farben betrachten und es ist eigentlich dieser zusammengesetzte Pfad genau hier. Also, wenn ich das tun würde, schauen wir uns jetzt alle Kunstwerke an, die genau die gleiche Farbe haben. In der Tat, weil es nur ein zusammengesetzter Pfad ist, ist es tatsächlich nur anwendbar, es denkt nur, dass das ein Kunstwerk ist. Also hat es tatsächlich eine Farbe auf das angewendet, was es denkt, dass es nur ein Kunstwerk ist. Sehen Sie sich an, was passiert, wenn ich zu Objekt komme und Compound Path sage und „Release“ sage. Lassen Sie es von einer einzigen Form frei, wenn ich es von einer einzigen Form losließ, schauen Sie sich an, was mit der Ebenenpalette passiert. Es brach weg von zusammengesetzten Pfaden und behandelt nun jedes von ihnen als eigenständige Kunstwerke. Also, wenn ich jetzt all meine anderen Füllungen hier einschalten würde. Speichern Sie mein SVG-Dokument, wechseln Sie zurück zu meinem Code und klicken Sie auf Ausführen, beobachten Sie, was passiert. Was es jetzt tut, ist, dass es sagt: „Oh, Mann. Dies ist eine Reihe von unabhängigen Formen, also werde ich sie jeweils unabhängig färben. Nun, für Farben habe ich 1, 2, 3, 4, 5, 6, 7, 8. Ich habe acht Farben, also habe ich nicht wirklich so viele Farben. Also, wenn Sie hier schauen, sieht es so aus, als ob es die gleiche Farbe gewählt hat, aber ich kann Ihnen jetzt sagen, dass dies FFFF ist und das ist F7F7F7, es ist etwas anders. Schau, es machte diese zwei verschiedenen Farben, es machte diese zwei verschiedenen Farben, weil diese Gruppierung als zusammengesetzter Pfad dieses Kunstwerk als nur ein Kunstwerk behandelt und somit, dass ein Kunstwerk nur ein Stück Färbung. Also, wenn ich das schließen würde und ich zurück zu Illustrator gehen würde, können Sie sich vorstellen, dass, wenn ich alle diese zusammengesetzten Pfade ausgewählt und dann zu Objekt, Verbundpfad und Freigabe gehe, plötzlich Ihre Layer Palette wird ausflippen. Denn jetzt ist jede einzelne Form ein eigenständiges Kunstwerk. Wenn ich nun auf Speichern klicke, zu diesem Dokument zurückkehre und es erneut ausführen würde, hätten Sie überhaupt keine Farbsymmetrie. Weil sie denkt, dass alle diese Formen unabhängig sind und weil alle diese Formen unabhängig sind, werden sie alle anders gefärbt. In Ordnung. Also, wirklich super wichtig zu berücksichtigen, während Sie diese visuellen Assets vorbereitet denn wenn die Gruppe nur zusammengesetzten Pfad ist, werden Sie diese universelle Färbung erhalten. Wenn Sie sie alle in separate Assets aufteilen, dann erhalten Sie eine nicht harmonische Farbsituation weil sie denkt, dass jede einzelne dieser Formen unterschiedlich sind. Nun, Sie könnten sagen: „Nun, Josh, wie breche ich all diese Dinge auf und wie kann ich dann anwenden, zwei spezifische Objekte färben?“ Also, schalten wir zurück zum Illustrator und schauen wir uns etwas an. Schau dir diese Form an, diese Form, diese Form, ... woah da, whoa. Versuchen wir es nochmal. Versuchen wir das nochmal dubby. Oh, ich habe meine Pfade zerbrochen. Versuchen Sie es noch einmal, Josh. Ich habe gerade den Compound Path veröffentlicht, weil du es rückgängig gemacht hast. In Ordnung. Also, was ich tue, ist, so zu wählen. Also jetzt, eigentlich hier drin, kann ich es einfach so machen? Ja, da gehen wir, viel besser, das ist viel einfacher. In Ordnung. Hoppla. Los geht's. Es gibt eigentlich zwei getrennte Formen hier, die ich nicht bekommen habe. In Ordnung. Also, was ich getan habe, ist, dass ich das Auswahlwerkzeug nur benutze, um das gesamte Kunstwerk auszuwählen, an dem ich interessiert bin. Wenn wir also hier in der Ebenenpalette schauen, werden einige Dinge hervorgehoben. Alles, was ich tun werde, ist sie zu gruppieren. Wenn ich Befehl G mache und das alles als ein Kunstwerk gruppiere. Gehen Sie weiter und klicken Sie auf Speichern, wechseln Sie zu meinem Code und führen Sie ihn aus. Sie werden nun feststellen, dass eine Farbe auf alle acht dieser Formen angewendet wurde. Richtig? Also, orange, orange, orange, orange, orange, orange, orange, orange, orange, orange, orange. Also, super wichtig zu berücksichtigen, während Sie Ihre visuellen Assets vorbereitet sind, ist, dass, wenn alle Formen unabhängig sind, werden sie unabhängig voneinander gefärbt. Wenn du anfängst, Dinge zusammenzufassen, also zum Beispiel, wenn du ein Gesicht machst und die inneren Teile der Augen separate Vermögenswerte wären , würdest du David Bowie bekommen. Du würdest blau, du würdest grün werden, du würdest David Bowie bekommen. Könnte gut sein. Vielleicht willst du David Bowie. Wenn Sie sie gruppieren, erhalten Sie die gleiche Farbe in beiden Augen. In Ordnung. Also, denken Sie daran, dass, wenn Sie Ihre visuellen Assets vorbereitet, wenn Sie Ihre visuellen Assets vorbereitet,die Dinge getrennt halten, wird die ganze Farbe getrennt sein. Aber weil ich etwas Harmonie mag, um durch meine Randomisierung konsistent zu bleiben, mache ich tatsächlich diese Formgruppierung. Also, auf diese Weise weiß ich, dass, wenn der Code ausgeführt wird und die Farbe angewendet wird, alle diese genau die gleiche Farbe für alle erhalten werden. Dieser Abschnitt ist fertig, wir werden tatsächlich anfangen, etwas Code zu schreiben jetzt. Schmerzhaft, aber wahr. Also werden wir mit dem Malen auf den Bildschirm übergehen und wir werden anfangen, darüber zu reden, wie wir anfangen, einen einfachen Code zu schreiben. Wir werden nicht beginnen, SVG direkt am Anfang anzuhängen. Wir beginnen mit Ellipsen und Rechtecken und dann schließlich gehen wir in das Anhängen von SVG. Wir sehen uns im nächsten Video. 17. Einführung: Malen auf dem Bildschirm: Im letzten Abschnitt sprachen wir über das Erstellen von Zeichnungen und das Vorbereiten dieser Zeichnungen. In diesem speziellen Abschnitt möchte ich über Malerei auf Bildschirm sprechen und wie malen wir Objekte auf Bildschirm. Ich komme aus Flash. Ich habe 10 Jahre in Flash gearbeitet, und es ist anders genug, dass wir einen Abschnitt damit verbringen sollten, darüber zu reden. Wie zeichnen wir tatsächlich Dinge auf den Bildschirm, weil es sehr anders ist als wie wir Dinge in der Flash-Umgebung auf den Bildschirm gezeichnet haben? Nicht nur das, aber die Verarbeitung hat einige Einschränkungen in Bezug auf die Art und Weise zeichnen wir Dinge auf den Bildschirm. Also, wieder, eine gute Zeit, um vorstellen, wie wir tatsächlich malen Dinge auf Bildschirm mit dem HYPE Framework. Tun Sachen wie HRectangle, Hellipse, HShape, HiMAGE. Machen Sie einige 3D-Sachen wie HBox und HSphere. Also, wir werden wirklich eintauchen, wie wir diese Dinge machen und wie malen wir sie dann tatsächlich auf den Bildschirm und was tatsächlich passiert, wenn Sie auf den Bildschirm malen. 18. Grundlagen/Linie und Rechteck: Bist du bereit zu rocken? Ja, ich bin bereit zu rocken. Wir sind in Abschnitt vier, Malerei auf den Bildschirm. Hier werden wir nur einige Grundlagen erarbeiten, wir werden ein wenig Code schreiben, und wir werden verstehen, wie die Verarbeitung funktioniert, warum wir mit einigen Aspekten frustriert sind und Höhe einführen. Also, lassen Sie uns einfach ein wenig grundlegenden Code für die Anfänger schreiben, um Ihnen den Einstieg zu erleichtern. Jetzt werde ich einen neuen Ordner erstellen. Lassen Sie uns diesen Ordner Basics nennen. Innerhalb von Basics werde ich einen neuen Ordner namens Schritt eins erstellen. Innerhalb von Schritt eins werde ich einen Ordner namens Build erstellen, und dann werde ich Sublime Text Zwei öffnen, ich werde dies ändern, sagen wir, Speichern, Desktop, Grundlagen, Schritt eins, Build, und nennen wir diese build.pde. Wenn ich das mache, sollte die untere rechte Seite zu Verarbeitung wechseln. Nun, um damit zu beginnen, werde ich uns fünf verschiedene Dateien schreiben lassen. Also, Sie werden hier bemerken, dass, nehmen wir einfach diesen Kerl und bemerken, dass wir Basics tun werden, Schritt eins, Build, build.pde. Build.pde ist, wo wir all unseren Code schreiben werden. Wir werden jetzt an fünf Akten arbeiten. Also, schau auf, was ich tun werde. Ich halte nur die Wahltaste oder die Alt-Taste gedrückt, und ich werde nur klicken und ziehen, es gibt Schritt zwei, Schritt drei, Schritt vier, Schritt fünf. Wir werden an fünf verschiedenen Akten arbeiten. Das Schöne daran ist, dass in jedem von ihnen Build und build.pde ist. Also, wir haben diese Basisstruktur passiert, was schön ist. In Ordnung. Also, lass mich das einfach in die rechte untere Ecke werfen. Lassen Sie uns voran gehen und schreiben Sie unsere erste Verarbeitungsdatei. Nun, das ist wie die Hello World Übung für jedes Verarbeitungsdokument. Was Sie tun werden, ist, Sie werden void setup eingeben, paren öffnen, paren schließen, und wir werden einfach nur eine Zeile machen. Also sagen wir, Linie, wir beginnen bei 25 auf der X-Achse, 25 auf der Y-Achse. Also, das ist der erste Punkt der Linie, und jetzt wollen wir den zweiten Punkt der Linie zeichnen, und der zweite Punkt der Linie ist 75 auf der x-Achse und 75 auf der y-Achse. Semikolon und wir sind fertig. Also, wenn ich dieses Dokument tatsächlich speichere und dann Befehl R zum Erstellen drücke, sollten Sie feststellen, dass Java beginnt, und sicher genug, gibt es unsere allererste Skizze. Also haben wir die ersten beiden Punkte angegeben, x und y, 25, 25 und den zweiten Punkt 75, 75, und weil wir die Linie angegeben haben, zog es nur eine Linie zwischen diesen beiden Punkten, die angegeben wurden. Ok. Also, gut. Wir haben unsere erste Skizze gemacht. Also, ich werde fortfahren und dieses Dokument schließen, und ich werde mit Schritt zwei fortfahren. Gehen Sie zu Schritt zwei und öffnen Sie build.pde. Lassen Sie uns einige Möglichkeiten finden, diesen Code ein wenig schneller zu schreiben. Also, innerhalb von Sublime Text Two können Sie S E T eingeben, und Sie werden feststellen, dass Setup hervorgehoben wird. Wenn ich also einfach die Eingabetaste drücke, spuckt es automatisch den ganzen Code aus, den wir gerade in unserer vorherigen Datei eingegeben haben. Nun, wenn Sie setup eingeben, es Ihnen zwei Funktionen, Setup und Draw. Das Setup wird einmal ausgeführt. Hier richten Sie alle Ihre Informationen ein, wie z. B. die Anzahl der Assets 100. Hier geben Sie alle Ihre vorbereitenden Dinge wie Variablen und so weiter an. Zeichnen ist Ihre Schleife, das ist, was läuft über, und immer und immer wieder. Also, wenn Sie eine Animation wollten, ist die Zeichenfunktion, wo Sie tatsächlich angeben würden, wie Dinge auf dem Bildschirm animiert werden sollen. Aber noch einmal, wir machen noch keine Animation. Also, wir gehen voran und löschen die Draw-Funktion. Jetzt möchte ich in dieser Übung ein Rechteck erstellen. Also, gehen Sie voran und geben Sie rect ein. Auch hier werden Sie feststellen, dass es automatisch gestartet wird. Also, ich werde voran gehen und drücken Sie die Return. Beachten Sie, dass die erste Variable hervorgehoben wird, sie möchte x, y, width und height wissen . Also, ich gehe voran und sage, beginne bei 25 auf der x-Achse, tab, 25 auf der y-Achse, tab, die Breite sollte 50, tab, und die Höhe sollte 50 sein. ' Nun, die Verwendung dieser Shortcut-Funktionalität Snippets innerhalb der Verarbeitung, bedeutet nur, dass wir Code viel einfacher schreiben können, anstatt Dinge immer und immer wieder schreiben zu müssen . Klicken Sie auf Speichern, Befehl R zu erstellen, und Sie sollten feststellen, dass Sie ein Rechteck in der Mitte des Bildschirms erhalten. Es hat einige Standardwerte. Es hat einen schwarzen Strich, es hat eine weiße Füllung, so weiter und so weiter. Ok. Nehmen wir uns jetzt die Zeit, um zum nächsten Video zu gehen wo wir beginnen, einige gewünschte Verbesserungen hinzuzufügen, und einige Frustrationen, die wir stoßen werden, wenn wir diese Verbesserungen hinzufügen, und vielleicht ein größeres Bild darüber, was tatsächlich ist , wenn Sie auf den Bildschirm malen. Wir sehen uns im nächsten Video. 19. Grundlagen/Drehung: Ok. Lassen Sie uns in diesem Video einige Verbesserungen zu unseren grundlegenden Skizzen hinzufügen, die wir erstellen, um ein besseres Verständnis davon zu erhalten, wie die Verarbeitung tatsächlich auf dem Bildschirm malt. Also in den Grundlagen, Schritt drei, Build, werde ich voran gehen und build.pde öffnen. Jetzt werde ich fortfahren und Setup eingeben. Ich werde die Draw-Funktion entfernen. Ich werde etwas Neues hinzufügen. Ich werde die Breite und Höhe meiner Skizze ändern. Also werde ich voran gehen und sagen: „Größe 600 Pixel mal 600 Pixel.“ Also, jetzt wäre meine Bühne 600 mal 600. Jetzt werde ich mein Rechteck angeben, aber dieses Mal werde ich sagen: „100 auf der x-Achse, 100 auf der y-Achse, mit einer Breite von 50 und einer Höhe von 50.“ Wenn ich nun Befehl R drücke und meine Datei erstelle, sollte ich meine Skizze von 600 mal 600 mit dem Rechteck an der gewünschten Position und der gewünschten Breite und der gewünschten Höhe sehen und der gewünschten Breite . Nun, an diesem Punkt entschied ich mich : „Nun, ich möchte dieses Rechteck drehen. Ich möchte dieses Rechteck um 45 Grad drehen.“ Also, ich war mir nicht ganz sicher, wie ich das machen soll. Ich war mir nicht ganz sicher, wie ich eigentlich mit dem Rechteck reden und es drehen sollte. Eigentlich tun Sie es nicht. Du redest eigentlich gar nicht mit dem Rechteck. Das Rechteck ist nicht einmal ein Objekt, mit dem Sie sprechen können. Also, wie führe ich dann eine Rotation durch? Nun, es endet, dass, was Sie tatsächlich tun werden, ist die gesamte Stufe der Skizze zu drehen. Also, wenn ich hierher kommen und drehen und 45 Grad angeben würde, und wenn Sie dies speichern und ausführen würden, würden Sie feststellen, dass Ihr Rechteck jetzt fehlt. Also, dann musste ich ein wenig mehr lesen, um herauszufinden, dass, um rotieren zu verwenden, und wenn Sie es um 45 Grad drehen wollten, Sie diese Zahl im Bogenmaß angeben mussten. Wenn ich also zurückgehen und sagen würde: „Drehen“, müssten Sie dann Bogenmaß nennen, und im Bogenmaß könnte man die Nummer 45 passieren. Wenn ich jetzt meinen Film speichere und baue, sehe ich, dass mein Platz ganz links ist. Warum passiert das? Also wieder, ich hatte eine schwierige Zeit verstehen, wie man bestimmte Sachen malt. Also musste ich ein paar Tests ausprobieren. Lassen Sie mich Ihnen die Tests zeigen, die ich am Ende durchführte, um eine bessere Vorstellung davon zu bekommen , wie die Verarbeitung tatsächlich auf den Bildschirm malt. Also, gehen wir zu Schritt vier. Schritt vier, bauen, build.pde, wieder werde ich voran gehen und setup eingeben. Ich werde die Zeichenfunktion entfernen, und innerhalb des Setups werde ich die Größe 600 mal 600 angeben, und ich werde voran gehen und sagen: „Radiant drehen, sagen wir 10.“ Also, jetzt drehe ich mich nur um 10 Grad. Nun, was ich tun will, ist, ein Rechteck zu sagen, aber dieses Mal werde ich die X-Achse ändern. Ich werde sagen 400, 100 mit einer Breite von 50 und einer Höhe von 50. Das Experiment, das ich durchführen wollte, war, was passiert, wenn ich fünf davon auf dem Bildschirm hätte? Also, da ich die eine habe, gehe ich voran und kopiere einfach diese beiden Zeilen, und ich werde einfügen, bis ich fünf habe. Also, jetzt habe ich fünf Instanzen dieser Rotation und Rechteck, und ich war nur neugierig zu sehen, was passieren würde. Also habe ich meinen Film gerettet, ich baue ihn, und ich bekomme das. Also begann ich, ein besseres Verständnis zu bekommen, dass das, was in dieser Datei passiert ist, wenn ich ein Blatt Papier nehme, ist, dass es die Bühne nahm, hier ist Null, Null, für euch, und es drehte sich um 10 Grad und dann das Quadrat . Dann drehte es sich wieder um 10 Grad und zeichnete das nächste Quadrat. Es hat das fünfmal gemacht. Also begann ich, ein besseres Verständnis zu bekommen, dass ich tatsächlich die Welt drehte , das Quadrat befestigte, die Welt drehte, das Quadrat befestigte, und ich fing an, diese Art von Form zu bekommen. Also, gehen wir zu einem anderen Test über. Wieder möchte ich eine bessere Vorstellung davon, was hier passiert. Nur zum Teufel, ja, wir werden den Code nochmal schreiben. Ich gehe voran und schließe das, ich werde zu Schritt fünf gehen, bauen, build.pde. Wieder werde ich voran gehen und Setup machen, ich werde die Draw-Funktion entfernen. Ich werde hier reinkommen, und ich werde meine Größe einrichten. Jetzt werde ich etwas anderes machen. Was ich anders machen möchte, ist, dass ich eine visuelle Darstellung der Bühne möchte. Also, was würde passieren, wenn ich Rechteck tippte und dann sagte ich, dass die X-Achse Null war, die Y-Achse Null war und dann die Breite 600 und die Höhe 600 war? Also, die Breite und Höhe waren genau die gleiche Größe wie die Bühnengröße. Ich möchte nur den Film testen und sehen, was passiert. Also, ich teste es und visuell scheint es, als wäre das der Strich auf meinen Rechtecken. Also ja, ich denke, es funktioniert. Ich denke, ich habe ein Rechteck, das im Grunde die Größe meiner Bühne ist. Also, was wäre, wenn ich das fünf Mal kopieren würde? Zwei, drei, vier, fünf. Nun, das nächste, was ich tun möchte, ist, dass ich sagen möchte, dass es keine Füllung gibt. Ich möchte nur das Rechteck ohne Füllung betrachten, nur einen Strich. Also werde ich voran gehen und sagen: „No Fill“. Dann werde ich das kopieren, zwei, drei, vier, fünf. Was ich dann tun möchte, ist, dass ich diese Rotation betrachten möchte. Also werde ich voran gehen und sagen: „Radiant drehen“. Aber dieses Mal werde ich sagen: „10“. Dann werde ich kopieren, so dass ich es vor allen fünf meiner Rechtecke habe. Wenn ich jetzt den Film speichere und aufbaue, bekommst du eine visuelle Darstellung dessen, was passiert, das heißt, ich drehe die gesamte Bühne um 10 Grad, denn wieder, Null, Null ist immer noch der gleiche genaue Punkt, mein Rechteck ist 600 mal 600, und ich kann sehen, dass das, was ich tue, ist, die ganze Welt zu drehen, dieses Rechteck anzubringen, 10 Grad zu drehen, so weiter und so weiter. Wenn ich also diesen kleineren quadratischen Rücken hinzufügen würde, könnte ich so etwas sagen, könnte ich sagen: „Füllen ist weiß“, und das Rechteck, das wir ursprünglich hatten, war auf einer x-Achse von 400, einer y-Achse von 100 mit einer Breite von 50 und einer Höhe von 50. Wenn ich nun diese Füllung kopiert und erneut vier weitere Male eingefügt und dann meinen Film gespeichert und erstellt, können Sie jetzt das ursprüngliche Rechteck sehen, das ist die Größe der Breite und Höhe rotieren, aber Jetzt bekomme ich ein Verständnis von allem. So erzeugt es diese Kurve. Lassen Sie uns zum nächsten Video übergehen und beginnen, einige dieser Ärgernisse zu beheben , indem wir Push-Matrix und Pop-Matrix lernen und verstehen, wie man die Bühne zurücksetzt, nachdem wir etwas angehängt haben, damit wir wirklich wieder zu vielleicht Reihe von Rechtecken, und diese Rechtecke sind um 45 Grad gedreht. Also, ich möchte das in Ordnung bringen. Ich möchte diese fünf nehmen und sie in einer Reihe setzen und sie um 45 Grad drehen lassen. Also, wir sehen uns im nächsten Video. 20. Grundlagen/Matrix/Push and Pop: Also, lassen Sie uns einige dieser Probleme in den grundlegenden Schritten mit dem Lernen von PushMatrix und PopMatrix beheben. Also werde ich voran gehen und einen neuen Ordner namens Matrix erstellen, und innerhalb der Matrix werde ich voran gehen und eine Datei namens Schritt eins erstellen. Nun, in diesem Fall werden wir auch fünf Dateien machen, aber ich möchte diese eine Datei mutieren, während ich mich weitermache. Also, gerade jetzt werden wir nur an Schritt eins arbeiten und dann kopieren und Änderungen vornehmen, während wir gehen. Jetzt, in einem Schritt eins, werde ich einen Ordner namens Build erstellen. Ich werde voran gehen und ein leeres Dokument in Sublime Text 2 starten, und ich werde dies auf meiner Desktop-Matrix speichern Schritt eins Build und wir werden nur diese build.pde nennen. Lassen Sie uns fortfahren und beginnen, den gleichen Code zu schreiben, den wir zuvor getan haben, aber nehmen Sie einige Änderungen vor. Also, ich gehe voran und tippe Setup, ich gehe voran und entferne die Auslosung. Ich werde voran gehen und Größen 600 mal 600 angeben. Und was ist PushMatrix, PopMatrix? Also, wenn Sie sich in der vorherigen erinnern, wenn Sie fünf Quadrate anbringen, drehte es die Welt, indem Sie das Quadrat anbringen und die Welt wieder drehen, indem Sie das Quadrat anbringen. Was PushMatrix und PopMatrix tun, ist, dass es sagt, schau dir an, was auf dem Bildschirm passiert, mach ein paar Sachen, und wenn du fertig bist, dieses Zeug zu tun, lege es zurück, als wäre es noch nie zuvor gemacht worden. Zurücksetzen. Ok? Also, das ist, was PushMatrix und PopMatrix tun. Also schau auf, was hier passieren wird. Ich werde voran gehen und PushMatrix sagen. Gib mir ein paar harte Renditen und tippe PopMatrix, okay? Nun, da PushMatrix und PopMatrix sich daran erinnern, was los ist, veröffentlichen Sie, was los ist, wieder so, wie es war. Ich mag es, eine andere Registerkarte in die PushMatrix und PopMatrix zu setzen, so dass ich sehen kann , dass alles zwischen diesen beiden in diesem Moment passiert und dann zurückgesetzt wird. Also, lassen Sie uns voran und setzen unsere Drehung, gehen wir voran und setzen in unser Bogenmaß von 45 Grad, und lassen Sie uns voran gehen und unser Rechteck zeichnen. Setzen wir das auf eine X-Achse von 100, eine Y-Achse von 100 und eine Breite von 50 und eine Höhe von 50, okay? Wenn ich nun den Befehl R drücke und diese Datei erstelle, sollte ich zurück zu diesem seltsamen Szenario sein, in dem mein Rechteck den ganzen Weg zur linken Seite liegt. Wenn ich diese vier Codezeilen kopieren und vier weitere Male einfügen würde. Zwei, drei, vier, fünf. Ich habe jetzt fünf Instanzen von PushMatrix PopMatrix drehen und Rechteck, aber lassen Sie uns die X-Achse für jede von ihnen ändern. Also, lassen Sie uns sagen, dass dieses besondere Rechteck in einer X-Achse von 200 sein wird, das nächste 300 sein wird, das nächste wird 400 sein, und das letzte wird 500 sein. Wenn ich diesen Film ausprobiere, werden Sie feststellen, dass er das jetzt in der Reihe macht. Okay. PushMatrix und PopMatrix setzen die Rotation zurück auf Null, Null. Entschuldigung, setzen Sie die Rotation zurück auf Null. Also, wir drehen es 45 Grad, wir fügen das Rechteck an, PopMatrix setzt es wieder auf Null zurück und dann beginnt der Prozess von vorne, wo er 45 Grad dreht, zeichnet das neue Rechteck, aber das Zeit bei einem X von 200. Dann setzt PopMatrix die Rotation wieder auf Null, startet den Prozess von vorne. Also, wieder war ich verwirrt, warum es diese Art von Muster machte. Also, an diesem Punkt lasst uns etwas Neues lernen. Lassen Sie uns voran gehen und speichern und schließen Sie dies, und ich werde diesen Schritt 1, halten Sie die Option Alt-Taste gedrückt, ziehen Sie Schritt zwei zu erstellen und tatsächlich öffnen Sie diese Datei wieder, richtig? Also, jetzt werden wir eine Erweiterung an dieser Datei machen. Es endet, dass, wenn Sie nur sagen, dass das Rechteck bei einem X von Null und einem Y von Null ist und das tatsächlich für alle von ihnen tun, denn was wir tun wollen, ist etwas Neues namens translate hinzuzufügen. Was übersetzt, ist, wenn Drehen die Leinwand dreht, übersetzen bewegt die Leinwand. Es bewegt die Bühnenfläche auf einer X-Achse und einer Y-Achse. Also, wenn ich zu dieser PushMatrix kommen würde, könnte ich sagen übersetzen und ich werde nur 2D-Koordinaten einfügen. Ich werde sagen, übersetzen auf 100, 100. Also, übersetzen Sie auf eine X-Achse von 100 Pixeln über 100 Pixel drehen Sie die Bühne, dann zeichnen Sie das Quadrat. PopMatrix setzt zurück auf Null, Null , Sätze drehen sich zurück auf Null und startet den gesamten Prozess erneut. Also, lassen Sie uns voran und kopieren Sie unsere Übersetzung in jede der Push- und Pop-Matrizen, aber zu dieser Zeit werde ich sagen, übersetzen Sie zu 200, übersetzen Sie 300, übersetzen Sie zu 400, und übersetzen Sie 500. Verlag Film und oh, mein Gott, wir kommen irgendwo hin. Also, was passiert ist, ist, dass es sagt, das ist Null, Null, okay. Verschieben Sie 100 Pixel 100 Pixel, aber das ist immer noch Null, Null, okay. Drehen Sie 45 Grad, befestigen Sie das Quadrat. PopMatrix, setzen Sie es direkt an den Ort zurück, an dem es begonnen hat. Aber der neue sagt, gehen Sie über 200, 100 runter, drehen Sie so weiter und so weiter. Also, jetzt fangen wir an zu bekommen, was ich visuell anfangen wollte, das war eine Reihe von Rechtecken, die um 45 Grad gedreht wurden. Okay, das ist cool, aber ich möchte eigentlich, dass diese kleinen Diamantformen in der Mitte der Bühne erscheinen, also sollte die Y-Achse in der Mitte sein. Also werde ich voran gehen und das schließen, und wieder werde ich die Optionstaste gedrückt halten. Ich gehe voran und ziehe dies, um einen Schritt drei zu erstellen und lass uns fortfahren und diese build.pde erneut öffnen. Okay. In Ordnung. So cool. Ich möchte, dass die Übersetzung auf der Höhe des Films durch zwei geteilt ist. Das hört sich großartig an. Also, lassen Sie uns fortfahren, kopieren Sie das und fügen Sie es für jede der Übersetzungen ein. Geh weiter und lass deinen Film laufen. Das sieht total nicht aus wie die Mitte des Bildschirms. Sieht aus, als wäre es abscheulich. Nun, lassen Sie uns bestätigen, dass es abscheulich ist. Lass uns voran gehen und sagen, dass wir eine Linie machen wollen. Okay. Lassen Sie uns voran gehen und sagen, dass die erste der Linie auf Null auf dem X sein sollte, und es sollte in der Höhe durch zwei geteilt sein, so dass es auf der linken Seite Mitte der Bühne gelegt wird. Lassen Sie uns voran und sagen, dass die Breite der Linie Breite sein sollte, und ihre nächste Position sollte Höhe geteilt durch zwei sein. Okay. Also, dass ich eine Linie in der gesamten Mitte des Bildschirms zeichnen sollte. Also, ich werde meinen Film testen, und ich merke, oh, ja natürlich. Wenn Sie das Rechteck zeichnen, ist das Rechteck Null, Null. Also, wenn es sich so dreht. Richtig. Es hängt von diesem Null-Drehpunkt ab. In der Tat, wenn ich hier einige Ellipsen hinzufügen würde, lassen Sie mich einfach Ellipse sagen. Oh, du kannst Josh tippen. Probieren Sie das aus. Nehmen wir , dass die Ellipse die gleiche sein wird wie die Übersetzer. Also, für die erste Ellipse sagen wir 100 Höhe geteilt durch zwei, und ich möchte, dass die Größe der Ellipse fünf mal fünf ist. Okay. Wenn ich also 2,3,4,5 kopieren würde, ist die nächste Übersetzung bei 200, 300, 400, 500. Testen Sie den Film, testen Sie die Skizze. Ich komme von Flash Mann. Testen Sie den Film, testen Sie die Skizze. Also, ich zeichne diesen kleinen Kreis, um darzustellen, wo Null, Null auf meinem Rechteck ist. Ok? Also, jetzt bin ich in einem kleinen Dilemma. In der Tat, wenn ich das wirklich tun würde, oder? Wenn ich sagte: „Hey, ich rotiere 45 Grad geteilt durch fünf Rechtecke, würden Sie sehen, dass 45 geteilt durch fünf neun sind. Also, wenn ich tatsächlich den Radius in neun mal eins, neun mal zwei, neun mal drei, neun mal vier und neun mal fünf. Wenn ich meinen Film lief, kann ich ihn tatsächlich um 45 Grad drehen sehen. Ich konnte diesen Drehpunkt sehen. Ich bekomme eine Darstellung, wie es von Null, Null des Rechtecks schwenkt , richtig? Also, okay. Oh mein Gott! Ich muss versuchen, das herauszufinden. Also, lassen Sie uns fortfahren, speichern und schließen Sie diesen Film. Ich werde die Option ziehen Schritt drei auf Schritt vier. Ich werde die build.pde erneut öffnen. Also, ich musste gerne denken wie, okay, wie zentriere ich das Rechteck? Auch hier bin ich nichts über die Verarbeitung zu wissen. Ich hatte nicht die ganze Dokumentation durchgraben. Ich kannte nicht alle Tricks. Ich habe versucht, das allein herauszufinden, okay? Also, cool. Lassen Sie uns das Bogenmaß in diesem Beispiel auf 45 setzen. Okay. Was ich herausfinden musste, ist, wenn ich ein Rechteck drehe, das 50 mal 50 ist, ist das nicht die Größe des Rechtecks. In der Tat, wenn Sie ein Rechteck nehmen und es um 45 Grad drehen, ist dieses Rechteck jetzt 70,711 für eine Breite und 70,711 für eine Höhe. Es ist nicht mehr 50 mal 50. Also, ich dachte, okay, ich nehme die Höhe geteilt durch zwei, und dann muss ich subtrahieren, richtig? Dann habe ich das in Klammern gesetzt. Ich wollte sagen: „Oh, 70.711 geteilt durch zwei. Das wäre die Mitte der Breite und die Mitte der Höhe.“ Also, wenn ich das tatsächlich kopiere. Das ist schmerzhaft. Das ist schmerzhaft, dass du diesen Code mit mir schreibst, denn das ist lächerlich. Also, wenn ich dann diese Skizze speichern und testen würde. Ich war wie, ja. Ich habe das jetzt tun, was ich brauche, das heißt, ich wollte diese Rechtecke nehmen, sie um 45 Grad drehen, damit sie zu Diamanten werden. Aber dann wollte ich sie zentrieren, und so machst du es. Ich muss Ihnen sagen, ich fing an zu denken, dass die Verarbeitung verrückt war, dass ich eine wirklich schwierige Zeit als bildender Künstler haben würde, nur darüber nachzudenken, wie ich Dinge auf dem Bildschirm machen würde. Speichern und schließen Sie diesen Film. Speichern Sie es als Schritt fünf. Dies ist das letzte, was wir tun werden, weil ich dann einige der Dokumentation herumgraben und erkannte, dass dies nur verrückt war. Ich musste das überhaupt nicht machen. Wenn ich das alles wirklich loswerde, musste ich nur eine Codezeile schreiben, um den RectMode anzugeben. Also, wenn ich hier nach oben komme und sagen, RectMode, könnten Sie dann CENTER in allen Kappen übergeben. Also, was das bedeutete, war, dass, was auch immer ein Rechteck, das Sie machen, der Ankerpunkt tatsächlich in der Mitte der angegebenen Breite und Höhe befindet. Also, wenn Sie diese Skizze speichern und testen, würden Sie feststellen, dass Sie genau das gleiche bekommen. Okay. In der nächsten Serie möchte ich darüber sprechen, wie kann ich dieses Zeug drehen? Also, cool. Ich habe dieses Kunstwerk in der Mitte des Bildschirms angebracht, wo ich will, dass es hingehen. Aber was, wenn ich etwas Animation anwenden wollte? Nun, der Grund, warum ich die Animation als Beispiel zeige, ist, weil wir schließlich Hype eingeführt werden. Wir werden uns vorstellen, wie all diese Art von Ärgernissen für mich vereinfacht werden könnten, indem das Hype Framework verwendet wird. Okay. Wir sehen uns im nächsten Video. 21. Grundlagen/Drehung und Farbe: So wie ich es sehe, bevor wir tatsächlich über Hype reden, gibt es zwei zusätzliche Dateien, die wir erstellen müssen, damit Sie sehen können welche Szenarien in einem nicht überprüften Szenario passieren. Also, die erste ist die Anwendung von Rotation. Also, ich werde voran gehen und einen neuen Ordner erstellen und ich werde diesen Ordner „Rotation“ nennen, und innerhalb dieses Ordners, Rotation, werde ich nur Schritt fünf aus der Matrix kopieren. Also werde ich Schritt fünf machen und es einfach in die Rotation von Matrix und in die Rotation kopieren . Nun, lassen Sie mich das einfach in Schritt eins ändern und ich kann voran gehen und den Matrix-Ordner schließen und ich kann voran gehen und diese build.pde öffnen. Wenn ich nun diese Skizze hier ausführe, möchte ich eine gewisse Rotation dieser Quadrate haben, so dass Sie wieder sehen können, wie die Verarbeitung bestimmte Aspekte der Malerei auf dem Bildschirm behandelt. Also, lasst uns voran gehen und etwas anderes sagen , von dem ich früher gesprochen habe, dass ein Setup einmal funktional läuft. Es ist eine Draw-Funktion, die mehrmals ausgeführt wird, und daher möchte ich tatsächlich einige dieser Sachen in eine Draw-Funktion verschieben. Also, wenn ich hierher komme und void draw, open paren, close paren, und was ich kopieren werde, ist alles von der Ellipse, der Linie und der PushMatrix und PopMatrix. Also gehe ich voran und schneide das, und jetzt wirst du sehen, dass das einzige, was im Setup ist, die Größe und den RectMode einzustellen. Jetzt innerhalb der Zeichnung, die eine Schleife ist, läuft sie immer und immer wieder, ich werde tatsächlich diese PushMatrix, PopMatrix, die Erstellung der Linie und die Erstellung dieser Ellipsen einfügen die Erstellung der Linie . Wenn ich nun die Skizze erstellen würde, merkt man, dass sie vielleicht nicht viel anders aussieht, weil hier wieder keine Animation stattfindet. In Ordnung. Also, ich habe fünf Vermögenswerte. Also, ich werde tatsächlich fünf Variablen erstellen. Ich werde sagen, Integer r1 für Rotation eins gleich Null ist, und ich werde voran gehen und diese zwei, drei, vier, fünf kopieren und dies in zwei, drei, vier und fünf ändern . Nun, was ich tun werde, ist, anstatt Radiant 45 zu drehen, werde ich dies tatsächlich in die Variable ändern, die ich oben eingerichtet habe. Also, ich werde sagen, Bogenmaß plus r1. Also, das bedeutet, fügen Sie eins auf den Wert von r1. Also wird Null eins, eins wird zwei, zwei wird drei, drei zu vier, und im Grunde ist es ein Zähler, das Ding zählt jetzt immer. Also, wenn ich das kopieren und dieses Plus r2, plus r3, plus r4 und plusplus r5 machen plus r3, plus r4 und plus würde. Jetzt die Rotation, alle fünf von ihnen haben fünf verschiedene Zahlen, die 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Also, wenn ich die Skizze teste, solltest du bemerken, dass sie sich dreht, aber was passiert ist, ist, dass du den Bildschirm nicht löschst. Also malte ich eigentlich nur die Rotation und so wie sich das Quadrat bewegt, hinterlässt es einen Rückstand des Kunstwerks in seiner vorherigen Position. Also, um den Bildschirm in der Draw-Funktion zu löschen, werde ich nur sagen, Hintergrund ist CCCCCC. Also, was passiert, ist, jedes Mal, wenn die Zeichenfunktion ausgeführt wird, löscht sie den Hintergrund und zeichnet dann das Quadrat, löscht den Hintergrund, zeichnet die Quadrate, löscht den Hintergrund, zeichnet die Quadrate. Nun, wenn ich diese Skizze tatsächlich teste, sollten Sie bemerken, dass es scheint , dass jedes der Quadrate von selbst rotiert. Also, wir haben den Inhalt aus dem Setup verschoben, wir haben ihn in die Auslosung gesetzt. Wir erkennen, dass, wenn Sie nicht Hintergrund in Zeile 13 aufrufen, es einen Rückstand des Artworks hinterlassen wird, weil Sie den Hintergrund nicht wirklich löschen. Also nochmal, das sind Dinge, an die wir denken müssen, während wir weitergehen. Nun, es gibt eine Art letzte Double-Whammy hier. Ich gehe weiter und speichere das, und ich werde diese ganze Rotationsdatei in Farbe kopieren. Also kopiere ich es einfach und ich werde es in Farbe umbenennen und ich werde voran gehen und die Build-PDE öffnen. Jetzt ist dies die gleiche exakte Datei wie die Rotation, aber ich möchte eine zufällige Farbe festlegen. Also, ich habe diese Quadrate und ich wollte nur eine zufällige Füllfarbe haben. Also, innerhalb der PushMatrix und der PopMatrix von jedem der fünf, werde ich das tatsächlich einfügen, und das setzt die Füllfarbe. Nun ist die Füllung RGB; rot, grün, blau. Also sage ich, wähle eine zufällige 255 Zahl für das Rot, eine zufällige 255 Zahl für das Grün und eine zufällige 255 Zahl für das Blau, also sollte mir eine zufällige RGB-Werte geben, das ist RGB ist eine Zahl von 0-255. Wenn ich das in jede der PushMatrix und PopMatrices kopieren würde, würden Sie den letzten und letzten Strohhalm für mich persönlich sehen, wenn ich diese Skizze teste. Anstatt mir zu denken, dass es nur eine Farbe setzen würde, was passiert, ist, weil die Zeichenfunktion immer und immer wieder läuft, geht es davon aus, dass Sie jedes Mal eine zufällige Füllung auswählen möchten. Also wow, das war nur ein großer Unterschied für mich der aus der Flash-Umgebung kam, weil man diese Art von Sache in der Flash-Umgebung machen konnte und tatsächlich würde die Füllfarbe nur einmal eingestellt werden. Auch hier verstehe ich, dass dies völlig andere Sprachen sind, aber für mich war dies der letzte Strohhalm. Ich musste wirklich darüber nachdenken, wie könnte ich eine Bibliothek bauen , um zu helfen, einige dieser Dinge zu tun, die meiner Meinung nach kompliziert sind. So können Sie zum Beispiel eine zufällige Farbe innerhalb des Setups auswählen und dann wird die Ziehung nur auf die zufällige Farbe zugreifen , die Sie bereits ausgewählt haben. Also, gehen wir zum nächsten Video über, wo wir tatsächlich anfangen, einige Hype Code zu betrachten und zu verstehen, wie wir die gleichen genauen Ideen, die gleiche genaue Animation nehmen können , aber wir werden sehen, wie es tatsächlich viel einfacher ist, Hype zu verwenden. Wir sehen uns im nächsten Video. 22. HYPE/Grundlagen: Ok. Beginnen wir also mit einer HYPE-Datei. Also, alles, was wir gerade abgedeckt haben, wurde aus deinem Verstand geräumt. Cool. Lassen Sie uns voran und starten Sie ein neues Dokument, einen neuen Ordner, und ich werde dieses HYPE_basics aufrufen. Innerhalb von HYPE_basics werde ich einen Ordner namens Schritt 1 erstellen, ich werde einen Ordner namens build erstellen. Nun können Sie diesen HYPE-Verarbeitungsordner öffnen, den wir von Staging heruntergeladen haben, da hier Hype.pde ist, wiederum die gesamte HYPE-Bibliothek enthält. Also, ich werde Option ziehen und kopieren Sie das in Build. Also, jetzt kann ich das schließen. Also, ich habe HYPE_Basics, Schritt eins, Build und HYPE pde. Also, ich werde voran gehen und eine neue Datei namens build.pde auf dem Desktop erstellen, in HYPE_basics, Schritt eins, bauen, genau dort mit meiner HYPE PDE-Datei. Ok. Lassen Sie uns also ein paar Dinge verstehen, die ein wenig anders sind als in der Verarbeitung. Also, lassen Sie uns weitermachen und unsere visuellen Rechtecke wie in der letzten Datei konstruieren. Jetzt werde ich voran gehen und sagen void setup (). Ich werde noch keine Abkürzung machen, nur weil ich Ihnen einige Unterschiede zeigen werde. Das erste, was ich angeben werde, ist die Größe, 600 mal 600, und ich werde zur nächsten Zeile übergehen. Um nun eine externe Bibliothek zu verwenden, muss ich die HYPE-Bibliothek initialisieren. Also muss ich Processing mitteilen, dass HYPE existiert. Ich werde das tun, indem ich H.init (dies) sage. Wenn Sie nun andere Bibliotheken in der Vergangenheit heruntergeladen haben, sind Sie wahrscheinlich sehr vertraut mit dem Brennen des Konstruktors einer Bibliothek. Also, im Moment, in dieser Zeile vier, sage ich Processing, sich bewusst zu sein, dass die HYPE-Bibliothek tatsächlich existiert. Also H.init (dies). Anstatt Processing die Zeichnung zu machen, werde ich HYPE die Zeichnung machen lassen. Also, was auch immer ich von hier an tippe, ich werde sagen, HYPE. Ganz am Ende muss ich HYPE sagen, dass er den Bildschirm malen soll. Also, ich werde das tun, mir ein paar harte Renditen geben, indem ich H.DrawStage sage. Es ist diese Linie, die tatsächlich all das Zeug, das wir in HYPE geschoben haben, nehmen wird und tatsächlich in der Lage sein, es auf den Bildschirm zu malen. H.DrawStage wird also immer in der Regel eines der letzten Dinge sein, die ich tue. Gehen wir jetzt weiter und machen unser erstes Rechteck. Also, oben hier oben, werde ich eine Instanz von hRect erstellen, und es ist ein großes R, hRect, ich werde d1 sagen, d ist für drawable. So gibt es viele Drawables innerhalb von HYPE. Da ist HRectangle, es gibt Hellipse, es gibt HBox, da ist HSphere. Das sind alles Drawables von HYPE. Also, ich werde sagen hRect d1, das d ist für Drawable. Jetzt, innerhalb des Setups, werde ich sagen, d1 ist gleich einem neuen hRect. Also, anstatt Rect anzurufen, rufen wir hRect an. Jetzt kann ich anfangen, eine Methodenverkettung zu machen. Ich kann sagen, hey, d1, ich will, dass deine Größe 50 ist. Ich will, dass deine Rotation 45 ist. Ich möchte, dass Ihre Ankerposition in der Mitte ist, so dass, wenn sie sich dreht, dies der Rect-Modus ist, so dass er sich um den Mittelpunkt dreht. Ich tue das, indem ich AnchorAt sage. AnchoRat hat eine Reihe von Dingen, die wir passieren können. Ich werde sagen, H.CENTER, genau wie es Rect Modus-Center war, ich sage Anker bei H.CENTER. Nun, wo will ich das erste Quadrat hinstellen? Das ist der Ort und unter dem Ort, werde ich sagen, 100 auf der x-Achse und Höhe geteilt durch zwei. In Ordnung. Wenn ich das jetzt speichern und testen würde, würden Sie feststellen, dass wir nichts sehen. Also, wo ist mein Rechteck? Also, Sie vermissen eine letzte Zeile, die dieses Drawable zu HYPE hinzufügt. Also, ich werde sagen, H.füge diesen D1 Kerl hinzu. Also, Sie fügen jetzt dieses Drawable zu HYPE hinzu. Also, wenn wir zu Zeile 12 kommen und es h.DrawStage steht, wurde dieses Drawable hinzugefügt und es kann es tatsächlich auf den Bildschirm malen. also diese Linie hinzufüge, Wenn ichalso diese Linie hinzufüge,sollten Sie feststellen, dass sich das Rechteck genau dort in der Mitte befindet. Nun, lassen Sie uns ein paar Sachen hier hinzufügen. Nach h.drawStage werde ich die Zeilen- und Ellipseninformationen aus den vorherigen Dateien kopieren und einfügen , an denen wir gearbeitet haben. Zeichnen Sie die Linie über die Mitte und setzen Sie dann diese fünf Ellipsen ein. Wenn ich diese Datei ausführen würde, würden Sie feststellen, dass sie tatsächlich in der Mitte des Bildschirms liegt. Also, Größe, setzen Sie es auf 50 mal 50. Rotation, ich musste nicht sagen, ich könnte einfach sagen, ich will es um 45 Grad drehen. Anker, ich gebe an, wo der Registrierungspunkt ist. In diesem Fall sage ich Anker im H.CENTER. Lage, Ich sagte gerade 100 Pixel auf dem x und Höhe geteilt durch zwei. Nun, wenn ich das nehmen und das noch fünf Mal kopieren würde, zwei, drei, vier, fünf, jetzt, natürlich müsste ich das in d2, d3, d4, d5 ändern. Also, oben oben hier, werde ich sagen hRect d1. Es wird auch ein d2, ein d3, ein d4 und ein d5 geben . Also, ich kann sie alle in einer Zeile auflisten. Jetzt kann ich anfangen, die Änderungen hier vorzunehmen. Ich kann d2, d2 sagen, d2, d3, d3 hinzufügen, d3, d4, d4 hinzufügen, d4 und d5, d5 hinzufügen und d5 hinzufügen und d5 hinzufügen. Das einzige andere, was ich ändern musste, ist der Ort. Dieser war bei 200, dieser war bei 300, dieser war bei 400 und dieser war bei 500. In Ordnung. Ich werde meine Skizze ausführen und Sie sollten bemerken , dass es genau wie die vorherige ist. Also, cool. Wir fangen an, ein wenig über HYPE zu lernen. Wir initialisieren das HYPE-Framework. Wir verwenden HYPE Drawables, in diesem Fall hRect. Wir fügen diese Drawables in das HYPE-Universum ein. Dann, in Zeile 27, fordern wir das HYPE-Universum auf, alles zu nehmen, was es weiß, dass wir hineingedrungen haben, wir hinzugefügt haben, und es tatsächlich auf die Bühne zu malen. Also, wenn ich das speichern und schließen und dann einen Schritt zwei machen und den Code hier öffnen sollte, schau dir an, was ich hier tun werde. Ich habe eine Klasse namens HRotate. Also, denken Sie daran, vorher mussten wir eine void Draw erstellen und wir mussten den gesamten Code in die Ziehung kopieren. Nun, ich werde hier eine kleine Abkürzung nehmen, und ich werde sagen, hey, HRotate, wieder, es ist ein großes R. Lassen Sie uns das r1 für rotieren eins nennen, gleich neuer HRotate, und wen möchte ich drehen? Wer ist das Ziel? Nun, in diesem Fall ist das Ziel d1, das ist unser hRect, d1. Welche Art von Geschwindigkeit willst du haben? Gehen Sie voran und machen Sie einfach eine Geschwindigkeit von eins. Nun, an diesem Punkt, wenn ich die Skizze testen sollte, werden Sie feststellen, dass nichts gedreht wird. Der Grund, warum sich nichts dreht, ist, dass dies wiederum alles im Setup ist. Also, wenn ich hierher kommen und sagen würde, void draw, öffnen paren, schließen paren, und einfach die Ellipsen, die Linie und die H.DrawStage kopiert , das ist alles, was ich kopieren muss, und fügen Sie das in die Auslosung. Also, was passiert ist, ist, dass innerhalb des Zeichnen die Schleife es H.DrawStage immer und immer wieder abfeuert. Also, es zeichnet wirklich das Universum des Hype immer und immer wieder. Wenn ich also die Skizze teste, sollten Sie feststellen, dass sich das erste Quadrat tatsächlich dreht und es um eine Geschwindigkeit von eins dreht. Nun, wenn ich das kopiert und eingefügt, eingefügt, eingefügt, eingefügt und eingefügt, und es eingefügt, und lasst uns dies in r2, r3, r4 und r5 ändern und ändern, wer die Ziele sind, d2, d3, d4 und d5. Wenn ich die Skizze teste, solltest du bemerken, dass wir wieder da sind, wo wir angefangen haben. Jetzt merkt euch ein paar Sachen. In der Ziehung mussten Sie sich nicht an den Hintergrund erinnern. Es tut tatsächlich, dass automatisch standardmäßig erstellt. Wir werden ein wenig später lernen, wie man den Code wieder hinzufügt, damit er den Hintergrund nicht löscht. Also, es nur zeichnen Bühne löscht automatisch den Hintergrund, es sei denn, Sie geben etwas anderes an. Wenn ich nun sagen würde, dass die Geschwindigkeit negativ war, würde das natürlich in die andere Richtung gehen. Jetzt geht der erste gegen den Uhrzeigersinn und die nächsten vier gehen im Uhrzeigersinn. Ich musste keine Variablen für die Geschwindigkeit erstellen, ich musste nicht plus sagen, plus die Variable, um jede Drehung zu zählen, wird nur die Rotation für uns verarbeiten. Nun, großartig. Das heißt, dieser hier könnte ich sagen, er hat eine Geschwindigkeit von 1,5. Das könnte ich sagen, es hat eine Geschwindigkeit von zwei. Dieser, den ich sagen könnte, hat eine Geschwindigkeit von 2,5, und dieser hat eine Geschwindigkeit von drei. Auch wenn ich die Skizze testen würde, würden Sie feststellen, dass alle Drehzahldrehungen unterschiedlich sind. Ich werde das retten. Ich werde es schließen. Ich werde dann zu einem Schritt drei kopieren und das erstellte PDE erneut öffnen. Nun, das ist super wichtig. Ich kann dir nicht sagen, wie sehr ich das liebe. In einem Blitz konnten Sie ein Kunstwerk erstellen, und Sie hatten diesen Registrierungspunkt, und wo Sie den Registrierungspunkt verschoben haben, war super wichtig, denn wenn der Registrierungspunkt hier war und Sie es in einer Rotation getan haben, es würde sich auf diese Weise drehen, und wenn Sie es in der Mitte hätten, dann würde es sich auf diese Weise drehen. Also, Sie haben vielleicht bemerkt, dass Sie innerhalb der Verarbeitung standardmäßig entweder 00 tun, oder Sie machen den rect-Modus des Zentrums. Sie können keine Art von wie schiefe Rotationen machen, oder vielleicht ist der Punkt hier oben, und das wie schwingt herum. Sie können das nicht schnell machen, Sie müssen tatsächlich eine Reihe von Code schreiben , um zu unterstützen, wie man diese Art von Rotationen macht. Also an diesem Punkt möchte ich über Anker sprechen. Also hier Anker hat immer eine Konstante, wie h.center, h.up, h.links. Wenn ich es nur anker ändere, kann ich tatsächlich jedes X und Y angeben, das ich möchte. Also, ich werde nur meine H.Centers hier loswerden, und mal sehen, welche Art von Spaß wir mit Anker haben können. Nehmen wir an, der erste Anker ist fünf auf der X-Achse, fünf auf der Y-Achse. Nehmen wir an, der nächste ist 10 auf der X-Achse, 10 auf der Y-Achse. Nehmen wir an, das nächste ist 15 auf dem X, 15 auf dem Y Vier, ich werde eigentlich 25, 25, und der Grund, warum ich es 25, 25 machen werde, ist, weil die Größe 50. Also, Anker 25, 25 ist das gleiche wie Anker in H.Mitte. Wenn man die Breite durch zwei teilt, teilt sich die Höhe durch zwei, 50 dividiert durch zwei, 50 durch zwei, 25, 25. Der letzte kleine Drawable, ich möchte etwas Ungewöhnliches tun oder ich möchte sagen, okay, cool, hier ist das Kunstwerk. Ich möchte, auf der X-Achse zur Mitte kommen, also wäre die Mitte 25, und auf der Y-Achse möchte ich, dass es negativ 25 ist. Also stellt es den Punkt hier oben. Also, ich werde sagen, negativ 25. Speichern Sie und testen Sie diese Skizze, und Sie sollten feststellen, dass wir jetzt alle möglichen fantastischen Rotationen bekommen. Nur automatisch magisch, ohne zusätzlichen Code schreiben zu müssen, können Sie Anker verwenden, um genau wie die alten Flash-Tage anzugeben , an denen sich der Registrierungspunkt befindet und wo dieser Registrierungspunkt auswirkt die X- und Y-Position, an der Dinge befestigt werden, und offensichtlich die Rotation. Nun, die letzte Sache, die ich tun möchte, machen Sie weiter und schließen Sie das, und ich werde das als Schritt vier speichern. Dies ist das letzte, das wir in dieser speziellen Serie machen werden, und das ist ich möchte Farbe hinzufügen. Also, wenn Sie sich erinnern, könnte ich sagen, ich könnte es wieder ändern. Aber das fängt an, lange zu werden. Also, sagen wir einfach d1.fill und dann etwas. Also, was möchte ich mit dieser Füllung machen? Nun, wenn Sie sich in der vorherigen Datei erinnern, wollte ich zufällig ein rotes grünes Blau auswählen. Also, wenn ich nur einen Code kopieren würde, den ich hier bereits vorgebacken habe, wo ich sage, d1 fülle zufällig r, g und b, Zahl von 0-255. Wenn ich das in jedes von ihnen einfügen würde, lassen Sie mich einfach kopieren und einfügen und einfügen und einfügen und einfügen, dann muss ich es natürlich in d2 ändern. Das hier muss ich zu d3 wechseln. Dieser muss ich zu d4 wechseln, und dieser zu d5. Da die gesamte Erstellung von Objekten im Setup erfolgt, können Sie die Datei tatsächlich ausführen und nur eine Farbe malen. Während in der vorherigen, es wurde die Farbe immer und immer wieder ausgewählt. Also, ein großer Vorteil. Großer Vorteil, Hype zu verwenden, und nur in der Draw-Funktion, nur setzen, dass h.DrawStage, und was auch immer wir in Setup tun, das wird nur einmal ausgeführt, und es ist, dass H.DrawStage, das ist Betrachten Sie tatsächlich alle Parameter, die Sie im Setup festgelegt haben und die Berechnung durchführen. Also in diesem Fall ist es Rotation. Nun, ich könnte ein paar andere Sachen hier auf der H.init machen. Ich könnte sagen.background und ich könnte 666666, ein dunkelgrau wie so angeben , so dass ich die Hintergrundfarbe einstellen konnte, und ich kann dann AutoClear tun. Ein AutoClear ist blau im Wert. Also, wenn Sie AutoClear true sagen und tatsächlich diese Datei ausführen, was AutoClear True tut, ist das Löschen des Hintergrunds. Also, wenn ich AutoClear auf false änderte und tatsächlich meinen Film laufen würde, würden Sie diesen Maleffekt erhalten. Also werden wir uns auf einige der Hype zeichnbaren Objekte bewegen. Also, wir werden nur einen schnellen Durchlauf aller verschiedenen Arten von Zeichenobjekten durchführen, die Sie mit dem Hype Framework verwenden können. Gehen Sie weiter. 23. HYPE/Drawables: Ok. Also, jetzt gehen wir zu einem Ordner namens HYPE Unterstriche Objekte, und Sie sollten feststellen, dass es gezippt wurde und es an diesen Videoinhalt angehängt wurde . Wenn ich keine Art von Auszeichnung für die Skillshare Anzahl von Videoinhalten in einer Klasse gewinne , werde ich wirklich erschüttert sein. Es gibt einen Vorschlag, wenn ich diese Videos hinzufüge, der besagt: „Machen Sie jedes Video zwischen drei und sieben Minuten.“ Tut mir leid, ich habe in dieser Abteilung versagt. Es gibt viele Drawables in HYPE, und ich habe tatsächlich nicht alle hinzugefügt. Es gibt ein paar, die fehlen. Dieses Video wäre drei Stunden lang, wenn wir tatsächlich den ganzen Code geschrieben haben, um über all die verschiedenen Drawables zu sprechen. Also, was ich tun werde, ist, wir werden uns nur einige der Drawables hier ansehen, und wir werden uns den Code ansehen, und Sie können Seite an Seite arbeiten, und wir können das durchstehen. Jetzt wird die gleiche Struktur in jedem einzelnen dieser Ordner sein. Ich habe versucht, es auf seine absoluten Grundlagen abzubauen. Schauen wir uns an, was hier passiert. Es gibt ein leeres Setup. Es gibt kein Leerzeichen. Ich sage H.init (dies), ich gehe voran und ich setze in einen Hintergrund eines dunkelgrauen. Zeile sechs sagte ich glatt, die manchmal machen die Pixel ein wenig schöner. Linie 22 h.DrawStage, also was auch immer wir dem HYPE Universum hinzufügen, malen Sie auf den Bildschirm. Jetzt, in Zeile 8-20, mache ich eine For-Schleife. Eine for-Schleife ist etwas, das eine bestimmte Anzahl von Malen ausführt. Also, in diesem Fall habe ich gesagt, dass ich möchte, dass diese for-Schleife 100 Mal läuft. Wenn Sie nicht mit der Programmierung vertraut sind, ist eine for-Schleife drei grundlegende Schritte, wo Sie beginnen, bis wann wie zu zählen. Also, integer i gleich null, beginnen bei Null, laufen, während ich weniger als 100 ist, ein i++. Also, wenn Sie sich von vorher erinnern, fügen Sie eins auf i hinzu. Also, Null wird eins, eins wird zwei und dies zählt, bis es 100 erreicht. Dann, wenn es 100 erreicht, stoppt diese for-Schleife. Nun, innerhalb dieser for-Schleife, erstellen wir ein Rechteck, ein hRect. Das würde bedeuten, dass wir 100 HRECTs auf dem Bildschirm anbringen werden. Sehen wir uns also einige der Parameter an, die wir übergeben haben. Ich sagte, dass ich will, dass das StrokeWeight eins ist. Ich sagte, ich möchte, dass die Strichfarbe FF3300 ist, schön dunkelorange. Ich möchte, dass die Füllung 111111 ist, schön dunkelgrau. Ich möchte, dass die Größe eine Zufallszahl ist. Beachten Sie also, dass wir nur eine Nummer für die Größe übergeben, also bedeutet das, dass es eine perfekte Box sein wird. Die Breite und Höhe erhalten die gleiche genaue Zahl. Aber, ich habe zufällig gesagt 25 Komma 125. Das ist ein Bereich, was bedeutet, dass es eine Zahl zwischen 25 und 125 wählen wird, und unabhängig von der Zahl, die er wählt, es gibt das der Breite und der Höhe. Drehen, ich bitte es, eine zufällige 360 Grad zu wählen. Für die Position random.width random.height. Jetzt haben wir dies noch nicht abgedeckt, Breite ist gleich 600 und Höhe ist gleich 600. Also, Sie können einfach mit den Größen hier oben angeben, und diese Größe kann dann als Breite und Höhe im gesamten Rest Ihres Dokuments bezeichnet werden . AnchoRat (H.center) also setzen wir diesen Registrierungspunkt auf die Mitte. Nachdem wir fertig sind, sagen wir h.add (d), d ist ziehbar. Es ist eine Abkürzung für Drawable. Also, wenn ich diese Skizze testen würde, sollten Sie feststellen, dass 100 HRECTs zur Bühne hinzugefügt wurden. Sie haben alle einen Bereich zwischen 25 und 125. Sie haben eine zufällige Rotation. Also, jetzt, vielleicht fängst du an, einige dieser Gedanken und Gespräche zu sehen , die ich über Zufälligkeit hatte. Ich weiß nicht, ob das unbedingt gut aussieht oder nicht. In der Tat ist es nur zufällig, aber es ist zufällig mit einer Reichweite. Es wurde nicht zu klein, weil es nicht kleiner als 25 von 25 ging, und es wurde nicht zu groß, weil es nicht größer als 125 von 125 ging. Also, wenn ich Zufälligkeit hinzufügen kann, aber Grenzen darauf habe , desto besser sind die Ergebnisse. Also, cool. Das gefällt uns. Schauen wir uns den nächsten hRect an und sehen, was in dieser speziellen Datei vor sich geht. Hier habe ich die Füllfarbe geändert, um einen Alpha von 200 zu haben. Alpha ist also eine Zahl zwischen Null und 255. Also, ich sagte, dass ich will, dass die Füllung dieses dunkelgraue Komma und dann Alpha ist. Sie werden feststellen, dass das Alpha hier ist, Sie können einige der Striche aus den Rechtecken sehen, die tatsächlich dahinter sind. HRect unterstützt auch die Rundung der Kanten. Also, Sie könnten in Zeile neun bemerken, sagte ich, .runding und dann setze ich in einen Radius von 10, so dass meine Rechtecke tatsächlich einen Eckradius von 10. Sehr nett. Weiter zum nächsten. Wenn wir uns dieses ansehen, änderte ich die Größe hier, weil, wenn die Größe über eine Zahl liegt, dann gilt es für Breite und Höhe. Hier randomisiere ich die Breite und ich randomisiere die Höhe. In diesem Fall wird HRect eher zu einer Reihe von Rechtecken als zu perfekten Quadraten. Sie werden also feststellen, dass wir eine Reihe von Rechtecken auf dem Bildschirm bekommen, anstatt eine Reihe von perfekten Quadraten wie in Schritt eins und in Schritt zwei. Hellipse, nicht viel anders als HRectangle. Auch hier geben Sie eine Größe an. Diese Größe ist der Radius des Kreises. Also, sehr ähnlich wie HRect, außer dass wir Kreise anstatt Rechtecke machen. In Schritt zwei glaube ich, anstatt perfekte Kreise zu machen, änderte ich die Größe in die Breite, einen zufälligen Satz von Zahlen und die Höhe zu einem zufälligen Satz von Zahlen. Also, nochmal, wenn Sie das testen, sollten wir ein paar Ovale bekommen. In Schritt eins, Rotation, zufällige 360 habe ich nicht getan, weil Sie keinen zufällig gedrehten Kreis sehen können. Aber in Schritt zwei, weil das Ovale sind, kann ich diese zufällige 360-Rotation machen, und ich kann Ovale umdrehen. Nun, es gibt auch H.Path. H.path ist, wo Sie Dinge wie Polygone tun können. In H.Path können wir Sterne machen, wir können Dreiecke machen. Also, wir werden uns nicht all das ansehen. Ich möchte, dass Sie sich alle ansehen, aber wenn Sie zum Beispiel ein Polygon ausführen würden, werden Sie feststellen, dass ich Dinge wie Achtecke und Sechsecke und so weiter und so weiter bekommen kann, indem Sie angeben, dass es ein Polygon ist und dann wie viele Seiten dieses Polygons hat. Also, im Fall dieses hier, habe ich gesagt: „Hey, H.Path ist ein Polygon und dieses Polygon hat fünf Seiten“, und so bekomme ich ein fünfseitiges Polygon. Natürlich, in Polygon zwei, ich randomisiere es. Ich sage: „Hey, Polygon randomisiert zwischen drei und neun.“ Also, wenn Sie diese Datei ausführen, erhalten Sie alles von Dreiecken Achtecke bis hin zu Sechsecken und so weiter und so weiter. Also, ziehen Sie an. Stern. Ob Sie es glauben oder nicht, es ist ein Star. Stern hat zwei Argumente, Tiefe und Kanten. Also, wenn du das laufen würdest, denke ich, dieser ist am Ende wie ein traditioneller, perfekter fünfseitiger Stern. So kann jeder Pfad auch Sterne machen. Natürlich gibt es eine Reihe von verschiedenen Dreiecken, die wir haben können. Es gibt gleichschenklige, es gibt rechte Winkel, so weiter und so weiter. Also, hier sage ich, ich will ein Dreieck, ich will, dass dieses Dreieck gleichschenklig ist, und ich möchte, dass es nach oben zeigt. Also, schauen Sie durch H.Path und schauen Sie sich all die verschiedenen Arten von Formen an, die wir tatsächlich dort machen können. Gehen wir nun zu HBox und HSphere. HBox, an dem wir noch arbeiten, aber das Schöne ist, dass HBox eine dreidimensionale Form ist, so dass Sie vielleicht bemerken, ein wenig Unterschied ist, dass in der Größe hier, musste ich sagen, dass P3D zu verwenden. Standardmäßig werden P2D, zweidimensionale Matrizen und Vektoren verwendet . Also in Zeile vier muss ich angeben, dass ich dreidimensionale Koordinaten verwenden möchte. Ich muss HYPE auch sagen, dass ich dreidimensionale Koordinaten verwende, also wirst du vielleicht bemerken, dass ich auf Zeile fünf sage, H.init und dann verwende ich 3DTrue, H.init und dann verwende ich 3DTrue, also schaltet es HYPE, um 3D-Koordinaten anstelle von 2D-Koordinaten zu verwenden. Zeile 11, 12 und 13, da es eine Box ist, muss ich seine Tiefe angeben, ich muss seine Breite angeben, ich muss seine Höhe angeben. Und wieder, ich habe hier eine Reihe von Zufallszahlen eingefügt. Also, wenn Sie diese Skizze tatsächlich ausführen, werden Sie feststellen, dass wir tatsächlich eine Reihe von dreidimensionalen Boxen im Raum bekommen . Okay, sehr cool. Ich habe einen Schritt 2 für HBox gemacht. Was habe ich dafür getan? Ich habe Rotation X, Drehung Y und Drehung Z gemacht, was ich für ziemlich cool hielt. So können Sie tatsächlich eine Box erstellen und dann beginnen, die Achse zu ändern, auf der es gedreht ist, X, Y und Z, und so dachte ich kompositionell, dass begann ziemlich interessant zu werden. Ich habe dieses Alpha auch in die Füllung eingefügt, so dass Sie einige der anderen Formen sehen können, die hinter der Box passieren. Okay, Sphere, ich bin noch nicht auf Sphere verkauft. Es ist wirklich langsam, wenn Sie Animation machen. Hören Sie, ich habe den Schlag dieser Kugel eingeschaltet und Sie sollten etwas bekommen, das so aussieht. Ich arbeite immer noch mit Sphere. Ich versuche immer noch, etwas Lustiges zu machen. diesem Schritt 2 habe ich wahrscheinlich die Drehung X, Drehung Y und Drehung Z gemacht . Wenn Sie also voran gehen und dies ausführen, wird es nur die Achse dieser Kugeln drehen. Auf einigen von ihnen könnte man also die Böden oder die Spitzen der Sphäre sehen, wieder kompositionell, es ist interessant. Nun, die letzten beiden, die wir betrachten wollen, sind h.image, und h.image, Schritt 1, es gibt einen Build-Ordner und es gibt auch einen Datenordner, und in den Datenordner habe ich nur ein kleines JPEG, das ich für meinen Kumpel Joel gemacht habe hier. Nun, wenn Sie sich die build.pde ansehen, bemerken Sie vielleicht, dass ich sage: „Okay, cool, ich benutze H-Bild “, und dann gebe ich tatsächlich in Anführungszeichen an, welches Bild zu bekommen ist. Sie müssen den Datenordner nicht angeben, er weiß nur automatisch, um ihn zu erhalten. Sie könnten in Zeilen eins bis sieben bemerken, wenn ich dies für die Verarbeitung von JS veröffentlichen wollte, müssen Sie diese Codezeile haben, so dass sie die Bilder für die Verwendung im Browser und JavaScript vorlädt. Und wenn ich das mache, sollte das einfach 100 dieser Bilder auf dem Bildschirm anhängen. Da sind also ein Haufen von ihnen. Wieder, in Schritt 2, habe ich etwas Rotation hinzugefügt, ich habe etwas Alpha zu den Bildern hinzugefügt. Viele Male, denke ich, in Java, wird es ein wenig pixelig. Sie können sehen, dass das Bild ein wenig zäh wird. Interessanterweise passiert dies nicht in der JavaScript-Version, aber in der Java-Version erhalten Sie irgendwie die Treppe auf die Bilder. Nun, die letzte, die ich möchte, dass Sie am meisten verdauen , weil es sich auf diese Klasse bezieht, ist HShape. HShape wird einen Datenordner haben, aber innerhalb dieses Datenordners wird SVG sein. Also nehmen wir unsere Vermögenswerte, die wir gezeichnet haben, und verwenden sie in dieser Serie von Skizzen. Also, sieh es dir an. HShape D, zeichnbar, Zeile neun, D entspricht neuer HShape, „Hey, lade in diese SVG-Datei. Und Sie werden feststellen, dass es einige Dinge gibt, die ich hier übergeben habe, wie enable style false, die nicht das Styling verwenden, das ich in Illustrator verwendet habe, tatsächlich töten, weil ich das Styling hier in der Verarbeitung angeben werde. Also, aktivieren Stil falsch tötet das Styling und erlaubt mir, es hier zu setzen. Strichgewicht 1, ein schönes Orange für den Strich, ein dunkelgrau für die Füllung, so weiter und so weiter. Nun, wenn ich diese Skizze ausführe, sollten Sie bemerken, dass ich jetzt mit dieser SVG-Datei male, die ich in Illustrator erstellt habe. Hier ist, wo es beginnt wirklich spannend zu werden, wo wir einige dieser Zeichnungen, die wir erstellen, nehmen und sie in diese Umgebungen abbilden. Nun, diese Beispielskizze ist wie eine gute weil Sie sehen können, wie die Dinge auf dem Bildschirm mischen. Fall in Punkt, schauen Sie sich Schritt 2 an, wo, wenn Sie sich die Daten ansehen, SVG, es riesig ist. Es ist eine sehr große SVG-Datei, und es ist sehr komplex in den Formularen, die es verwendet. Wenn Sie also build.pde tatsächlich öffnen und diese Skizze ausführen, es eigentlich nicht so gut aus. Ich muss Sie daran erinnern, dass, wenn wir eine komplexe Komposition erzeugen, wenn das Kunstwerk komplex ist, das ist doppelt komplex, und Doppelkomplex sieht nicht ständig so gut aus. Je einfacher meine Formulare sind, desto besser werden diese Ergebnisse. Seien Sie also vorsichtig, wenn Sie Ihr Kunstwerk zu detailliert machen. In diesem Fall funktioniert das nicht so heiß. Lassen Sie uns Schritt 3 betrachten. Schritt 3 ist einige dieser Zeichnungen, die ich auf dem Wacom-Tablet gemacht habe. In der Tat habe ich einen Haufen von ihnen gemacht, also werde ich Ihnen eine Reihe dieser Art von Beispiel-SVG-Dateien geben, mit denen Sie spielen können. Also, ein nettes kleines SVG hier. Nun, in dieser build.pde, werden Sie vielleicht bemerken, töten Sie den Stil nicht, halten Sie ihn so, als wäre er in Illustrator. Machen Sie eine zufällige Rotation, machen Sie eine zufällige Größe, gehen Sie einfach voran und werfen Sie sie auf dem Bildschirm herum und lassen Sie uns sehen, was passiert. Also, ich werde diese Skizze ausführen und ich musste die for-Schleife auf 20 drehen, weil das Kunstwerk so detailliert war, Sie diesen Fehler bekommen, wie ich gerade bekam, was ich versuche, 20 dieser SVG-Dateien zu zeichnen und weil ich versuche, 20 von ihnen zu tun, läuft mir im Grunde die Erinnerung aus. Da steht: „Whoah, Alter, du versuchst, 20 Dinge zu schaffen, die viel zu viele Vektorinformationen haben.“ Es gibt Ihnen also einige Anweisungen, wie Sie den Speicher innerhalb von Präferenzen tatsächlich erhöhen können. Lassen Sie mich diese einfach beenden und anstatt die Speichereinstellungen zu ändern, werde ich nur meine vier Schleife auf fünf ändern, also wird es nur fünf Stücke von Kunstwerken anhängen. Meine Hoffnung ist, dass das läuft. Okay, Sie können sehen, dass es diese SVG-Dateien auf den Desktop angehängt hat, und wieder, es nimmt sie einfach an den Desktop, oh mein Gott, ich rede so schnell und mein Gehirn geht so schnell , dass ich sagen könnte, dass ich dich wollte , um eine Giraffe zu rasieren. Gehen Sie bitte zur Serengeti und rasieren Sie sich eine Giraffe. Wo waren wir? Lass uns einfach weitermachen. Okay, Schritt 4. Schritt 4, Ich setze in diese Aktivierung des Stils. Lassen Sie mich das auf die Vier-Schleife 10 niederschlagen. Hoffentlich geht mir der Speicher nicht aus und Sie können hier sehen, indem Sie den Stil aktivieren, ich könnte hineingehen und eine Füllung einfügen, einige Strichinformationen eingeben, und ich fange an, diese Komposition zu bekommen, aber Sie könnten feststellen, dass wenn ich dies im Setup mache und eine Füllung spezifiziere, es nur eine universelle Füllung, die über den gesamten Satz von Grafiken gefüllt wird, aber das ist tatsächlich eine Reihe von individuellen Dingen. Also, was ich getan habe, ist, obwohl ich vorspringe, der nächste Abschnitt wird über die Arbeit mit Farbe sein, wenn Sie tatsächlich zu Schritt 5 gehen, habe ich Ihnen nur ein Beispiel gezeigt, was passiert, wenn Sie einige Farben angegeben und dann das Bildmaterial bitten , nach dem Zufallsprinzip Farben für die Füllungen auszuwählen. Wenn Sie das tun, fangen Sie an, etwas zu bekommen, das visuell viel interessanter aussehen wird, also anstatt eine Farbe anzuwenden, läuft es hier durch und es färbt alle diese Gruppierungen einzeln, wie wir in dem anderen Abschnitt behandelt. Ok, cool. Jetzt wieder, sogar noch weiter voraus springen, vorwärts in die Zeit, Schritt 6. Ich wollte eigentlich nur zeigen, wie Sie die Verarbeitung von PDF importiert haben, wie sagen Sie, dass Sie erfassen und aufzeichnen möchten, was auf dem Bildschirm gerendert wird, und wenn ich die Taste S auf meiner Tastatur drücke, erfassen Sie alles, was gezeichnet wurde. Also, wenn ich diesen Film laufen würde, drücken Sie die Taste S, es würde tatsächlich ein PDF generieren, und diese PDF-Datei können Sie tatsächlich in Illustrator öffnen. Also, ich habe jetzt eine Umgebung, um Code zu schreiben, einige Grafiken anzuhängen und dann diese zufällige Komposition zurück an Illustrator auszugeben, und offensichtlich werden wir in den kommenden Abschnitten herausfinden, wie man alle Arten von verschiedenen Stylings und so weiter. Ok. Wow, viel zu bedecken in diesem Abschnitt, darüber, wie man auf Bildschirm malen kann, wie HYPE Ihnen hilft, zu malen, um Bildschirm viel einfacher als ich denke, die Verarbeitung tut. Im nächsten Abschnitt gehen wir ein wenig zurück und sprechen über Farbe. Konzeptionell werden wir über Farbe sprechen und dann werden wir über das Anwenden von Farbe auf einige neue Skizzen sprechen , die wir erstellen. Also, Farbe. Wir sehen uns im nächsten Abschnitt. 24. Einführung: Arbeiten mit Farbe: Farbe. Sehr wichtig. Wir müssen über Farbe reden. Weißt du, warum wir über Farbe reden müssen? Weil du bei Farbe saugst. Ich weiß keinen besseren Weg, es auszudrücken. Die Menschen sind schrecklich in der Farbe, und mein Ziel ist es, die Menschen dazu zu bringen, nicht schlecht in der Farbe zu sein. Farbe ist super, super wichtig für mich. Nicht nur das, aber ich habe einige Geheimnisse für die Arbeit mit Farbe. Auch hier ist die Metapher, die ich oft verwende, eine Schachtel Buntstifte. Wir werden Code schreiben, der besagt: „Hey, wir haben die ganze Zeit damit verbracht, dieses Kunstwerk zu zeichnen. Hey, wir haben die ganze Zeit damit verbracht, dieses Programm zu laufen, und jetzt haben wir gerade diese Schachtel Buntstifte definiert.“ Diese Schachtel mit Buntstiften hat alle Farben, mit denen wir färben dürfen. Also, was passieren wird, ist, dass, wenn wir unsere Datei tatsächlich ausführen, es zufällig von der Bank von Vermögenswerten, die wir gezeichnet haben, es wird zufällig Zeug auf dem Bildschirm generieren, und dann wird es auf diese Schachtel mit Buntstiften zugreifen und sagen: „Hey, meine Aufgabe ist es, die Dinge zufällig auf dem Bildschirm zu färben, aber ich kann nur die Farben verwenden, die in dieser Box mit Buntstiften angegeben wurden.“ Nun, diese Idee mag einfach erscheinen. In der ersten Übung, die wir tun, wird es sehr einfach sein. Sie werden buchstäblich diese Schachtel mit Buntstiften einrichten, und es wird zufällig aus den Buntstiften auswählen, und es wird die Dinge auf dem Bildschirm färben. Aber dann können wir anfangen, in Dinge wie Farbwartung zu kommen. Wie warten wir mehr Farben als andere? Wir können es mit einer Farbe tun und wir können es tatsächlich mit mehreren Farben tun. Was bedeutet, dass, wenn Dinge auf dem Bildschirm erzeugt werden, wir eine bestimmte Farbenästhetik und die Komposition erzwingen können. Also, das funktioniert mit etwas namens Farbpool. Aber dann haben wir einen anderen Trick namens Pixelkolorist. Pixelkolorist, ermöglicht es uns, tatsächlich Fotos zu machen und die Farbe aus einem Foto zu entfernen. Ich muss Drop Eric Nowitzki nennen, denn er ist einer der ersten Typen, die es je gesehen haben. Wo er hinausgeht und tatsächlich Fotografien fotografiert, verwischen sie und dann tatsächlich die Farbinformationen aus diesem Foto verwenden , um die Farbe zu füllen, die wir auf dem Bildschirm malen werden. Der dritte Schritt ist eine Klasse, die jedes Farbfeld genannt wird. Was jedes Farbfeld uns erlaubt, ist tatsächlich Einrichtungspunkte der Farbe im Raum. wir also nach dem Zufallsprinzip eine Komposition generieren, wenn ich wollte, dass sie oben grün und dann gelb in der Mitte und dann blau unten ist, könnten wir jedes Farbfeld verwenden, um diesen Farbübergang tatsächlich zu erstellen. Also, wir werden viel Zeit mit Farbe verbringen, weil ich denke, es ist eine super tolle Sache, von der besessen zu sein. Ich denke, es wird in der Arbeit, die Sie erschaffen, Resonanz finden und schließlich können Sie all Ihren Freunden sagen, dass Sie nicht an Farbe saugen. 25. The Color Thief's: Hey, wir sind in Abschnitt fünf, der mit Farbe arbeitet. Ich habe mein Skillshare Lehrer John Conteno T-Shirt an. Spüren Sie die Macht? Wo soll ich anfangen? Farbe. Super, super wichtig, ich bin besessen davon. Ich liebe Farbe bis zu dem Punkt, wo ich immer auf der Suche und auf der Suche nach Form Inspiration, ich bin immer auf der Jagd nach Farbe. Nun, in der Vergangenheit, war es das. Wir waren Druckdesigner und Sie hätten Ihr Pantone-Buch und Sie würden durchgehen und Sie würden es finden, aber Sie suchen immer eine Farbe nach dem anderen, aber hier haben wir angefangen, Farbe zu bekommen. Es gibt viele Orte für Farbinspiration, zum Beispiel Kuler, Sie könnten zu Kuler gehen. Kuler ist nett. Ich zeige Ihnen ein paar Tricks für das Hacken mit Kuler. Mein Problem mit Kuler ist, dass es nur fünf Farben sind, und in einigen Fällen ist das großartig, mit diesen fünf Farben zu beginnen, aber ich bin immer auf der Suche nach einer Reihe von Farben, eine viel breitere Palette, vor allem wenn es darum geht, diese Farben programmgesteuert hinzuzufügen, was Sie feststellen werden, ist, dass, wenn ich zufällig eine Reihe von Grafiken auf dem Bildschirm generieren würde und ich nur fünf Farben verwendet habe, es am Ende sehr flach aussehen würde. Also, was ich tun möchte, ist, dass ich eine viel größere Auswahl an Farben bekommen möchte. Also, die Frage ist, woher kommt Farbe? Wo kann ich nach Farbinspiration suchen? Nun, es endet, dass es die meiste Zeit von Fotos stammt. Wenn ich einen Browser öffnen sollte, zum Beispiel, und sagen wir, ich ging zu Google und tippte in Strand und Ozean, vielleicht, und klickte auf „Bilder,“ Ich könnte durch diese Auswahl von Bildern laufen , um nach Farbe zu jagen. Zum Beispiel, wie dieser, wenn ich das mag, wenn ich nach dieser Art von Blues mit dieser Art von Sandfarbe und vielleicht diesem Schlag Gelb suchte , dann könnte dies ein großartiger Ort sein, um Farbe zu stehlen. Nun, wie es passiert, ist, dass ich viel Zeit mit Flickr verbringe, um zu schauen, was Freunde tun. Das sind einige Freunde von mir, Kozyndan, und sie sind begeisterte Taucher und sie posten immer diese einfach erstaunlichen Fotos aus Unterwasser. Ich sah das hier und bin ausgeflippt. Ich sagte: „Wow, das hat wirklich erstaunliche Blues. Es hat dieses großartige Gold und es übergeht in diese erstaunliche reiche Schokoladenfarbe.“ Also, wie kann ich das als Punkt verwenden, um Farbe zu stehlen? Lasst uns das Bild von Flickr abziehen und es hier in Photoshop öffnen. Nun, wieder, hier ist das Bild. Viele wirklich gute Sachen, die vor sich gehen und das ist ein JPEG, und weil es ein JPEG ist, unterstützt es Millionen von Farben, so dass die Farbinformationen hier massiv sind. Diese Idee, das Pipettenwerkzeug zu nehmen und eine Farbe auszuwählen und dann : „Oh, gefällt mir das oder will ich einen gedämpften gehen?“ Das würde mich ewig brauchen, um durch dieses Foto zu rennen und Farbe zu finden. Nun, ich habe ein paar Tricks. Was ich tun werde, ist, ich werde kommen und sagen „Für Web speichern“. Wenn Sie Save for Web sagen, erhalten Sie dieses schöne kleine Fenster hier geöffnet, und die Sache ist, dass, wenn Sie in JPEG wären, Sie bemerken würden, dass die Farbtabelle leer ist, und wieder, weil JPEG und PNG Millionen von Farben. Aber Sie haben vielleicht gesehen, dass, wenn Sie dieses Bild tatsächlich als GIF speichern, Sie dieses Bild auf eine Farbtabelle reduzieren und diese Farbtabelle kann bis zu 256 Farben enthalten. Wenn ich nun „GIF32 Dithered“ ausgewählt habe, werden Sie feststellen, dass die Farbtabelle wieder auf die obersten 32 Farben reduziert wird, die im gesamten Stück gemittelt werden. Ich habe jedoch ein bisschen ein Problem mit Dithering, und was Dithering ist, ist, dass es die Pixel verteilen wird, so dass Ihr Auge sie tatsächlich ein wenig besser auf dem Bildschirm vermischt. Wenn ich jedoch hierher kam und „GIF 32 No Dithered“ sagte, dann werde ich nur viel größere Farbpools bekommen. Nun, das Schöne ist, dass, während ich in diesem Save for Web bin, und während ich diese Farbtabelle ansehe, ich sagen kann: „Hey, weißt du was? Ich will diese dunkle Farbe wirklich nicht, lass mich voran gehen und sie verrotten.“ Also, ich kann tatsächlich beginnen, einige der Farben zu entfernen, die ich nicht interessiert bin. Also, wieder, das ist ziemlich gut. Ich sehe hier einen. Dies ist kein sehr gutes sandiges bräunliches Grün, daher kann ich das Pipettenwerkzeug verwenden, um es tatsächlich auszuwählen. Es hebt sich in meiner Farbtabelle hervor und ich kann voran gehen und es abnehmen. Vielleicht bin ich nicht so verrückt nach dieser Farbe und ich kann diese auswählen, und ich kann voran gehen und sie abnehmen. Also, ich kann voran gehen und beginnen zu gehen und einige erste Bearbeitung, indem ich einige der Farben entfernen , die ich vielleicht nicht wirklich so interessiert bin. Okay, also was ich tun werde, ist, dass ich einfach auf „Speichern“ klicke und ich werde das auf meinem Desktop setzen und ich werde einfach Color1.gif nennen. Nun, die Sache ist, dass Sie vielleicht gesehen haben , dass dieses Foto einige klare Teilungen hat, besonders dieser Abschnitt hier, gibt es eine klare Trennung zwischen Seetang und Blau, richtig? Also, eine Sache, die ich normalerweise tun werde, habe ich das eine GIF gespeichert, aber ich werde nach oben kommen, um zu filtern und ich werde sagen „Unschärfe“, und ich werde sagen „Gaußsche Unschärfe“, und ich werde voran gehen und werfen eine Gaußsche Unschärfe wie 10. Nun, was das getan wird, ist, dass es nur gemischt ist. Alle Farben. Also, jetzt gibt es keine harte Kante zwischen einer Farbe und einer anderen Farbe. Eigentlich sind alle Farben miteinander vermischt. Was Sie finden, ist, dass, wenn ich tatsächlich wieder für Web speichern, und manchmal wird es die Farbtabellendaten aus dem vorherigen Bild zu halten. Also, ich mache immer einen Punkt, um auf jpeg klicken, zeigen Sie mir alle Millionen von Farben und dann wieder GIF 32 No Dither. Wenn ich das tue, sieh dir diese schönen großen Farbpools an, die hier die Farbtabelle wiedergegeben haben. Auch hier könnte ich das Pipettenwerkzeug nehmen und diese besondere Farbe loswerden. Auch hier könnte ich eingehen und vielleicht einige dieser Farben bearbeiten , die ich weiß, dass ich nicht wirklich fühle. Also, ich speichere eine, die das Foto genau so ist, wie es beabsichtigt war, und ich mache die zweite, wo ich diese Gaußsche Unschärfe mache. Also, ich werde das als color2.gif speichern. An diesem Punkt können Sie das Bild schließen, das Sie haben, und Sie können Photoshop schließen. Nun, was ich früher getan habe, war, dass ich eine Web-App hatte, wo Sie zu einer URL gehen und es würde sagen: „Hey, warum gibst du mir nicht ein GIF und ich werde mir alle Farbinformationen ansehen , die da drin sind und sie im Code ausspucken.“ Ich benutzte das jahrelang, Jahre und Jahre, und am Ende unterrichtete ich eine Klasse in Aspen, Colorado, am Anderson Ranch Art Complex und einer meiner Schüler war dieser wirklich tolle Kerl Michael Swenson. Michael sagte: „Hey, macht es dir etwas aus, wenn ich dieses Konzept nehme und es als eigenständige App verpacke?“ Diese App sollte an dieses Video angehängt werden. Was es ist, ist das Farbauswahl Werkzeug. Also, wenn Sie dies starten, können Sie sehen, dass Sie Bild laden und Sie haben einige andere Werte hier. Alles, was ich tun werde, ist, ich werde auf Bild laden klicken und gehen Sie voran und laden Sie einfach in der ersten color1.gif und klicken Sie auf Öffnen. Sie werden feststellen, dass es tatsächlich die Farben aus diesem GIF extrahiert hat. Jetzt kannst du sortieren. Du kannst sagen: „Okay, zeig es mir in HSL. Zeig es mir in HSV. Zeig es mir im Labor.“ Ich mag das Labor, weil es es sortiert, ich werde später danke Ihnen sehr aktualisieren. Also, ich mag Labor für die Sortierung. Nun, es gibt einige Farben hier, die ich nicht will, und vielleicht jetzt, wo ich sie ein bisschen besser sehen kann, anstatt dieses kleinen Musterchips in Photoshop. Was ich tun werde, ist, ich werde die Strg-Taste gedrückt halten und ich kann tatsächlich beginnen einige der Farben zu bearbeiten, die ich weiß, dass ich nicht will. Wenn ich sie editiere, beginnt das eigentlich zu organisieren. Nun, sagen wir, ich wollte nur den Blues sehen, man kann tatsächlich die Farbfelder bewegen und ich könnte tatsächlich anfangen, den Blues in einer Reihe zu betrachten , um ein Gefühl dafür zu bekommen, wie diese Farben mischen. Möchte ich ein paar von ihnen entfernen, also hier, ich ziehe nur diese Welpen rüber. Wenn ich das mache, bekomme ich jetzt ein viel besseres Gefühl für, oh, okay. Ich will diese Farbe wirklich nicht, ich will diese Farbe nicht. Diese beiden hier haben ein bisschen zu viel Grün in ihnen, so dass sie nicht wirklich gelieren mit einigen der anderen. Also, ich könnte das entfernen und entfernen. Also, jetzt fange ich an, ein bisschen bessere Harmonie mit diesem Blues zu bekommen. Sagen wir einfach, ich will in einen Sand werfen. Also, ich könnte diese beiden Sandfarben wählen, und sagen wir, ich will diese Serie von Orangen. Also wieder, ich könnte einige dieser Brauntöne entfernen, von denen ich nicht wirklich denke, dass sie funktionieren, und wenn ich tatsächlich bearbeiten, werden die Farbfelder größer. Also helfen sie mir, etwas besser zu organisieren, was los ist. Also, cool, wir sind fertig. Tolle Palette Ich habe eins, zwei, drei, vier, fünf, sechs, sieben, acht, neun, 10, 11, 12, 13, 14, 15 Farben, das ist großartig. Also, anstatt Kühler zu verwenden und fünf zu haben, habe ich hier tatsächlich 10 zusätzliche Farben, was großartig ist. Nun, wenn ich Animation mache, könnten Sie tatsächlich auf die Verwendung von Schwarm-Ansicht klicken, damit ich tatsächlich sehen und sehen könnte, wie es wäre, wenn sich diese Farben auf dem Bildschirm bewegen und etwas verblassen zu ihnen haben. Sie können auf GridView verwenden klicken, um dies in einem Raster zu betrachten. Eigentlich mischen sich diese Farben recht gut. Also, was ich tun möchte, ist auf View Color List, und Sie erhalten diese kleine Ausgabe hier. Nehmen wir an, ich gehe voran und starte ein neues Dokument in Sublime Text zwei und ich kann tatsächlich zur Verarbeitung auf Ansicht klicken. Wenn ich für die Verarbeitung auf Ansicht klicke, spuckt es tatsächlich alle Farben als hexadezimal aus. Sie können es als ASE-Datei speichern, die Sie dann wieder in Photoshop oder Illustrator importieren können, oder ich kann Daten in die Zwischenablage kopieren. Also, ich gehe voran und kopiere die Daten in die Zwischenablage, gehe weiter und klicke auf Einfügen und jetzt habe ich alle diese Farben aus diesem Foto extrahiert und bereit für den Einsatz im Code. Also, ich kann dies auf meinem Desktop als colors.text speichern. Wir legen das einfach auf den Desktop. Also, jetzt fange ich an, einige der Farben zu speichern. Nun, wenn ich das schließe und das Farbauswahlwerkzeug tatsächlich schließe und es tatsächlich neu starte. Wenn ich in diesem zweiten Foto importieren würde, dort müssen Sie aktualisieren. Sie müssen aktualisieren. Sie bestehen darauf, dass Sie sofort aktualisieren. Also, ich lasse Sie aktualisieren, weil Sie aktualisieren müssen. Es gibt keine Frage, dass Sie aktualisieren. Es wurde aktualisiert. Clipping-Werkzeug. Bild laden. Zeigen wir auf die zweite. Manchmal mit der zweiten, mit dieser Gaußschen Unschärfe, sind die Farben tatsächlich in vielen Fällen, vielleicht ein wenig harmonischer, denn wieder, Sie haben nicht diese harten Unterteilungen zwischen den Farben, Sie haben eine schöne subtile Abstufung zwischen den Farben. Also, manchmal, wenn ich möchte, dass die Farben einfach ein wenig besser übergehen, wieder, dass Gaußsche Unschärfe, wie Sie vielleicht sehen, manchmal einen besseren Job macht. Also, wow. Tolles Werkzeug zum Extrahieren von Farben aus Bildern. Also, lassen Sie uns ein neues Video beginnen und ich werde Ihnen einen kleinen Trick zeigen, wie Sie diese Technik weiterhin verwenden, aber in Verbindung mit Kühler. Sehen Sie sich das nächste Video 26. Expanding Kuler: Ok. Also, wie können wir Kuler vielleicht als Ort verwenden, um fünf Farben zu nehmen und es in etwas Größeres zu erweitern? Also, zum Beispiel, schauen wir uns das Set genau hier oben an der Spitze an. Eigentlich ist es nicht schlecht. Es sind zwei gute Blues, zwei gute Grüns, so weiter und so weiter. Also, was ich tun werde, ist, dass ich Screenshot gehe. Ich bin eigentlich nur gehen, um einen kleinen Screenshot dieser Farben zu machen und dann kann ich gehen und schließen Sie den Browser und ich habe die Farbfelder direkt hier auf meinem Desktop. Nun, lassen Sie mich gehen und öffnen Sie dies in Photoshop und wieder, ich kann sehen, die Farben sind. Nun, was ich tun werde, ist, dass ich dieses begrenzte Set von Farben nehmen und es tatsächlich zu etwas Größerem erweitern möchte. Also, lassen Sie uns sagen, dass ich ein neues Dokument erstellen werde und ich werde sagen, dass dieses Dokument 600 mal 200 ist. 600 Pixel breit, 200 Pixel hoch und boom! Wir können so gehen. Nun, was ich tun werde, ist, dass ich das Blau auswählen und dann werde ich die Wahltaste gedrückt halten und das dunkelblaue Blau auswählen. Also, jetzt habe ich beide Farben in meinem Farbmustergeschäft thingamajig passiert . Dann, was ich tun werde, ist, zu diesem neuen Bild umzuschalten, das ich erstellt habe , und ich werde tatsächlich voran gehen und einen Farbverlauf machen, und wenn ich einen Farbverlauf mache, kann ich hier oben sehen , ich gehe von einer helleren Farbe zur dunkleren Farbe. Also, ich werde nur die Umschalttaste gedrückt halten und ich werde nur von einem Ende zum anderen ziehen, und so habe ich jetzt einen Farbverlauf erstellt. Und natürlich kann ich sagen: „Save for web“, und ich kann voran gehen und sagen: „Ich würde gerne ein GIF bitte.“ Und wie viele Farben möchten Sie vom Licht in die Dunkelheit übergehen? Sagen wir mal, ich wollte sechs Blues. Du könntest hier rüber zu Colors kommen und einfach sagen: „Hey! Gib mir sechs“, und sieh dir das an. Sie beginnen, die Bewegung von der helleren Farbe in die dunkle Farbe in sechs Schritten zu bekommen. So. Ich gehe weiter und klicke auf Speichern. Wir rufen das Blue an und speichern es auf meinem Desktop. Großartig. Gehen wir zurück zum Bild und lassen Sie uns dasselbe mit den Grüns machen. Also, ich werde auf das hellere Grün klicken, halten Sie die Option gedrückt und klicken Sie auf das dunklere Grün, schalten Sie zurück zu meinem Bild hier, gehen Sie voran und machen Sie das Verlaufswerkzeug erneut, und gehen Sie einfach voran und zeichnen Sie das Grün. Wieder werde ich für Web speichern tun. Vielleicht will ich diesmal keine sechs. Vielleicht will ich nur vier, also vier Schritte vom Licht bis zur Dunkelheit. Ich kann voran gehen und dies auf dem Bildschirm als green.gif speichern. Okay, und ich gehe weiter und schalte hier zurück zu unserem Bild und ich könnte einige andere Dinge ausprobieren, wie sieht es aus, wenn du von diesem hellgrünen zu diesem dunkelgrünen umschaltest? Welche Art von Farbe wird das produzieren? Und wenn ich voran und erstellen Sie den Farbverlauf und gehen Sie voran und tun Save for Web, wieder, Ich könnte dies vielleicht in acht Farben ändern und ich kann beginnen, um diesen Übergang von der helleren Farbe zu der dunkleren Farbe zu sehen. Also, lassen Sie mich das einfach als Trans für den Übergang speichern, wer weiß. Ok. Also, jetzt, da wir das fertig haben, kann ich weitermachen und alle Bilder schließen, die ich habe. Nun, ich denke, das ist einfach weiß. Richtig? Nein, es ist nicht nur weiß. Sehen Sie, was sie tun. Also, lasst uns das machen. Gehen wir weiter und nehmen Sie diese neuen Bilder , die ich gerade erstellt habe, und öffnen Sie sie tatsächlich wieder in Photoshop, okay? Oh! Ich wollte das nicht tun. Platzieren Sie weitere Dateien? Nein, danke. Tut mir Leid. Sie können auf Öffnen klicken und mich auf Blau, Grün und Trans klicken und auf OK klicken. In Ordnung. Also, jetzt wieder dieses Dokument hier ist 600 mal 200. Also, was ich tun möchte, ist ein neues Dokument zu erstellen, das 600 mal 800 ist. Ok? Und lass mich das Blau schnappen und es hier oben oben kleben. Lass mich weiter gehen und dieses Grün schnappen und es oben einfügen und dann gehen wir weiter und schnappen uns die Trans. Vielleicht wollen wir das benutzen und einfach weitermachen und das dort einfügen. Cool. Lassen Sie mich zur Hintergrundfarbe gehen, weil dies eigentlich nicht weiß ist und ich den Hintergrund mit dieser Farbe füllen lassen. Nun, hier habe ich fünf oben, vier in der Mitte und acht unten und dann meine weißliche Farbe hier. Also, jetzt, da ich diese alle in eine Art Master-Chip kompiliert habe, könnte ich eigentlich voran gehen und 32 No Dither sagen und es wird nur alle Farben finden, die darin sind. Es gibt keine 32, das sind alle Farben, die es finden könnte. Richtig? Also, dann kann ich voran gehen und auf master.gif klicken. In Ordnung? Also, jetzt habe ich ein GIF, das all diese Farben enthält , die ich aus Kuler extrahiert habe. In Ordnung? Also, lass mich weitermachen und den Rest dieser Dogies schließen, und jetzt kann ich das Colorpicking Tool starten. Ich kann voran gehen und sagen „Bild laden“. Ich kann voran gehen und auf master.gif zeigen. Wieder wollte es 32 Farben zu tun, aber sie sind nicht 32 Farben, so erzeugt es eine Reihe von diesen Schwarzen. Ich kann voran gehen und halten Sie die Wahltaste gedrückt und wieder, es tut mir leid, die Strg-Taste, und entfernen Sie diese zusätzlichen Farben, die wir nicht finden konnten. In Ordnung? Wow! Ja. Diese beiden hier am Ende oder funktionieren nicht für mich. Ich werde weitermachen und das entfernen. Also, es gibt einige zusätzliche Bearbeitung. Diese beiden Farben sind irgendwie okay, aber sie sind die Übergänge zwischen diesem Grün und dem Blau. Wer weiß es? Vielleicht fühle ich es, vielleicht bin ich es nicht. Aber der Punkt ist, dass Sie zu Kuler gehen können. Sie können mit fünf Anfangsfarben beginnen und dann mit einigen Farbverläufen um diese fünf Grundfarben tatsächlich zu nehmen und sie in eine viel größere Liste zu erweitern. Wieder könntest du hierher kommen und sagen „Farbliste anzeigen“. Sie könnten „Ansicht für die Verarbeitung“ sagen, „In Zwischenablage kopieren“. Ich könnte hier zu meiner Textdatei kommen und ein paar neue Farben in dieses Dokument einzahlen. Also beginne ich buchstäblich, diese Farbtabellen aus Bildern zu erstellen. Ich nehme vielleicht ein Bild, das ich finde und verfeinere einfach die Paletten, verfeinere die Paletten. Ich werde Textdateien haben, die vielleicht 10 oder 20 verschiedene Gruppierungen von Farben haben 10 oder 20 verschiedene Gruppierungen , die ich am Ende in und aus Programmen tausche, die richtig sind. Ehrfürchtig. Toller Trick. Internet High Five. Legen Sie Ihre Hand auf den Monitor. Also, was machen wir jetzt damit? Wir haben diese Farben aus Fotografien gestohlen. Wir haben diese wirklich großartigen Möglichkeiten zum Kompilieren von Farbtabellen gefunden. Jetzt werden wir diese Farben nehmen und sie in unsere Programmierung einbringen. Wenn diese Assets nach dem Zufallsprinzip auf dem Bildschirm generiert werden, bitten wir sie, eine Farbe aus dieser Farbtabelle auszuwählen. Wir sehen uns im nächsten Video. 27. HColorPool: Ok. Also, in Hype haben wir drei verschiedene Möglichkeiten, um mit Farbe umzugehen. In diesem Video werden wir mit HColorPool beginnen. Nun, was ich getan habe, ist, Sie können hier auf dem Bildschirm sehen, dass ich das Beispiel in H drawables die Hype_objects.zip verwende , eines der Drawables ist hRect. Hier können Sie Schritt eins sehen, bauen, build.pde. Nun, in dieser speziellen Datei, führen wir unser Setup aus. Wir laufen eine for-Schleife, die eine bestimmte Anzahl von Malen ausführen wird , und wir fügen sie nur zur Bühne hinzu. Wir machen einige Randomisierung für Größe, Rotation und Standort. Also, wenn Sie diesen Film testen, sollten Sie feststellen, dass es nur zufällig wirft eine Reihe von Sachen auf dem Bildschirm. Also, was ich an dieser Stelle tun möchte, ist, dies als Ausgangspunkt zu verwenden. Also, ich werde hier einen neuen Ordner namens HColorPool erstellen. Ich öffne diesen Ordner und in HColorPool werde ich nur diesen Schritt aus hRect holen und ihn nach ColorPool ziehen. Also, lassen Sie mich das einfach dort hinstellen. Also wieder, Ordner namens HColorPool darin, Schritt eins, build, build.pde. Auch wenn ich die Skizze ausführe, sollten Sie feststellen, dass es nur zufällig eine Reihe von Quadraten auf dem Bildschirm erzeugt. Also, lasst uns es so haben, dass die Füllungen eine Art zufällige Farbe bekommen. Nun, um dies zu tun, oben hier oben, werde ich nur HColorPool schreiben und ich werde es Farben nennen. Also wieder, dies ist eine Klasse innerhalb von Hype für die Arbeit mit Farbe. Lassen Sie uns also voran gehen und fügen Sie diesem Farbpool einige Farben hinzu. Also hier unten würde ich sagen, „Colors entspricht new hColorPool ();“, um die Zeile zu beenden. Jetzt, hier drin ist, wo ich ein paar Farben setzen werde. Also, gerade jetzt, nur zum Teufel, werde ich vier Grautöne einfügen und ich mag Farben als hexadezimal definieren , wie Sie sie aus dem Farbauswahlwerkzeug kommen sahen. Also, lasst uns ein Weiß machen. Also, ich sage FFFFFF, lasst uns ein Licht machen, sogar wie ein hellweißes Grau F7F7F7 und lasst uns ein weiteres hellgrau machen, ECECECEC, und dann machen wir ein dunkelgraues 333333. Also, die ersten drei sind sehr hell; weiß bis zu einem sehr hellgrau und dann ist das vierte tatsächlich ein dunkelgrau. Jetzt werde ich zwei Blues einlegen. Also, ich sage 009a58 und ich werde auch in einem anderen blauen setzen, 00616f. Um es zu beenden, werde ich in zwei orange Farben FF3300 und FF6600 setzen zwei orange Farben . Also, genial. Wir haben acht Farben in unserem Farbpool und behandeln es wieder wie eine Schachtel Buntstifte. Es wird da rauf gehen, zufällig eine dieser Farben auswählen und wir werden sie zur Füllung malen. Also, lassen Sie uns ein paar Änderungen vornehmen. Im Moment ist unser Schlaganfall tatsächlich diese orangefarbene Farbe, also werde ich den Strich tatsächlich in Schwarz ändern. Also, ich werde sagen 000000 und jetzt für die Füllung, anstatt tatsächlich eine Farbe zu setzen, beobachten, was ich tun werde, ich werde ein wenig Platz hier schaffen. Dann werde ich sagen: „Hey, Farben. Ich möchte zu.getColor ()“. Nun, was das tun wird, ist diese Linie, wenn es geht, um die Füllung zu setzen, es wird tatsächlich bis zu Zeile neun gehen, es wird zufällig eine dieser Farben auswählen und sie der Füllfarbe hinzufügen. Wenn ich nun diese Skizze teste, sollten Sie feststellen, dass alles wie erwartet funktionieren sollte, es hat einen schwarzen Strich gemacht und zufällig Farben aus dem Farbpool ausgewählt. Nun, das interessante Bit ist, dass jede einzelne dieser Farben eine gleiche Wahrscheinlichkeit hat, gewählt zu werden. Also, jede Farbe bekommt eine eins von acht Chance, ausgewählt zu werden. Also, was ich tun möchte, ist diese Idee der Farbe warten hinzuzufügen. Wie fügen Sie bestimmten Farben mehr Gewicht hinzu als andere? Also, lassen Sie mich Ihnen zeigen, wie das geht. Ich gehe weiter und schließe diese Datei, speichere und schließe dieses Dokument. In HColorPool für Schritt eins werde ich dies in einen Schritt zwei duplizieren. Nun, gehen wir weiter und öffnen Sie diese Datei wieder und stattdessen, was ich tun werde, ist, dass ich die Farben außerhalb des Farbpools herausnehmen werde. Ich werde voran gehen und das Semikolon Ende der Zeile setzen, gegeben ein paar harte Renditen nach unten. Was ich tun kann, ist, dass ich sagen kann: „Okay, erstellen Sie einen Farbpool und ich werde die Farben manuell hinzufügen und Ihnen sagen, wie viele von ihnen ich speichern möchte.“ Also, lassen Sie mich Ihnen ein Beispiel geben. Ich kann sagen.add und innerhalb von.add könnte ich sagen FFFFFF und ich könnte dies weiter tun, lassen Sie uns einige neue Farben auswählen. Machen wir EC, C3 oder Blues und unsere Orangen. Also, lasst uns dies in ECECEC ändern. Lasst uns dieses in CCCCCC ändern, lasst uns dieses in 333333 ändern, lasst uns dies zu diesem blauen 0095a8 ändern, lasst uns dieses in 00616f ändern. Dann gibt es natürlich zwei Orangen; FF3300 und FF6600. Nun, es ist ein wenig anders getippt, aber ich mag es, die Farbe auf diese Weise zu machen, weil ich die Bedeutung bestimmter Farben gegenüber anderen angeben kann . Auch wenn ich die Skizze testen würde, sollte sie absolut identisch aussehen , in dem Sinne, dass sie zufällig Farben aus dem Farbpool ausgewählt hat. In der Vergangenheit habe ich einige ziemlich lustige Dinge gemacht, bei denen ich sagen würde, weiß, weiß, weiß, weiß, weiß, weiß, weiß, weiß, weiß, weiß. Ich würde das tun, also gab es mehr Instanzen der Farbe Weiß als diese anderen Farben. Also, wenn es zufällig gehen würde, um zu wählen, fit wählte dieses eine es würde weiß und wenn es zufällig gepflückt und ich dieses bekommen würde, würde es weiß werden, und wenn es zufällig dieses eine ausgewählt würde, wäre es dunkelgrau. Also habe ich nur mehr Instanzen einer Farbe hinzugefügt, um zu sagen, dass ich wollte, dass sie mehr von diesen als eine andere auswählen. Nun, im Farbpool gibt es tatsächlich eine Abkürzung dazu. Also, wenn Sie den Farbpool auf diese Weise angeben, wenn Sie.add sagen, können Sie FFFFFF sagen, und dann können Sie Komma tun und dann angeben, wie viele von ihnen Sie wollen. Also, in diesem Fall habe ich gesagt, dass ich 20 von Weiß will. Also, wenn dies zufällig wählen würde, wenn es die Zahlen 0 bis 19 auswählte, würde ich tatsächlich wissen, dass es Farbe bekommt, Farbe von Weiß. Also jetzt, wenn ich meine Skizze testen, sollte Weiß die vorherrschende Farbe in diesem Stück sein, was in der Tat ist es. Also, ich kann jetzt beginnen, festzulegen, welche Farben ich mehr als andere zeigen möchte. Also zum Beispiel, wenn ich das loswerden würde und dann würde ich einfach sagen, okay, cool. Ich will 15 dunkelorange und fünf hellorange, und ich teste die Skizze, wieder sollten Sie sehen, dass die Orange ist überwiegend dominiert diese Skizze. Also, indem ich den Farbpool auf diese Weise spezifiziere, könnte ich tatsächlich markieren, welche Farben mehr passieren sollten als andere. Also, ich würde sagen, in dieser letzten Skizze, ich habe tatsächlich so etwas gemacht, wo ich sagen würde , es gab neun davon, es gab neun davon, und es gab neun davon. Mit für die Dreier habe ich nur drei von ihnen gemacht und für den Blues habe ich zwei gesetzt. So, Sie können sehen, dass ich viel mehr von diesen helleren grauen Farben angegeben habe und dann nur ein paar dunkle Grautöne und dann zwei der Blues über der Orange. Also, wenn ich die Skizze testen, sollten Sie sehen, dass Sie eine Menge von diesem hellgrauen passiert, ein wenig von dem Blau und dann die Orange. Weil ich es nicht angegeben habe, ist eine Zahl offensichtlich die seltenste der Farben. Also, wirklich großartiger Trick für die Verwendung von Farbpool, um jene Farben zu nehmen, die wir das Farbauswahlwerkzeug herausgezogen haben und um sie zu gewichten, um anzugeben, welche Farben mehr als andere geschehen. Nun, im nächsten Video, gehen wir auf die zweite Art von Farbklasse, die Pixel Colorist. An dieser Stelle würde ich Sie einladen, einige Bilder zu greifen, einige Farben zu stehlen, sie durch das Farbauswahlwerkzeug zu laufen und Farbpool zu verwenden, um Ihr Kunstwerk nach dem Zufallsprinzip durch die Farben zu färben, die Sie auf diesen Fotos extrahiert haben . Okay, das nächste Video ist Pixel Colorist. Wir sehen uns dort. 28. HPixelColorist: In diesem Video werden wir die Arbeit mit HPixelColorist abdecken und ich liebe diese Klasse wirklich. Das ist ein Trick, den ich von Eric Nowitski gelernt habe. Es verwendet ein Foto und die Farbanordnung, und Fluss, und Positionierung der Farbe auf einem Foto als Karte, um die Farbe zu stehlen und in das Kunstwerk zu ziehen. Ich gehe voran und erstelle einen neuen Ordner namens HPixelColorist und ich werde buchstäblich von vorne anfangen, genau wie ich es mit HColorPool getan habe. Ich gehe voran und öffne HYPE-Objekte, ich gehe nach Hrec und kopiere Schritt eins erneut. Lasst uns den Farbpool in Ruhe lassen. Es ist getan, also lasst uns neu anfangen. Wieder, wenn ich Schritt eins öffne, Build öffne, build_pde öffne, die Skizze testen. Sie sollten nur eine Anordnung von Partituren sehen. Nun, was ich mit PixelColorist tun möchte, ist ein externes Assets zu verwenden , also jedes Mal, wenn wir ein externes Asset innerhalb des Build-Ordners verwenden müssen, werde ich einen neuen Ordner namens Daten erstellen und innerhalb dieses Ordners ist wieder, wo Sie gehen, um jede Art von externen Vermögenswert zu setzen. Ein JPEG, eine Schrift, ein SVG so weiter und so weiter. Wenn ich zu Photoshop umschalte, können Sie hier sehen, ich habe dieses Seetangbild, ich habe eine Gaußsche Unschärfe von 10 drauf, so dass die Farben irgendwie vermasselt sind und ich werde voran gehen und sagen: „Speichern Sie für Web, JPEG, Maximum „, und ich werde es einfach direkt auf meinem Desktop speichern. Ich kann Photoshop minimieren, ich habe das Bild hier auf meinem Desktop und ich werde es in den Datenordner ziehen. Für dieses erste Beispiel möchte ich das Foto in den Hintergrund laden , damit wir irgendwie eine Vorstellung davon bekommen können, was passiert. Um das zu tun, werde ich hier nur eine kleine Abkürzung machen. Ich werde sagen, „H.add“, und in H.add, werde ich sagen, „New Himage“, und in Himage, werde ich sagen „kelp.jpg“. Wenn ich die Skizze teste, sollte sie in diesen Datenordner gehen, es sollte zum JPEG gehen und das JPEG tatsächlich in den Hintergrund laden, so dass ich jetzt sehen kann, wie es durch die Rechtecke kommt. Die Rechtecke sind ein wenig groß. Lassen Sie uns sie ein wenig kleiner machen, indem Sie die Größe zufällig ändern, 25 bis 75. Nun, das Quadrat wird etwas kleiner sein. Jetzt werde ich nach oben gehen und sagen: „HPixelColorist“, und wir werden es Farben nennen, genau wie wir es in HColorPool getan haben. Dann werde ich hier eine Zeile schreiben, die besagt: „Okay Farben, du bist gleich einem neuen HPixelColorist und du solltest kelp.jpg für Farbinformationen holen.“ Eine andere Sache, die ich auch tun kann, ist anzugeben, was ich möchte, dass es färbt. Also in diesem Fall werde ich sagen: „FillOnly“. Es wird also nur die Füllungen färben und nicht die Striche. Wenn ich hier zu meiner vier Schleife kommen würde, im Gegensatz zu ColorPool, werden wir GetColor nicht in unserem ersten Beispiel verwenden. In der Tat, ich gehe voran und behalte den Strich von einem, ich werde die Strichfarbe in schwarz 000000 ändern und weil es sagt, „Nur füllen“, kann ich diese Linie tatsächlich entfernen oder tatsächlich die Füllfarbe angeben. Das ist, weil hier unten unten in Zeile 23,werde ich sagen: „Hey Farben, ich möchte, dass Sie Farbe auf werde ich sagen: „Hey Farben, D anwenden “, so dass Zeile 23 wird durch alle D, die hier erstellt wurden, laufen, es wird gehen bis zu Zeile 11 und schauen Sie sich das JPEG und ziehen Sie die Farbe in die FillOnly.“ Jetzt bekommen wir eine bessere Darstellung dessen, was hier passiert , und es ist alles an den Anker gebunden. Wenn dies die Grafik ist und die Ankerstange in der Mitte ist, wenn sie zufällig auf dem Bildschirm positioniert wird, hat dieser Anker eine spezifische X-Achse und Y-Achse, also 100.100. Was passiert, ist in Zeile 23, wenn ApplyColor ausgelöst wird, es geht bis zu HPixelColorist, geht zum JPEG namens Seetang, geht auf die X-Position einer 100, Y-Position von 100, schaut auf das einzelne Pixel, das mit einem Wohnsitz von 100 bis 100 und sagt: „Oh, das ist, was die Farbe ist“ und zieht diese Farbe dann in die Füllung. Also tut es, dass jedes einzelne Mal, wenn eines dieser Dinge zufällig auf unserem Bildschirm wird. Es betrachtet die gleichen genauen Koordinaten auf dem Bild und zieht die Farbe in die Füllung. Gehen wir weiter und schließen Sie das und lassen Sie uns einige zusätzliche Builds hier ausarbeiten. Also, ich werde die Option ziehen Schritt eins auf einen Schritt zwei und ich werde voran gehen und build_pde öffnen und in diesem Beispiel werde ich nur Zeile neun entfernen. Im ersten zeige ich dir das Bild im Hintergrund, aber ehrlich gesagt brauchen wir es nicht zu sehen. Ich werde meine Größe wieder auf 1.5 ändern und ich werde meine Skizze ausführen. Also verwende ich das Bild für die Farbinformationen, aber ich brauche das Bild tatsächlich nicht zu sehen. Ich habe es nur im ersten Beispiel getan, so dass wir irgendwie eine Darstellung bekommen können wie seine Position die gleiche Farbe in dieser Position erfasst. Aber ehrlich gesagt brauchen wir das Foto nicht im Hintergrund zu sehen. Gehen wir weiter und machen Sie einen Schritt drei, und wenn wir einen Schritt drei machen, gehen wir voran und öffnen build_pde und im Fall dieses, möchte ich dies von FillOnly zu StrokeOnly ändern. Ändern wir die StrokeWeight auf drei und ich muss die Strichfarbe nicht angeben, aber ich werde eine Füllfarbe angeben und ich ändere die Füllfarbe in ein dunkelgrau, 111111. Nun, wenn ich die Skizze teste , sollte diese Linie neun nur die Färbung auf die Striche anwenden. Ich gehe voran und schließe diese Datei und ich werde Schritt drei machen und sie in einen Schritt vier kopieren und ich werde build_pde öffnen und im Fall dieser werde ich FillandStroke sagen. Wir halten den StrokeWeight auf drei, aber ich kann voran gehen und diesen Aufruf für FillColor entfernen. Wenn ich diese Skizze ausführe, kann man nicht wirklich sagen, dass tatsächlich eine Füllung und ein Strich gleichzeitig gefärbt werden. Wenn ich hier tatsächlich eine kleine Codezeile einfüge, wenn ich „Alpha (100)“ sagte und dann die Skizze lief, würden Sie sehen, dass tatsächlich eine Füllung gefärbt wird und ein Strich gefärbt wird und nur dadurch , dass alpha (100) bekommen wir das Gefühl, dass es zwei getrennte Dinge gibt, die gefärbt werden. Damit sollte ich vielleicht ein anderes Beispiel wie einen Schritt fünf machen und das wird das letzte sein, das ich hier mache. Lassen Sie uns also fortfahren und kopieren Sie diesen Schritt vier auf einen Schritt fünf. Ich werde voran gehen und die build_pde hier öffnen, und im Fall dieses werde ich den Code ein wenig ändern. Anstatt FillandStroke aufzurufen, übergebe ich es nur das JPEG zum Färben, und anstelle von Zeile 21, die die ApplyColor aufruft, werde ich das voran machen und löschen. Ich gehe voran und behalte den StrokeWeight von drei aber lasst uns das Alpha loswerden und sagen: „Hey, ich will etwas mit dem Strich machen und hey, ich will etwas mit der Füllung machen.“ Nun, im Falle dieser Datei, möchte ich, dass es die Farbe greift und sie in den Strich setzt und ich wollte die Farbe greifen und in die Füllung legen, aber mit der Füllung möchte ich Alpha anwenden. Also möchte ich nicht Alpha auf beide anwenden, ich möchte nur Alpha auf die Füllung anwenden. Nun, genau wie ein HColorPool, kann ich sagen, „colors.getColor“, und ich werde das kopieren und in die Füllung einfügen. Nun ging GetColor im HColorPool-Beispiel zu dem Array von Farben, das zufällig eine ausgewählt und nach unten gezogen wurde. Was wir hier tun müssen, ist GetColor im Fall von HPixelColorist, da es eine X-Koordinate und eine Y-Koordinate kennen muss , damit es auf dem JPEG nachschlagen kann. Ich werde das tun, indem ich sage: „GetColor“, aber dann bekommen Sie die d.x-Achse und erhalten Sie die d.y-Achse. Also, ich setze das D.X und das D.Y ein und ich haben vergessen, ein Komma zu setzen. Also d.x, d.y. Ich werde dasselbe für die Füllung tun. Ich werde sagen, D.x, D.y, außer auf der Füllung, ich werde sagen: „Ich will, dass das Alpha 100 ist.“ Also sage ich, „colors.get colour () “, und innerhalb davon sage ich: „Holen Sie sich d.x, get d.y“, und dann außerhalb dieses Funktionsaufrufs sage ich, „100 für das Alpha.“ Sehen Sie, was passiert, wenn ich diese Skizze ausführe. Wenn ich das durchführe , sind plötzlich alle Farben gleich. Der Grund, warum alle Farben gleich sind, ist d.x und d.y tatsächlich keinen Standort haben. Der Standort ist erst nach Zeile 19 festgelegt. Also gerade jetzt, es gibt nur 00 zurück, die zufällig alle die gleiche Farbe hat. Also, wenn ich diese Zeile 19 genau hier nehmen würde , wo ich tatsächlich die zufällige Position, die zufällige X- und Y-Achse, und tatsächlich verschieben, um das erste zu sein, so dass es die zufällige Position zuerst setzt. Wenn d.x und d.y jetzt auf den Zeilen 16 und 17 gefeuert wird, sind sie jetzt einzigartig x und einzigartig y. Also jetzt, wenn ich diese Skizze ausführe, sollten Sie feststellen, dass alle Farben jetzt einzigartig sind, aber nur die Füllung bekommt Alpha und der Schlaganfall ist es nicht. HPixelColorist wieder ein weiteres wirklich großartiges Werkzeug zum Abtasten von Farben aus einem Bild, und wieder muss dieses Bild kein Foto sein. Sie könnten Photoshop jetzt öffnen, Farbverläufe machen und beginnen, Farbpools zu machen. „ Ich will Rosa hier, ich will Grün hier“, und wenn wir dann zufällig unsere Komposition generieren, gibt es tatsächlich eine Struktur zu dem, was auf dem Bildschirm passiert weil wir das Diebstahl der Farbe von diesem speziellen definiert haben Foto. ColorPool, wirklich großartig. Geben Sie die Box mit Buntstiften, greifen Sie für diese Boxen Buntstifte. HPixelColorist stiehlt von einem Bild. Also, im Moment möchte ich, dass wir zum nächsten Video übergehen, das eine neue Klasse namens ColorField verwendet und ColorField wird es uns ermöglichen, radiale Farbverläufe im Raum zu definieren. Gutes Zeug. Sehen Sie sich das nächste Video an. 29. HColorField: Also, die letzte Farbklasse, mit der wir arbeiten werden, ist HColorField. Nun, hColor Feld wird wahrscheinlich am besten als das beschrieben, was Sie gerade auf dem Bildschirm sehen. Es ist eine Möglichkeit für uns, einen Punkt anzugeben und dann einen radialen Farbverlauf an diesen Punkt anzuhängen. Was passieren wird, ist, wenn ich zufällig Kunstwerke anhebe , wenn hier oben etwas passiert, an diesen äußeren Ecken, dann wird es schwarz gefärbt. Während es anfängt, sich nach innen zu bewegen, wird es von dunkelrot zu mittelrot zu leuchtend rot in der Mitte übergehen. Nun, das Spaß an dieser speziellen Klasse ist, wenn ich das hier drüben stellen würde und wenn ich dann eine Kopie erstellen und die Kopie hierher legen würde, würden Sie feststellen, dass es keine Interaktion zwischen diesen beiden Punkten gibt. Also, wenn ich dies zum Beispiel in ein Blau ändern sollte, würde wieder Kunstwerk hier blau gefärbt werden. Es würde langsam zu einem dunkelblauen Übergang. Schließlich würde es hier in der Mitte schwarz zurückkehren und dann seinen Weg in rot machen. Also, das Schöne daran ist, dass, wenn ich die Größe dieses radialen Farbverlaufs ändern sollte, also lasst uns das auf 600 mal 600 ändern und mich das auf 600 mal 600 ändern lassen. Beachten Sie, was jetzt passiert. Sobald sich die beiden Farben tatsächlich überlappen, mischen sie lila in der Mitte. Also, jedes Farbfeld wird genau das gleiche tun. Sie können Punkte im Raum angeben, angeben, welche Farbe in der absoluten Mitte vorhanden ist, den Radius dieses radialen Gradienten angeben und ob sich die radialen Verläufe überlappen, was passieren wird ist es tatsächlich zu beginnen, die Farben auf dem Bildschirm zu mischen. Also wieder, wir würden an dieser Stelle gelb werden. Es würde anfangen, zu einer Orange zu übergehen, schließlich seinen Weg zu einem Rot zu finden, so weiter und so weiter. Cool. Also, lasst uns voran gehen und einen neuen Ordner auf dem Bildschirm erstellen, der jedes Farbfeld genannt wird. Sie haben es erraten, wir werden gleich wieder in Hype Objekte gehen und wir gehen rechts zu hRect und kopieren Schritt 1 erneut. Liebe beginnt von Grund auf neu. Nun, lassen Sie uns voran und öffnen Sie hColor Feld, Schritt 1, bauen, build.pde, und nur um zu wiederholen, zufällig eine Reihe von Boxen auf dem Bildschirm zu generieren. Also, gehen wir weiter und gehen nach oben hier und sagen, HColorField ist Farben ist das, was wir es nennen werden und mal sehen, was ich hier tun werde. Nehmen wir an, lassen Sie uns das StrokeWeight loswerden und sagen wir, dass es NoStroke gibt. Also, wir werden nur Felder färben. Nun, die Füllfarbe, die ich auf schwarz setzen möchte, 000000 und Sie werden sehen, warum hier sehr bald. Jetzt gehen wir weiter und fügen unsere Farbe hinzu. Also, ich werde voran gehen und sagen, „colors = new hColorField ();“ Ende der Zeile. Nun, was ich hier tun werde, ist, mit HColorField müssen Sie angeben, was die Breite und Höhe des Feldes ist. Nun, in diesem Fall möchte ich, dass die Breite und Höhe nur die gleiche Größe wie die Skizze haben. Also, ich könnte 600, 600 eingeben oder ich kann einfach Breite, Höhe tun. In Ordnung? Ich werde hier tatsächlich eine Farbe anketten. Also, weil ich nicht will, dass dies eine lange Zeile ist, der Semikolon Ich werde mir nur eine harte Rückkehr geben, um es ein paar Zeilen fallen zu lassen und Tab zu verwenden, um zu kommen. Also, lassen Sie uns voran und fügen Sie eine Orange hinzu. Also, ich werde voran gehen und sagen, AddPoint. In dem Punkt, ich will, also habe ich meine Leinwand und ich möchte darauf hinweisen, in der exakten Mitte des Bildschirms zu sein. Also, um in die Mitte zu kommen, werde ich voran gehen und sagen, „Breite geteilt durch 2, Höhe geteilt durch 2.“. Also, die ersten Argumente sind die Position des Punktes. Sie können 100, 150, Sie können in der Breite teilen durch 2, Höhe geteilt durch 2 setzen. Nun ist das dritte Argument die Farbe, die Sie verwenden möchten. Also werde ich voran gehen und Orange verwenden. Also, ich werde sagen FF3300 und dann, das vierte Argument ist der Radius des Gradienten. Also, ich werde 0,3 sagen. Nun, ähnlich wie Pixel Colorist, können Sie angeben, was gefärbt wird. Also, ich werde voran gehen und sagen, FillOnly (), so. Jetzt wieder, auch wie Pixel Colorist, werde ich voran gehen und fügen Sie colors.ApplyColor zu d. okay. Also, dann sollte das durch alle zufällig generierten ds laufen , die hRect sind und ColorField zugeordnet werden sollten. Also wieder, es ist sehr ähnlich wie ein Pixel Colorist, weil es darum geht Farbe an einem bestimmten Ort im Raum zu sein. Also, der ultimative FF3300 befindet sich an einer x- und y-Achse der Breite geteilt durch 2, Höhe geteilt durch 2. Dann würde es langsam abstuft. Jetzt testen wir die Skizze und sehen, was wir bekommen. In Ordnung. Also, wir bekommen das Orange direkt in der Mitte und dann wird es langsam abgestuft, aber verläuft zu schwarz. Es wird zu schwarz gestuft, weil wir in Zeile 18 gesagt haben, dass die Füllfarbe 000000 war. Also, wenn ich das zum Beispiel in weiß ändern sollte; FFFFFF, mal sehen, was passiert. In der Mitte des Bildschirms würden wir die Orange bekommen und dann würde es langsam zu weiß übergehen. Also, das ist das Schöne an ColorField ist, dass Sie ein Farbfeld angeben, aber wenn es außerhalb dieses Farbfeldes fällt, dann geht es zu dem, was Sie sagten, die Grundfüllfarbe war, in diesem Fall auf Zeile 18, Ich habe gesagt, dass die volle Farbe FFFFFF war. Also wieder, es beginnt bei orange und übergeht dann langsam nach Weiß. Jetzt werde ich hier zurück zum Schwarzen umschalten. Auch hier können Sie das mit jeder Farbe tun. Ich könnte sagen, ein Blau, ich könnte sagen 0000FF. Wieder, wenn ich meine Movei testen würde ich diese Orange in der Mitte bekommen und dann würde es langsam zu blau übergehen. Kann ich einen Hallelujah bekommen? Es ist ein gutes Zeug, das ist gut. Das sieht gut aus. Bist du glücklich? Ziemlich glücklich. Ehrfürchtig. Gehen wir zurück zu Schwarz, 000000. Zurück zu Schwarz, das ist definitiv eine ACD-Referenz. Cool, Speichern, Schließen, können Sie einen Schritt zwei Option ziehen. Schritt zwei und erneutes Öffnen von Build PDE. Nun, in Schritt zwei fügen wir zwei Farbpunkte hinzu, aber lassen Sie uns einen auf der linken und einen auf der rechten Seite setzen. Also, für die links hier, werde ich nur sagen, dass die x-Achse Null ist. Also, das x, x wird Null sein, aber die Höhe ist immer noch, Höhe geteilt durch zwei, also wird es in der Mitte sein. Dann werde ich diese Zeile kopieren und ich werde sie einfügen. Auf diesem werde ich nur sagen, dass seine Position Breite ist. Also, jetzt ist es die Breite der Leinwand. Ändern wir das in einen blauen, 0095a8. Aber sieh dir an, was ich tun werde, ich werde den Radius an Punkt drei behalten. Ich werde voran gehen und hier testen. Auch hier, genau wie dieses Beispiel in Illustrator, habe ich Orange auf der linken Seite passiert, ich habe das Blaugrün auf der rechten Seite passiert, aber weil die Farben nicht miteinander interagieren, ist dieses Zentrum immer noch das Schwarze abholen. Also, ich werde voran gehen und speichern und schließen. Ich werde Schritt zwei zu einem Schritt drei speichern und ich werde voran gehen und bauen PDE. In diesem Beispiel werde ich nur den Radius ändern. Also, sagen wir, ich sage 0,5 und 0,5. Nun, das sollte groß genug sein, wo beide Farben tatsächlich miteinander interagieren. Also, wenn ich diese Skizze testen, sollten Sie bemerken, dass Sie die Orange auf der linken Seite, das Blaugrün auf der rechten Seite, und dann wieder, wenn diese Farben beginnen, miteinander zu interagieren, bekommen wir hier in der Mitte einen grauen Bereich . Lasst uns einen letzten Build hier machen. Also, ich werde speichern und schließen. Lassen Sie mich sparen, das ist ein Build vier und öffnen Sie Build PDE. Also, lassen Sie mich das einfach tun. Also, wir wissen, dass das orange ist. Oh, mein Gott. Josh, du bist erstaunlich. Das ist Rechtschreibung, Orange. Dies ist ein Blaugrün, und lassen Sie uns gehen und zwei weitere Farben hinzufügen. Also habe ich einen auf der linken Seite, einen auf der rechten Seite, machen wir einen oben und einen unten. Lassen Sie uns diese Farbe gelb auf der Oberseite machen und wir machen diese Farbe grün auf der Unterseite. Jetzt möchte ich sagen, mit geteilt durch zwei, und die Höhe ist Null, und die Farbe ist FFFF00. Also, das ist die Breite geteilt durch zwei. Also, es ist im Mittelpunkt der Breite, aber Null auf dem Y. Also bekommen Sie die auf der Unterseite, ich werde sagen, Breite geteilt durch zwei und Höhe. Nehmen wir an, dass diese Farbe 00FF00 ist. Sehen Sie sich das an. Ich habe 0,5, 0,5, 0,5, 0,5, 0,5, diese Radien sind groß. Also, wenn ich die Skizze hier teste, sollten Sie bemerken, dass alles sich mischt. Vielleicht habe ich zu viel Gelb passiert, zu viel Grün passiert, und ich will die einfach ablehnen. Also, ich kann den Radius ändern. Ich kann sagen, dass es 0,3 für das Gelb, 0,3 für das Grün ist. Also wirklich, meine Orange und Blaugrün sind die größeren Radien und meine gelben und grünen sind kleinere Radien. Jetzt noch einmal, wenn ich diese Skizze hier teste. Also, jetzt bekomme ich ein Gefühl dafür. Ich sehe einen kleineren Radius für das Grün, einen kleineren Radius für das Gelb. Cool. Ich möchte das ein wenig mehr ändern, ich möchte sagen, füllen und streicheln. Ich möchte die Füllung kopieren und einfügen. Anstatt keinen Strich zu sagen, werde ich sagen, Strichfarbe ist schwarz. Fügen wir auch ein Strichgewicht von zwei hinzu, und lassen Sie uns die Füllung mit einem Alpha von 100 machen. Jetzt, wenn ich diese Skizze speichere und teste, habe ich diese Farbpunkte angegeben. Ich färbe sowohl den Strich als auch die Füllung, aber nur die Füllung erhält dieses Alpha. Also, wirklich coole Technik, um Farbe im Raum zu setzen. Ich liebe es, dies mit der Verbindung in der Schaltbewegung zu verwenden. Sie können buchstäblich Farbpunkte im Raum setzen. Also, wenn ich zum Beispiel die Schaltbewegung verwende und ich mit der Hand male, kann ich tatsächlich Farben bestimmten Quadranten zuordnen. Also, Sie könnten einige Videos gesehen haben, die ich gepostet habe , wo ich nach rechts komme und es malt blau, Ich komme nach links es malt orange, ich komme nach oben, gelb, unten, grün. Also, ich mag es, Farbfeld zu verwenden, um Farben im Raum abzubilden. Also, wir haben drei wirklich tolle Farbklassen. Wir haben jeden Farbpool, wir machen hier nur eine kleine Zusammenfassung. Wir haben jeden Farbpool, wo wir sagen: „Hey, Schachtel Buntstifte. Das sind die Buntstifte. Wählen Sie diese Buntstifte aus. Dies sind die einzigen Buntstifte, die Sie verwenden können.“ Wir haben Pixelcolorist, der Farbinformationen von einem Foto abnimmt, aber dann haben wir auch Farbfeld, das radiale Verläufe im Raum angibt, und wieder, wir bekommen diese schöne schöne Mischung passiert. Jetzt sind wir an diesem Punkt mit Abschnitt fünf fertig, mit Farbe zu arbeiten. Wir gehen jetzt zu den Abschnitten sechs und sieben, die Layouts sind. Wir kommen also so nahe, wenn wir diesen gesamten Prozess und die Struktur an Ort und Stelle haben. Wir zeichnen einige visuelle Assets und geben sie an SVG aus. Wir arbeiten mit Farbe, also werden wir die Farbe zur Seite stellen. Dann gehen wir zu jedem Gitter-Layout und Shape-Layout, wo wir tatsächlich angehängt sind. Siehst du, das ist einfach zufällig. Wir hängen nur zufällig Grafiken auf dem Bildschirm an, aber warum haben wir dieses Artwork nicht, basierend auf einem Muster oder basierend auf einem bestimmten Layout, und beide Layouts werden uns helfen, das zu tun. Also haben wir fast alle Teile des Puzzles an Ort und Stelle. Wir werden visuelle Assets zeichnen, mit einer Farbbank arbeiten, die wir herausreißen, und dann mit Layouts arbeiten, um Muster auf dem Bildschirm zu generieren. Also, ich bin aufgeregt, weil wir der dunklen Magie nahe kommen. dunklen Magie sehr nahe zu kommen. Wir sehen uns im nächsten Abschnitt. 30. Einführung: HGridLayout: Lassen Sie mich Ihnen ein Beispiel geben. Ich bin in Linz, Österreich und ich esse mit ein paar Freunden zu Abend. Einer der Typen, mit denen ich zu Abend gehe, war sein Job beim Bild eigentlich, die Haare auf Sulley in Monster's Incorporated zu programmieren und wir sprachen über Zufälligkeit. Zufälligkeit allein, ist nicht besonders hübsch. In der Tat, wenn Sie tatsächlich Sulleys Haar in Monster's Incorporated randomisieren, würden die Haare in jede Richtung gehen und es würde keine Art von Muster oder Eleganz zu ihm geben. Innerhalb des Hype-Frameworks haben wir mehrere Klassen, um tatsächlich Layout zu generieren, zufälliges Layout zu erzeugen. Ok? Also, für diesen speziellen Abschnitt werden wir jedes Rasterlayout abdecken. Es ist also der einzige Zweck, Dinge in einem Gitter auszurichten. So denken Sie vielleicht an sich selbst: „Warum sollten wir ein Rasterlayout verwenden, um uns mit Zufälligkeit zu helfen, ein Rasterlayout scheint sehr strukturiert?“ Ja, das ist es. Aber wo wir anfangen zu mutieren ist, wie haben sich die Objekte nach dem Zufallsprinzip innerhalb der Zelle des Rasters gedreht? Wie skalieren sie nach dem Zufallsprinzip innerhalb der Grenzen des Gitters? Ich denke, was Sie viel zu diesem Gespräch finden werden, das ich mit dem Gentleman hatte, der Sulleys Haare in Monster's Incorporated programmiert hat, wir beginnen mit einer Basisstruktur und wir werden diese Grundstruktur randomisieren. Sie werden feststellen, dass eine Menge von diesem Zeug ästhetisch ansprechender sein wird, weil ich als Menschen denke, wir mögen keine Zufälligkeit, wir mögen kein Chaos, wir mögen Dinge, die bestellt werden, wir mögen Listen wir mögen Magnete auf unserem Kühlschrank und jede Zeile hat einen Artikel, den wir aus dem Lebensmittelgeschäft kaufen müssen. Wir mögen Struktur. Wir mögen es, dass die Dinge organisiert werden. Also, wie können wir diese Organisation nach dem Zufallsprinzip bestimmen? 31. HDrawablePool + HRect: In Ordnung. Willkommen zu Abschnitt 6, das H-Grid-Layout ist. Bevor wir jetzt anfangen, in die Layouts einzutauchen, gibt es noch eine letzte Sache, die ich mit Ihnen teilen möchte, und das ist dieser Code, den Sie auf dem Bildschirm sehen. Im Moment verwendet dieser Code auf dem Bildschirm eine Vier-Schleife. Vier Schleife läuft eine bestimmte Anzahl von Malen und es fügt dieses Asset. Jetzt ist das Problem mit diesem Code, dass Sie nur eine Sache anhängen. In Zeile neun heißt es, D ist neu hRect und das ist das einzige Gut, mit dem wir eigentlich malen. Aber was, wenn ich diese Idee machen möchte, wo ich mehrere Vermögenswerte habe? Ich gehe davon aus, dass wir viele verschiedene Kunstwerke zeichnen und viele verschiedene Kunstwerke in diese Komposition abbilden werden. Im Moment unterstützt dieser Code nur eine Sache, hRect. Um dies zu beheben, bevor wir in Layouts gelangen, werden wir etwas namens HDrawablePool abdecken und was HDrawablePool tut, ist einer Vier-Schleife sehr ähnlich. Es erlaubt uns, etwas eine bestimmte Anzahl von Malen zu betreiben, aber es erlaubt uns auch, die Kunstressourcen zu spezifizieren, die verwendet werden. Also, anstatt nur eine Sache, könnten wir tatsächlich auf fünf verschiedene SVGs oder eine HRect und eine H-Schleife verweisen. So können wir auf viele verschiedene Assets in HDrawablePool verweisen. Jetzt hat HDrawablePool eine Menge anderer Funktionen, wie wenn wir Animation machen würden, können Sie Dinge wie Asset Recycling tun, das wirklich großartig für den Speicher ist, Sie können etwas an den Bildschirm anhängen, etwas vom Bildschirm freigeben. Also HDrawablePool hat eine Menge Funktionalität, aber wir werden es nur sehr im Grunde verwenden und lassen Sie uns einfach eine kleine Schrittdatei hier durcharbeiten und wir werden ein Gefühl davon bekommen. Also, lassen Sie uns das auf dem Bildschirm halten, nur damit wir die subtilen Unterschiede hier sehen können. Also, ich werde einen neuen Ordner namens HDrawablePool erstellen, und ich werde diesen Ordner öffnen und offensichtlich innerhalb von HDrawablePool einen Ordner namens Schritt 1 erstellen, und innerhalb von dort werde ich einen Ordner erstellen genannt Build, und innerhalb von Build habe ich eine Build-PDE und eine Kopie von Hype PDE. Nun, diese Build-PDE Ich kopiere buchstäblich nur diese, die Sie jetzt auf dem Bildschirm sehen. Also, ich gehe weiter und öffne das, und ich werde nur ein paar der Bits hier löschen. Also, auf der linken Seite haben wir eine vier Schleife verwendet, auf der rechten Seite werden wir HDrawablePool verwenden. Jetzt werden Sie sehen, ich leere Setup, Ich setze die Größe h.init dies, Ich setze eine Hintergrundfarbe als glatte on line zehn ja ich weiß, ich möchte H.DrawStage tun. Also, lassen Sie uns voran und beginnen, einige Pool-Code zu schreiben. Also hDrawablePool und wir werden einfach diesen Pool aufrufen, und dann werde ich sagen, dass Pool gleich neuer HDrawablePool ist und hier ist, wo Sie angeben, wie viele Assets Sie malen möchten. Also hier in der vier Schleife haben wir 100 gesagt, also in Zeile acht werde ich HDrawablePool sagen. Du wirst 100 Vermögenswerte ziehen. Nun, etwas davon wird ein wenig abstrakt, aber lassen Sie mich einfach den Code schreiben und wir werden das klären. Lassen Sie uns also voran gehen und fügen Sie das Bit hinzu, das tatsächlich das verwendete Kunstwerk angibt und das Kunstwerk erstellt und das Kunstwerk angefordert wird, um gemalt zu werden. Also, ich werde voran gehen und sagen pool.auto zwei Stufen hinzufügen. Jetzt würde ich hier ein Semikolon setzen, und dann kann ich natürlich viele Ereignisse verketten. Aber wir werden so viel verketten, dass ich voran gehen und tun werde, was ich in all den Dateien gemacht habe, die dieses Semikolon ein paar Zeilen hinunter bringen und wir werden einfach anfangen, ein paar Sachen hinzuzufügen , die wir normalerweise nur alle in on string. Aber das wird so langwierig werden. Also das erste, was ich tun möchte, ist nur sagen.add und. add ist, wo ich angeben, was ich malen werde. Also, sagen wir einfach in diesem Fall neue hRect. Es ist Kapital R so. Das ist also eines der Dinge, mit denen ich malen möchte, ist ein HRect. Jetzt werde ich hier zu anderen Code-Bits ausspülen. Ich werde sagen, „On Create“, und dann werde ich sagen, „Fordern Sie alle.“ In Ordnung. Nun, es ist das On Create, das ich hier eine Menge Code ausspülen werde , also bleibe bei mir, aber das sind die drei grundlegenden Dinge, mit denen wir arbeiten, wenn wir sagen, Auto hinzufügen zur Bühne. Einer, mit wem malen wir? Also sagte ich: „.add hRect.“ Fordern Sie alle im Grunde sagt, geben Sie mir alle 100 von ihnen. Also, es ist diese Anfrage alles, was im Grunde alle 100 Dinge auf einmal auslösen wird , genau wie diese vier Schleife tut. Vier Schleife führt alle 100 Dinge auf einmal aus. Später, wenn wir Animation machen würden, würden Sie nicht die Anfrage verwenden, alles, was Sie einen Timer machen könnten, und dann könnten Sie die Erstellung der Assets mit einer Art Timer beschleunigen. Aber gerade jetzt wollen wir nur alles auf den Bildschirm werfen. Also, ich werde sagen, bitte alle. Wenn Sie nun alle Brände anfordern und es feuern wird, wissen Sie 100 Mal, dass es dies auf erstellen ist. Das passiert mit jedem einzelnen Ding, das auf dem Bildschirm gezeichnet wird. Also denke, dass auf erstellen wird ein 100 mal laufen. Also, es ist in der on create, dass ich im Grunde diesen Code hier von Zeile 17 bis Zeile 11 angeben möchte , wie die Art von Sachen, die die Eigenschaften, die auf einem hRect gesetzt werden. Jetzt werde ich sagen, dass dies auf create ein wenig Codestruktur hat und mich das einfach ausspülen lassen. Also, die hier erstellen, werde ich diese enge Paren ein paar Leerzeichen hinunterschieben, und lassen Sie mich nur etwas von dem Code ausarbeiten, den ich hier eingeben muss. Also, das On Create wird tatsächlich ein neuer HCallback sein und dann wird der Callback einige Informationen darin haben, und ich werde etwas wie öffentlicher Void Run und Object OBJ sagen. Und offene Klammer schließen Klammer. Jetzt in dieser öffentlichen Leere werde ich so etwas wie HDrawable sagen. D entspricht HDrawable- so schließen Sie Josh, also schließen Sie OBJ. Also, es ist jetzt diese Line14, also was passiert ist, ist, dass ein 100 Mal das auf Create feuert und innerhalb dieses auf Create haben wir diesen Callback. Dieser Callback erstellt eine Instanz unseres Drawable namens D, und wir sagen: „Hey, D ist gleich diesem zeichnbaren Objekt, das Sie hier in Zeile 10 angegeben haben , was zufällig ein neuer hRect ist.“ Jetzt, da wir diese Besetzung als D haben können wir anfangen, den gleichen Code zu verwenden, den wir hier gemacht haben. Also, ich kann das tatsächlich ein wenig Code hier nehmen und mir wieder ein wenig harte Renditen geben und es tatsächlich einfügen und ich würde sagen, d und dann setzen Sie das Strichgewicht so weiter Semikolon, um die Zeile zu beenden. Nun, es ist ein bisschen mehr Code als nur eine Vier-Schleife zu verwenden, aber es gibt viele andere Verbesserungen, die wir tun können, wenn wir alles auf diese Weise strukturieren. Lassen Sie uns diese Skizze ausführen und sehen, was passiert. Also, ich gehe voran und rette das. Ich gehe weiter und führe die Skizze aus und es sollte absolut identisch mit dem Vier-Loop-Beispiel aussehen . Also, Sie könnten sagen, wie gut Josh will ich wirklich einen Pool verwenden Sie ich bin mir nicht ganz sicher, die Antwort ist ja, und der Grund, warum ist, weil Sie anfangen können, Dinge wie diese zu tun, wo this.add ist, wo Sie angeben, womit es gemalt wird. Also, warum kopiere ich nicht einfach, dass ich ein anderes so ein anderes hRect einfüge, aber auf diesem hRect mache ich etwas wie Rundung und ich sage, dass die Rundung 10. Also im Moment zeichnet dieser Pool 100 Elemente, aber er wird zufällig eines dieser beiden hRect entweder ein hRect ohne Rundung oder ein hRect mit Rundung auswählen . Also, wenn ich diese Skizze testen würde, wenn Sie hier auf dem Bildschirm schauen, würden Sie sehen, dass in diesem Fall die hRect ohne die abgerundeten Ecken und diese mit den abgerundeten Ecken verwendet . Jetzt ist der andere Grund, warum ich HDrawablePool wirklich mag, genau wie Farbpool. Wir können tatsächlich auf diese Vermögenswerte warten, die verwendet werden. Also zum Beispiel, wenn ich mehr HRECTs ohne Rundung haben wollte. Ich könnte hierher kommen und Komma 20 sagen, und das würde bedeuten, dass es 20 Instanzen des hRect gibt , die keine Rundung haben. Also, wenn ich diese Skizze hier testen würde, sollten Sie feststellen, dass quadratische Ecken die Mehrheit sein sollten, aber niedrig und genau hier unten haben wir eine, die die abgerundete Ecke hat. Also, ich bevorzuge es, dies zu verwenden, weil wir genau die gleiche Art von Warten auf Assets in dieser Umgebung verwenden können . Jetzt im nächsten Video werde ich diesen einen Schritt weiter gehen und dies tatsächlich auf SVG verweisen. Gehen wir also weiter und schließen Sie dieses Video, gehen wir zum nächsten und ich nehme die gleiche exakte HDrawablePool-Funktionalität, aber wir binden es an unsere SVG-Assets, okay? 32. HDrawablePool + HShape 1: Es kommt wirklich an dieser Stelle zusammen. Wir werden mit HDrawablePool arbeiten und einige SVG-Assets darin anhängen. Also, hier sind sechs SVG-Assets, die einige nette Dreiecke verwenden. Hier ist Nummer 2 hier ist Nummer 3, hier ist Nummer 4, hier ist Nummer 5, und hier ist Nummer 6. Also, nur einige wirklich grundlegende Formen ausgearbeitet. Beachten Sie, dass dieses Kunstwerk 50 Pixel mal 50 Pixel beträgt. Also, diese kleinen Skizzen selbst sind, diese kleinen Vektor-Assets sind winzig. Sie sind 50 mal 50. Nun, was ich tun werde, ist, hier habe ich sie auf meinem Desktop, hier habe ich diesen Ordner namens HDrawablePool. Ich gehe weiter und mache den Schritt eins, den wir gerade abgeschlossen haben, und nehme das und ziehe es in einen Schritt zwei. Ich werde in Build gehen und ich werde einen neuen Ordner namens Data erstellen. Innerhalb des Data-Ordners werde ich diese externen Assets ablegen. Ich werde weitermachen und SVGs eins bis sechs ziehen und sie in diesen Datenordner ablegen. Nun, gehen wir weiter und öffnen uns, bauen PDE und beginnen, einige Anpassungen hier vorzunehmen. Die erste ist, hier arbeiten wir nur mit HWrecked. Stattdessen möchte ich mit diesen SVG-Assets arbeiten. Also, lassen Sie uns voran und ändern Sie dies einfach, um zu sagen, neue HShape und Sie können svg1.svg angeben. Ich möchte noch keinen Vermögenswert warten, also sollte diese Linie genau so aussehen. Nun, es gibt sechs davon, also lasst uns voran gehen und kopieren und zwei, drei, vier, fünf, sechs und modifizieren das in zwei, drei, vier, fünf, sechs. Also, jetzt wurde jeder Drawable Pool sechs externe SVG Assets angegeben, mit denen malen. Ehrfürchtig. Ich werde hier noch ein paar Anpassungen vornehmen. Ich werde HDrawable zu H Form eine H-Form Obj ändern. Jetzt werde ich nichts ändern. Ich werde alles halten, wie es war mit einer Spur, wo ich werde, um die Strichgewicht ein halten, der Strich und orange Farbe, die Füllung ein dunkelgrau, die Größe, zufällig 25 bis 125, nicht ganz sicher, wie das wird funktionieren, drehen Sie zufällige 360, Standort zufällige Breite, zufällige Höhe. Wenn ich diese Skizze ausführe, sollten Sie jetzt bemerken, dass HDrawablePool jetzt mit diesen SVG-Assets malt. Also, was auch immer Sie zeichnen, in welchem vektorbasierten Tool Sie möchten, können Sie beginnen, diese SVG-Dateien auszugeben und sie zum HDrawable-Pool hinzuzufügen, und genau wie der Farbpool hat jedes einzelne dieser SVG-Assets eine sechs Chance, gemalt zu werden. Jetzt werden Sie feststellen, dass keines der Styling wirksam wurde und der Grund dafür liegt darin, dass wir diese Codezeile nicht hinzugefügt haben, in der wir sagten: „Stil aktivieren und auf false drehen“. Also überschreiben Sie bitte das Styling in Illustrator und wenden Sie dieses Styling unten an. Strich von Orange und Füllung von dunkelgrau. Gehen Sie weiter und führen Sie diese Datei aus, und jetzt sollten wir das Styling innerhalb von Illustrator überschreiben und verwenden, was hier angegeben ist. Nun, wenn das der Fall ist, möchte ich noch ein paar Dinge hinzufügen. Ich habe festgestellt, dass die Verwendung von Sachen wie StrokeJoin of Round und mit StrokeCap von Round dazu neigen, mir bessere Ergebnisse für das zu geben, was ich auf dem Bildschirm ansehe, und dann, wenn ich dies tatsächlich wieder eine vektorbasierte -Datei am Ende dieser Klasse. Also, jedes Mal, wenn ich mit SVG arbeite, setze ich normalerweise meine Join und Caps auf Runde. Nun, gehen wir weiter und fügen einige dieser zufälligen Färbung hinzu, zum Beispiel, richtig? Also, wir haben HDDrawablePool funktioniert, wir haben zufällig einige unserer sechs SVG-Assets ausgewählt, lassen Sie uns voran und fügen Sie einige Farben hinzu. Oben an der Spitze, HColorPool Farben. Ich werde die Farben kopieren, die wir vorher gemacht haben, die diese Weiß waren, diese hellgrauen, dieses dunkelgraue, zwei Blues und zwei Orangen. Ich möchte die Strichfarbe in schwarz 000000 ändern, und ich möchte keine Füllung angeben, weil ich das von einem Farbpool für mich erledige. Also, ich kann hier runter kommen, und ich kann D.randomColors sagen, und dann kann ich sagen, hey colors.fill nur so. Jetzt, an dieser Stelle, sollte ich in der Lage sein, die Skizze, Syntaxfehler, fehlende Semikolon auszuführen . Ja, das ist absolut wahr, Linie 34, Boom Ende der Zeile. Versuchen Sie es noch einmal, Josh. Lauf. Super. Also, jetzt können Sie sehen. Oh, mein Gott. Es kommt total zusammen, oder? HDrawablePool ist der Kleber. Es ist das Ding, das all diese Stücke zusammenbinden wird. Also, Zeilen 13 bis 18 sprechen mit einem Haufen externer Vermögenswerte. Zeile neun, die einige Farben angibt, Zeile 34, die diese Farben einstellt, nur füllen. Aber was ich an HDrawablePool liebe, ist, dass Sie Asset warten können , wie wir es in HColorPool getan haben. Also, zum Beispiel, dieses Asset hier ist SVG6. Ich liebe es. Also, wir können hierher kommen und sagen, hey SVG6, gib mir 20 davon. Nun, wenn ich die Skizze ausführe, wirst du mehr SVG6 an den Bildschirm anhängen als die fünf anderen, richtig? Also, das ist der Schlüssel, weil, oft werde ich eine Reihe von Sachen zeichnen und eins ist der Schwerpunkt. Wie man einfach kompositorisch funktioniert wirklich, wirklich gut. Ich werde diese Art von Warten tun, damit ich angeben kann, dass dieses Asset mehr gemalt wird als die anderen. Die anderen unterstützen, aber vielleicht will ich nicht, dass sie im Mittelpunkt stehen. Also, es ist die Zeile 18, in der ich tatsächlich angeben kann, wie viele Instanzen dieses SVG hinzugefügt werden, ermöglicht es mir, die Menge der Dinge zu kontrollieren, die wir auf dem Bildschirm sehen. Also, genial. Ich werde das schließen. Wir werden das retten. Im nächsten Video werde ich einen Schritt drei machen, und ich werde Ihnen einige neue SVG-Assets zeigen , die diese Komposition sogar komplexer machen. Sobald wir das fertig sind, werden wir das organisieren. Weil wir gerade jetzt nur die Breite randomisieren, die Höhe randomisieren, und das wirft nur Dinge auf dem Bildschirm herum. Wie können wir eine Klasse wie Gitterlayout verwenden, um dies tatsächlich in einer Struktur zu organisieren? Großartig. Wir sehen uns das nächste Video. 33. HDrawablePool + HShape 2: Alles klar, mongolisches Nationalornament. Wir haben diese Seite gescannt, unglaublich, Haufen wirklich netter Sachen da drauf. Nun, Sie haben wahrscheinlich diesen Zeitraffer beobachtet, wo ich einen von ihnen gut gezogen habe, ich habe sechs von ihnen gezogen und hier sind sie, also hier und ich habe sie gerade als mongo1.svg benannt, hier ist mongo2.svg, mongo3, mongo4, mongo5 und mongo6. Sie sollten beachten, dass all dieses Kunstwerk 300 Pixel mal 300 Pixel ist, okay? Nun, dieses Kunstwerk ist offensichtlich viel detaillierter als die ersten SVGs, die wir gerade im letzten Video verwendet haben. Jetzt werde ich voran gehen und diese aus Illustrator schließen, hier sind sie auf meinem Desktop, ich gehe voran und speichere unseren Schritt drei, gehe in Build, gehe in Daten und ich werde diese svg1 bis sechs entfernen und ich gehe um voran zu gehen und in meine mongo1 bis sechs abzuladen. Dann werde ich meine build_pde öffnen und ich kann dies in mongo1 ändern und ich werde die Anpassungen hier für den Rest von ihnen vornehmen. Also haben wir Mongo2, drei, vier, fünf, sechs. In diesem Fall werde ich die Gewichtung abnehmen. Also, wieder, sie alle haben eine Chance, gezogen zu werden. Jedesmal, wenn ich etwas benutze, das super detailliert ist, bin ich ein bisschen nervös wegen Zeile 11, die sagt: „Hey zeichne 100 Dinge.“ Ich könnte die Verarbeitung abstürzen, ich könnte einen Fehler bekommen, der besagt, dass der Speicher leer ist, weil das eine Menge Zeug ist. Also, lasst uns versuchen, dies zu ändern, um 10 Assets zu sagen, nur um zu beginnen. Nun, die andere Sache, die ich ändern möchte, ist hier unten auf der Größe, denken Sie daran, dass das Kunstwerk 300 Pixel mal 300 Pixel innerhalb von llustrator ist. Also, vielleicht möchte ich sagen, dass die zufällige Größe etwa 50 von 50 bis 300 sein könnte. Also, ich weiß maximal, es ist seine ursprüngliche Größe bei 300 mal 300 und zumindest wäre es 50 mal 50, das könnte funktionieren, das könnte nicht funktionieren. Lassen Sie uns noch einmal die Skizze testen, um zu sehen. Ich denke, alles ist gut mit dem Universum, gehen wir weiter und führen Sie diese Skizze und sehen, was passiert. Also, an dieser Stelle kann ich anfangen, mit der Größe zu spielen. Also, in diesem Fall ist vielleicht 50 zu klein, schau dir diesen kleinen Kerl hier drüben an, den du kaum sehen kannst, also kann ich jetzt anfangen, Dinge zu tun, wie, gut 150 wären die Hälfte seiner ursprünglichen Größe und vielleicht will ich bloß gehen, vielleicht will ich gehen 400 oder vielleicht 150 Ich denke, ist zu klein, vielleicht 200, 400, so dass Weg 300 ist die Mitte der Straße, wir gehen 100 Pixel weniger und 100 Pixel mehr. Wenn ich die Skizze noch einmal ausführen würde, könnte ich sehen, wie sich die Dinge auf dem Bildschirm mischen. Also, cool lief es mit 10, ich kann das wahrscheinlich hoch, also lasst uns hierher kommen und sagen, dass der Pool 50 svg Assets hat, gehen Sie vor und führen Sie es aus und wir sollten sehen, dass der Bildschirm viel mehr mischt als zuvor. So cool, an diesem Punkt habe ich das Gefühl, dass ich mit HDrawablePool fertig bin, wir fangen an, diese Ideen zusammen mit HDrawablePool zu kleben , um anzugeben, wie viele Assets wir zeichnen, dot add, mit wem wir zeichnen, Haben sie ein Gewicht oder Präzedenzfall gegenüber einigen der anderen Vermögenswerte? Wir haben jeden Farbpool hier drin, also wird das Zeug zufällig gefärbt. Es ist jetzt an diesem Punkt, dass ich mich von einigen dieser nur Zufälligkeit auf dem Bildschirm entfernen und anfangen möchte , es ein wenig mehr zu strukturieren. Also, das nächste Video, wir werden jedes Rasterlayout in RhDrawablePool implementieren und beginnen, einige der Assets auf dem Bildschirm zu organisieren und zu sehen, welche Variationen wir kommen können. Nächstes Video, HGridLayout. Wir sehen uns dort. 34. HGridLayout: Also, dieser ganze Abschnitt bringt uns zu diesem Punkt und zieht HGridLayout. Also wieder, alle diese Teile des Puzzles fallen an Ort und Stelle. Also, ich werde einen neuen Ordner auf meinem Desktop namens HGridLayout erstellen und ich gehe zum HDrawablePool, Schritt 2 Beispiel. Im Beispiel für Schritt 2 werden die SVG-Assets mit 50 Pixeln von 50 Pixeln verwendet, die in der Natur Dreieck sind. Also, lassen Sie mich diesen Schritt 2 in HGridLayout kopieren und lassen Sie mich dies als Schritt 1 umbenennen und ich werde build.pde öffnen und wieder, ich habe meine sechs SVG-Assets innerhalb des Datenordners. Nun, hier ist der Code. Hier, ich werde hier ein paar Anpassungen vornehmen. Einer ist, ich werde die 20 von SVG sechs herausnehmen. Also, indem das beseitigt wird, hat jedes der Vermögenswerte eine Chance, gezogen zu werden. Nun, ich bin hinter der.add her, ich werde mir ein paar harte Renditen geben und ich werde einfach sagen, dass DrawablePool ein Layout hat , und die Art von Layout, das es angehängt hat, ist ein neues HGridLayout. Nun, es gibt einige Dinge, die wir angeben müssen, was ist; wo soll dieses Raster beginnen? Also, ich werde voran gehen und sagen, StartX ist Null und ich werde sagen, dass StartY Null ist. Nun, das nächste Argument ist, weil es ein Raster ist und weil ein Raster aus Zellen und Zeilen und Spalten besteht, wie groß ist der Abstand zwischen jeder dieser Zellen? Also, ich werde voran gehen und sagen, Abstand und ich werde sagen, 50,50, weil unser Kunstwerk 50 Pixel mal 50 Pixel ist, also sollte das ein perfektes Gitter bauen, wo jede Zelle 50 Pixel Abstand von einem anderen und demselben ist nach unten in die nächste Zeile. Nun, weil es ein Raster ist, gibt es Zeilen, es gibt Spalten, aber Sie müssen es eigentlich nur sagen , was die Spalten sind und in diesem Fall werde ich 11 sagen. Nun ist der einzige Grund, warum Sie Spalten angeben müssen, weil HDrawablePool eine Reihe von Assets hat, die gezeichnet werden. So,100 geteilt durch 11 würde Ihnen sagen, wie viele Zeilen das Raster haben wird. Es gibt also keine Notwendigkeit, Zeilen anzugeben, wir müssen nur angeben, wie viele Spalten wir wollen. In Ordnung? Nun, es gibt einige Dinge, die ich unten in D ändern muss. Zum Beispiel möchte ich keine Größe angeben, weil das Kunstwerk 50 mal 50 ist, lassen Sie es einfach 50 mal 50 anhängen. Also werde ich voran gehen und diese Zeile löschen. Ich baue hier ein Gitter, ich will noch keine Rotation sehen und das Letzte ist, ist diese letzte Zeile von.location. Wenn Sie.location entfernen, die die Zeile war, die alle Assets auf dem Bildschirm randomisiert hat, wenn Sie das entfernen, dann hat Layout Vorrang in HDrawablePool. Jedes Mal, wenn diese erstellt werden, dieses Layout und alle Anweisungen für die Struktur werden dieses Layout und alle Anweisungen für die Struktur dieses Gitters in die Schaffung von D geschoben, was unsere HShape ist. Mal sehen, was passiert. Also, ich werde diese Skizze ausführen und Sie sollten ein paar Dinge bemerken. Eins ist, dass unser Gitter genau hier endet. Nun, der Grund, warum das Raster genau dort endet, ist weil wir nur gesagt haben, dass der HDrawablePool 100 war. Also, wenn ich eigentlich hierher kommen und sagen würde, was ist 11 mal 11? Das wären 121. Wenn ich nun meine Skizze ausführe, sollten Sie feststellen, dass es sich um ein perfektes Raster, 11 Zeilen und 11 Spalten handelt. Also, 11 mal 11, sollte der Zeichenpool 121 Assets sein, um ein perfektes Raster zu machen. Nun, weil auf Linie 38 wir sagten, H.center, die StartX betrifft, StartY. Also, da das Kunstwerk 50 Pixel mal 50 Pixel beträgt, wenn der Anker bei h.Mitte der Mittelpunkt ist, dann bedeutet das, dass der Mittelpunkt bei 25,25 liegt. Also, wenn wir startX, startY bei 0,0 dann würde das bedeuten, dass das Kunstwerk 25,25 negativ auf dem X und negativ auf dem Y ist, also haben wir es hier von dieser Seite hängen. Also, eigentlich, was ich tun werde, ist, vorerst, werde ich nur H.center auskommentieren. Nun, wenn ich H.center auskommentiere und meine Skizze ausführe, sollte das Raster jetzt bei 0,0 beginnen. Nun, da das 50 mal 50 ist, haben wir ein wenig zusätzlichen Platz, wo ich eine weitere Zeile und einen weiteren Satz von Spalten setzen könnte , weil meine Skizze hier 600 mal 600 ist, aber stattdessen werde ich StartX ändern, StartY zu sein 25,25. Nun, indem Sie 25,25 tun, bedeutet nur, dass dies die Ausgangsposition der X-Achse und der Y-Achse ist. Also, jetzt bekomme ich dieses Gitter, das hier im Weltraum schwebt. Nun, da mein Kunstwerk 50 mal 50 ist, lassen Sie uns hier einige Tests durchführen. Lassen Sie uns für einen Moment so tun, als ob StartX Null war und StartY Null war und Sie könnten sagen, dass der Abstand 55 mal 55 war und das bedeuten würde, dass zwischen jeder der Zellen ein Fünf-Pixel-Puffer vorhanden ist, so dass ich sie ausräumen kann. Oder man könnte sagen, dass der Abstand 50 auf dem X und 60 auf dem Y ist. Also, das würde bedeuten, dass sie in jeder Zeile vollkommen in Ordnung sind , aber dann gibt es einen 10-Pixel-Abstand zwischen jeder Zeile. Also, Spacing und StartX und StartY ist, wo ich beginnen kann einige dieser Argumente zu ändern, um die Struktur meines Gitters zu ändern. Sagen wir dies zum Beispiel, sagen wir, ich sagte 25 für das X und 25 für das Y. würde bedeuten, dass jede Zelle 25 Pixel auf dem vorherigen überlappt. Vielleicht könnte diese Überlappung interessant sein, wer weiß. Also, lasst es uns wieder dorthin bringen, wo ich es will, das StartX 25 und StartY 25 ist und lasst uns den Abstand 50 und den Abstand 50 machen und uns weitermachen und unseren Film laufen lassen. Nun, wenn wir unseren Film laufen, wieder, bekommen wir dieses schöne, schöne Raster passiert. Jetzt, von nur dieser Basisstruktur, kann ich beginnen, die Schritte auf eine Reihe von verschiedenen Arten zu speichern und einfach zu ändern, um zu sehen, was passiert. Also, sieh dir das an. Lassen Sie uns fortfahren und speichern und schließen Sie dies und ich werde den Schritt 1 machen und es als Schritt 2 speichern. Wenn ich die build.pde öffne, könnte ich sagen: „Hey, für einen Moment möchte ich SVG nicht eins bis fünf sehen.“ Also, lassen Sie mich diese einfach auskommentieren und ich male nur mit SVG sechs. Ich gehe voran und führe meinen Film und wieder sollte es mein Raster von 121 Assets bauen , aber ich sehe perfekt SVG sechs den ganzen Weg über. Okay, gut. Aber was würde passieren, wenn ich zufällig gedreht werde? Jede dieser einzelnen Zellen um 90 Grad. Mal sehen, was passiert. Ich werde das sagen. Drehen, oder? Dann in der Drehung werde ich ganze Zahlen sagen, also ist das eine ganze Zahl, und dann werde ich zufällig (4) mal 90 sagen, richtig? Also zufällig (4) wird mir Null geben, eins, zwei, drei, richtig? Null mal 90 ist Null, 90, 180, 270. Also, ich bekomme alle vier Umdrehungen dieses Kunstwerks. Wenn sie nach dem Zufallsprinzip gedreht werden, lassen Sie mich diese Skizze ausführen und sehen, welche Ergebnisse wir bekommen. Sieh mal, was passiert ist. In Ordnung. Der Grund, warum das passiert ist, ist, weil Zeile 38, wir kommentiert.Anchorat (H.CENTER), was bedeutet, dass - Ich habe kein Stück Papier. Okay, das bedeutet, dass wir das Papier von hier drehen, von Null, Null und dann drehen wir es um 90 Grad und drehen es dann um 90 Grad, oder? Also, in diesem Fall vielleicht das.Anchorat (H.CENTER) ist genau das, wonach wir suchen aber lasst uns die Drehung auskommentieren und lasst uns die.anchorat (H.CENTER) zurücksetzen. Nun, wenn ich diese Skizze ausführe, weil ich sie zentriert habe, habe ich meinen Start X durcheinander gebracht und Y gestartet, weil ich sie erneut um 25 Pixel auf dem X und 25 Pixel auf dem Y durch Spriching.anchorat (H.CENTER) versetzt habe . Um das zu beheben, sollte der Start X 50 sein und der Start Y sollte 50 sein. Wenn ich das tue, sollte es das Gitter schön und zentriert Gitter zurück in die Mitte des Bildschirms mit ein wenig Puffer um die Außenseite legen . Cool. Nun, diese Drehung wird viel interessanter aussehen, weil sie jetzt um den Mittelpunkt schwenkt und jetzt, wenn ich meine Skizze ausführe, fängt man an, einige wirklich schöne Muster zu sehen, die aus diesem Kunstwerk entstehen, richtig? Sehr cool. Also, wieder, ich kann einfach anfangen, dies so viele verschiedene Möglichkeiten zu mutieren. Okay, verwenden Sie diese SVG mit diesen Zahlen, verwenden Sie diese SVG mit diesen Zahlen und es beginnt nur zu mutieren, zu mutieren, zu mutieren, zu mutieren. Also, lasst uns etwas anderes machen. Ich gehe weiter und schließe das, und ich werde das retten, und ich ziehe hier einen Schritt drei aus. Lassen Sie uns in Schritt drei versuchen, die Größe zufällig zu bestimmen, oder? Also, das Kunstwerk ist immer 50 mal 50, also was wäre, wenn ich die Größe des Kunstwerks in Schritten von 50. Nun, das würde in etwa so aussehen, wo du sagst. Größe, okay. Nun, ich möchte, dass es bei 50 Pixeln plus etwas beginnt, okay, und in diesem etwas ist, wo ich Integer setze, sagen wir zufällig (2) mal 50. Cool. Also, zufällige (2) wird zu Null oder eins zurückkehren. Null mal 50 ist Null und, aber Sie können keine Größe von Null haben, weil Sie nichts darauf sehen würden. Deshalb mache ich diese 50 plus am Ende. Also, zufällige Null mal 50 ist Null, plus 50 ist 50. Cool. Also wissen wir, dass es auf der kleinsten Ebene 50 mal 50 sein wird. Zufällig einmal 50 ist 50. Fünfzig plus 50 ist 100. Also jetzt diese Zeile 40. Arbeite mit mir hier, liebe mich, umarme mich. Diese Zeile 40 hier wird entweder eine zufällige 50 mal 50 oder zufällig 100 mal 100 auswählen. Cool. Jetzt, wenn ich meinen Film mache. Film. Hören Sie auf, Film zu sagen. Wenn ich diese Skizze ausführe, beginnt es jetzt zu etwas viel Interessanteres zu mutieren, weil ich tatsächlich die Größe des Assets von 50 mal 50 oder 100 mal 100 randomisiere, und wenn sie sich überlappen, all dies, Schau dir das an, das endet 100 mal 100, aber weil ich diese Zeilen mathematisch mit einem Raster innerhalb von Illustrator erstellt habe, obwohl ich mal zwei skaliere, werden die Zeilen tatsächlich übereinstimmen, was großartig ist. Nun, wenn ich sagen würde, dass ich wollte, dass es zufällig ist (4), würde das bedeuten, dass ich vier Größen bekomme, 50 mal 50, 100 mal 100, 150 und 200 mal 200. Wieder, wenn ich hierher kam und es auskommentieren würde, so dass ich alle sechs der Vermögenswerte benutzte, würde das nur bedeuten, dass dieses Kunstwerk sogar fremder wird. Ok? So wie so. Im Moment dreht sich alles um diesen Mittelpunkt, und denken Sie daran, dass, wenn ich diesen AnchoRat auskommentiere, diese Rotation ein viel anderer Sweep ist und wenn es ein viel anderer Sweep ist, dann wird das vielleicht funktionieren für mich besser auf dem Bildschirm. Also, diese Art von Ideen ist etwas, mit dem ich ziemlich viel gespielt habe, und ich möchte dir tatsächlich eine URL hier zeigen, wo ich meine Pinterest-Seite habe. Auf meiner Pinterest-Seite habe ich irgendwie mein gesamtes Design-Archiv hinzugefügt, und es gibt hier ein kleines Projekt namens Social Grid. Das Social Grid nehme ich diese eine Idee, diesen Code, den Sie hier haben, richtig? Also, lass es mich einfach finden, Bingo! Das ist SVG sechs mit der zufälligen Drehung um 90 Grad. Also, ich nahm diese eine Engine und mutierte alle Parameter, um zu versuchen, zu sehen, wie viele verschiedene Arten von Rasteranordnungen ich finden könnte, oder? Also, einige waren sehr einfach und dann einige würde ich die Rotation zufällig, die Skala und ich würde anfangen, diese wirklich, wirklich faszinierenden Muster zu bekommen. Was ist schön an der Serie ist, dass all dieses Zeug gerade jetzt nur schwarz und weiß ist, es gibt keine Farbe zu diesen Dokumenten hinzugefügt und nur indem wir Farbe hinzufügen, fügen wir einfach eine ganze andere Ebene zu der Komplexität dieser Muster. Also, ich habe gesehen, ein paar von euch sind Textildesigner, oder? Also, das sollten Bananen sein. Es bedeutet, dass Sie in Illustrator arbeiten können, diese Art von kleinen Texturen erarbeiten und dann HGridLayout verwenden um diese Struktur zu erstellen, aber innerhalb der Struktur zufällig zu bestimmen. Auch hier, im Fall dieser bestimmten Datei, ist das einzige, was ich randomisiere, seine zufällige Rotation und seine zufällige Größe, aber ich erlaube Layout, das Kunstwerk auf dem Bildschirm in einem sehr starren System, einem Gittersystem, zu strukturieren . Wieder, wenn Sie die Gelegenheit genutzt haben, auf meine Website zu schauen, hoffentlich haben einige von Ihnen das Zeug gesehen, das ich mit Libs Elliot in Toronto, Kanada gemacht habe , wo sie wieder diese Akte nimmt, die Sie gerade haben, und Zufällige Generierung dieser Gitter und dann Verwendung dieser Rasterinformationen, um tatsächlich Quilts zu machen und sie näht diese Quilts von Hand, wo es einfach ist, Geist geblasen, was unglaublich ist. In Ordnung. Also jedes Gitter-Layout. Wirklich großartiges Beispiel hier, so hoffentlich werden Sie die ZIP-Datei herunterladen, Sie werden einige dieser Schritte mutieren und herausfinden welche Art von Mustern Sie erstellen können, indem Sie einige dieser Zahlen ändern. Darüber hinaus können Sie beginnen, Ihre eigenen visuellen Assets innerhalb von Illustrator zu erstellen und eine endlose Reihe von verschiedenen Dingen zu erhalten. Zum Beispiel, hier ist eine perfekte Reihe von Sachen, die sich unter Sachen befindet, die ich für getan habe - oh, hier war ein Buchcover, das ich getan habe, Ziel hoch, Keep Moving. Auch hier verwende ich das gleiche genaue System, wo ich das Rasterlayout und nur einen ganz neuen anderen Satz von Geometrie verwende und das einem Gitter zuordnen, das super cool ist. Dann gab es noch einen, den ich getan habe. Lassen Sie mich einfach versuchen, es zu finden. Lass mich zu meinen Brettern gehen und ich will nach Orbit suchen. Da gehen wir. Was passiert, wenn Sie einige kreisförmige Formen mischen? Ok. Auch hier wird HGridLayout verwendet. Also, ich bin super aufgeregt zu sehen, welche Art von Assets Sie in Illustrator zeichnen und was passiert, wenn Sie anfangen, sie zuzuordnen, um diese Art von Arrangements zu finden. Nun, dieser Abschnitt ist abgeschlossen. Wir werden auf Abschnitt sieben gehen, der HShapeLayout ist, und Sie werden es verlieren, weil HShapeLayout erstaunlich ist. Also, wir sehen uns im nächsten Abschnitt. 35. Einführung: HShapeLayout: Ich werde Ihnen eine Menge Beispiele zeigen, die diese nächste Ästhetik verwenden. Dieses ist H-Form-Layout und ich liebe H-Form-Layer. Sagen wir mal, ich zeichne einen Blumenstrauß, oder? Also zeichne ich einen Haufen unabhängiger Blumen und dann, was ich tun kann, ist, dass ich tatsächlich einen anderen Vermögenswert machen könnte , der meine Hand ist. Was das Shape-Layout tut, ist, dass es die Zeichnung betrachtet und wenn es auf ein transparentes Pixel trifft, versucht es es erneut. Also, sagen wir, ich zeichne sechs Blumen und sagen wir, dass wir ein Programm schreiben, das sagt, ich möchte 10.000 Blumen zeichnen. Was passieren wird, ist, dass es zufällig beginnt Kommissionierung, bis es meine Hand trifft. Also, meine gesamte Hand wird tatsächlich aus all diesen kleinen unabhängigen Blumen bestehen, die wir gemacht haben, und ich kann tatsächlich anfangen, diese zufälligen Formen auf meiner Leinwand zu definieren und jedes Mal, wenn das Programm läuft, wird es sagen: „Oh, ich habe diese Formen. Ich habe diese Banken von Vermögenswerten“. Es gibt Anweisungen darüber, welche Arten von Banken von Vermögenswerten an welche Art von Formularen angehängt werden. Ob Sie es glauben oder nicht, dieser gesamte Druck wird tatsächlich von diesem einen Krieger erzeugt. Man sieht, dass er hier einen kleinen Gürtel hat, und wenn man sich das Muster anschaut, das entlang dieses Gürtels erzeugt wird, ist das hier genau richtig. Sie können sehen, dass diese Gürtelform genau auf dieser obersten Sache hier passiert. Hier, es ist wieder randomisiert. Du kannst den Gürtel sehen. Was Ihnen übrig bleibt, ist nicht mehr das ursprüngliche Ausgangsmaterial. Es ist nicht mehr dieser Krieger. Es ist diese Verschmelzung von Abstraktion, die für mich das ist, wo ich Schönheit finde, wenn ich etwas Vertrautes nehme und auf eine Weise remischte, wo es zu etwas ganz anderem wird. 36. HShapeLayout: Alles klar, Sektion Sieben. So toll, dass ich mich kaum eindämmen kann. Ich liebe dieses nächste Projekt. Hier ist, was ich tun werde. Wir haben gerade jedes Rasterlayout abgedeckt, Abschnitt Sechs. Wenn ich zu HGridLayout gehe und zu Schritt eins gehe, und ich gehe zu bauen, und ich gehe zu build_pde, und ich führe diesen Film aus, erstellt er ein Raster. Also, lassen Sie uns von dieser Datei arbeiten. Also werde ich einen neuen Ordner namens HShapeLayout erstellen, und innerhalb von HShapeLayout werde ich diesen Schritt eins kopieren. Also, HShapeLayout, ich kopiere Schritt eins, und lass uns voran gehen und diesen build_pde hier öffnen. Also, ein paar gute Sachen. Was macht HShapeLayout? Es sind Bananen. Was ich tun werde, ist mir meinen Film anzusehen, mein Film ist 600 mal 600. Also, ich werde zu Photoshop rocken und ich werde ein neues Dokument erstellen, das 600 mal 600 ist. Da ist es, und ich werde das Typenwerkzeug nehmen und ich habe Georgia Bold um 400 Uhr ausgewählt, und ich werde nur schreiben: „Hallo.“ Ich werde das auswählen und es so zentrieren. Nun, was ich tun werde, ist, Sie können sehen, dass ich zwei Ebenen hier in Photoshop habe, ich werde die Hintergrundebene verstecken. Also, es ist transparent, und ich habe diesen Typ, der rumhängt. Was ich tun werde, ist Save for Web, und unter Save for Web, werde ich zu PNG-24 kommen. Nun, das Schöne an PNG-24 ist, dass es Transparenz unterstützt, und so können Sie sehen, dass ich mein kleines Schachbrett im Hintergrund bekomme , weil PNG mit Transparenz umgehen kann. Ich werde dies auf meinem Desktop als shapeMap.png speichern. Cool? Cool. Fertig. Ich werde das minimieren, weil wir zu dieser Wissenschaft zurückkehren werden. Jetzt bin ich innerhalb des Ordners HShapeLayout. Ich bin in Schritt eins. Ich bin innerhalb von Build, und es gibt einen Ordner namens Data und das ist, wo wir alle unsere externen Assets ablegen. Also, ich werde kopieren oder ich werde shapeMap.png in den Data-Ordner verschieben. Nun, das ist ein böses Geschäft. Ich werde diese build_pde bearbeiten. Das erste ist, dass ich nicht mit all diesen Formen zeichnen möchte. In der Tat möchte ich nur mit svg5 zeichnen, und svg5 ist zufällig ein Dreieck. Also, da ist sgv5, ein schönes schönes Dreieck. Also, wir werden nur mit diesem Dreieck zeichnen, um zu beginnen. Ich werde ein paar Sachen hier drinnen ändern. Wir werden noch kein Layout machen, nur eine Sekunde. Wir werden den Stil aktivieren (false). Ich will eigentlich keinen Schlaganfall haben. Ich will keinen Schlaganfall haben, ich bin zu jung. Ich bin zu jung. NoStroke, meine nächste Klasse, wie Nerd Humor zu tun? Anker bei H.CENTER, das gefällt mir, und ich werde noch ein paar andere Sachen machen, aber ich werde warten. Nun, was macht ShapeLayout? Nun, was Sie tun können, ist, können Sie sagen, dass Layout das neue HShapeLayout entspricht. Jetzt müssen Sie ein Argument von.target übergeben. HShapeLayout möchte wissen, was verwende ich? Was verwende ich als Form? Ich bin hier aus Vernunft vage. Jetzt möchte ich definieren, was die Form ist und so, sage ich, .target (). Ich werde voran gehen und diese enge Klammer auf seine eigene Zeile setzen und das liegt daran, dass ich hier drüben Tab werde, und sagen, dass das Shape-Ziel ein neues HiMAGE ist und innerhalb des neuen HiMAGE werde ich den Namen unseres PNG sagen, also ShapeMap. png. Nun, gehen wir weiter und ändern Sie hier oben, hDrawablePool auf 100. Ich bin wirklich aufgeregt darüber. Was passieren wird, ist, dass HShapeLayout über das Ziel hinausgeht, und das Ziel ist die Form, an der Assets bleiben sollten. Also, wenn ich diese Skizze speichern und ausführen würde, was passiert im Fall des Shape-Layouts ist, das ist seltsam, was macht es? Nun, es schaut sich Ihr Bild an, es wählt zufällig eine Position aus, und wenn dieses Pixel transparent ist, wird es erneut ausgewählt. In der Tat nimmt es immer ein Leerzeichen auf dem Bild, bis es tatsächlich nicht transparente Pixel trifft. Wenn es nicht transparente Pixel trifft, bleibt das Kunstwerk tatsächlich daran haften. Also hoffentlich irgendwo explodieren die Köpfe. Weil es bedeutet, dass ich jetzt innerhalb von Photoshop Geste, Form und Text verwenden kann , und ich kann Formen zeichnen. Ich kann zeichnen, was ich will, und Artwork bleibt auf nicht transparenten Pixeln haften. Also, heilige Kuh, lassen Sie uns hier einige Änderungen vornehmen. Pool entspricht HDrawablePool (2000), ich möchte 2.000 Kunstwerke anhängen. Nun, unser Kunstwerk ist 50 Pixel mal 50 Pixel, also möchte ich es ein wenig runterbringen. Also, ich möchte es kleiner, damit Sie wirklich sehen können, dass es an den Typ haften bleibt. Also, ich werde sagen.size und innerhalb der.size, lassen Sie uns voran gehen und Integer und Zufall setzen. Nehmen wir an, dass es mindestens 10 Pixel mal 10 Pixel und maximal 30 Pixel mal 30 Pixel sind. Lassen Sie uns auch eine zufällige Drehung hinzufügen. Also, ich gehe voran und setze hier eine Drehung ein, und ich werde sagen (int) zufällig (360). Bist du bereit? Los geht's. Gehen Sie weiter und führen Sie die Skizze aus und jetzt bleiben 2.000 von svg5 an jeder Form haften, die Sie innerhalb von Photoshop machen. So, hoffentlich jetzt, fangen Sie an, die Möglichkeiten zu verstehen, wie ich eine Menge von meinem generativen Druck herstelle. Du weißt schon oft, ich werde sagen: „Nun, okay, ich will diese Art von Form hier und ich möchte zufällig eine Reihe von Sachen nur in diesem Bereich generieren“, und das Form-Layout wird meine zufälligen Vermögenswerte in diesem Bereich stecken. Also, sieh dir das an. Lassen Sie uns das speichern, schließen wir es, gehen wir weiter und speichern Sie einen Schritt zwei. Innerhalb von Schritt zwei werde ich build.pde öffnen. Ich werde hier wieder zu Photoshop umschalten. Ich kann weitermachen und das schließen. Eigentlich werde ich in Schritt zwei, Build , Daten, shapeMap.png erneut öffnen. Also, wenn ich das offen habe, schau dir das an, ich kann das löschen. Lasst uns ein paar Sachen ausprobieren, lasst uns ein Quadrat dorthin setzen, hier ein Rechteck setzen, lasst uns zum Ellipsenwerkzeug wechseln und einen Kreis zeichnen. Also, ich definiere nur einige Formen. Nun, wenn ich das wieder als PNG speichern sollte, und dieses Mal lassen Sie es in ShapeLayout, Schritt zwei, Build und Daten. Also überschreibe ich shapeMap.png, ersetze, ersetze. Wechseln Sie zum Unterschreibungstext 2, speichern Sie die Skizze und führen Sie sie aus. Sicher genug, es bleibt bei diesen Vermögenswerten. Wieder, Sie könnten sogar mit einem Pinsel herkommen, wenn Sie wollten, und Sie könnten diese Art von Geschäft machen. Speichern Sie als PNG, überschreiben, shapeMap.png, wechseln Sie zurück zu Untertext zwei, erstellen Sie Ihre Skizze, und wieder, Sie werden jetzt sehen, dass es tatsächlich zu dieser Form zugeordnet ist. Also, ShapeMap ist einfach brillant denn wenn du anfängst, einige der Dinge zu betrachten, die ich gemacht habe , gehen wir also auf meine Pinterest-Seite und schauen wir uns etwas an. Schauen wir uns diesen Kerl hier an. Wir machen diesen violetten hier. Also, wenn Sie sich das ansehen, schauen Sie sich diese kleinen weißen Kreise an. Merkst du, dass keiner der weißen Kreise hier unten ist? Warum ist das so? Nun, das liegt daran, dass ich in diesem Bereich eine ShapeMap definiert habe, genau so, und sagte: „Oh, okay hör zu. Ich möchte, dass nur Kreise an diesen Bereich anhängen.“ Also, wenn ich den Film führe, würde ich zufällig Kreise innerhalb dieser Positionen bekommen. Jetzt kann ich anfangen, Formen in meinem Code zu definieren und sagen: „Okay, ich möchte, dass Sachen diesen Formen zugeordnet werden.“ Wieder, ich ermächtige immer noch die Größe des Zufalls, aber es ist kontrolliert. Es ist ein kontrolliertes Szenario, das ich definiere , was wohin und all das geht. Wirklich, ich hoffe, dass Sie diesen Kurs wirklich genießen werden, denn HShapeLayout macht Spaß. An dieser Stelle können Sie also diesen Code verwenden, den ich gezippt und an diese Lektion angehängt habe und Sie können Photoshop wieder verwenden, um beliebige Formen zu definieren. Die Sache, die Sie sich merken sollten, ist, dass HShapeLayout nach nicht transparenten Pixeln sucht. Also, wenn ein Pixel transparent ist, wird es immer wieder auswählen, bis es ein nicht transparentes Pixel findet. Wenn es auf ein nicht transparentes Pixel trifft, bleibt das Bildmaterial tatsächlich an dieser Form haften. Also, super aufregend. Großartig. Gehen wir zu Abschnitt Acht und sprechen darüber, wie wir die HGridLayout-Dateien, die HShapeLayout-Dateien nehmen und wie wir sie in einige Assets exportieren, mit denen wir arbeiten können. Sind sie pixelbasierte Bilder? Sind sie vektorbasierte Bilder? Also gehen wir im letzten Abschnitt weiter, und dann werden wir über einige letzte Gedanken sprechen. Alles klar, wir sehen uns im nächsten Abschnitt. 37. Einführung: Ausgabedateien: Also, Sie befinden sich jetzt in der letzten Phase dieses Prozesses. Also, an dieser Stelle, was ich tun möchte, ist, diesen Inhalt aus dem Bildschirm und zurück in ein Format zu bekommen , mit dem ich arbeiten kann. Werfen wir einen Blick auf diese Komposition zum Beispiel. Wieder zufällig generiert, aber wieder an ein vektorbasiertes System ausgegeben. Ich wollte, dass diese Gegend sehr, sehr ruhig ist. Also, all diese kleinen kleinen Kreise, die zufällig in diesem Abschnitt generiert wurden, war ich in der Lage zu löschen. Sehen Sie sich die Nummer acht an, wenn Sie direkt nach unten schauen, gibt es einen Kreis, der perfekt in der Mitte mit der Acht ausgerichtet ist. Ist das nach dem Zufallsprinzip passiert? Nein, Josh hat das da gemacht. Dieser Kreis wurde wahrscheinlich hier drüben erzeugt und ich habe ihn ganz bewusst direkt unter die Acht verschoben. Also, während 90 Prozent davon zufällig generiert werden, gehe ich zu 10 Prozent rein und säubere tatsächlich Sachen, bewegte Sachen herum. Meine Hoffnung ist, dass Sie sich wohl genug mit Illustrator fühlen, dass Sie in diese vektorbasierte Umgebung zurückkehren möchten, so dass Sie diese Art von obsessiven zwanghaften Bearbeitung durchführen können. Ich meine, OCD. Wir verabreden uns. Sie waren aus. 38. letsRender/schlecht: Das ist es. Abschnitt acht, geben Sie sie Dateien aus. Also, wow, wir haben das alles an Ort und Stelle. Wir haben unser visuelles Vermögen gezogen. Wir haben gelernt, wie man sie auf den Bildschirm malt. Wir haben gelernt, wie man Farben aus Fotografien stehlt und das in unsere Arbeit zieht. Wir haben gelernt, wie man diese externen Assets in einem Rasterlayout anfügt. Wir haben gelernt, wie man diese Assets in eine Form anfügt. Nun, wie bekommen wir es aus der Verarbeitung? Ich denke an vier Videos, die ich noch zu tun habe. Fangen wir mit dem ersten an. Also werde ich einen neuen Ordner namens LetsRender erstellen. In Ordnung. Innerhalb von LetsRender gehe ich zu HGridLayout, und ich gehe zu Schritt 1, und ich werde build.pde öffnen, und ich werde Ihnen nur diese Datei zeigen. Dies ist derjenige, der HGridLayout verwendet. Nun, dieser Code, den wir schreiben werden, wird in allem funktionieren. Also, cool, ich sehe dieses Gitter auf dem Bildschirm, ich will es, ich will es nehmen. Nun, was ich tun werde, ist, dass ich den Schritt 1 aus HGridLayout kopieren werde und ich werde es in LetsRender kopieren. Nun, gehen wir weiter und öffnen Sie diese build.pde, und warum tun wir nicht, was die Verarbeitungswebsite uns sagt, dass wir tun sollten. Was da steht, ist, na ja, okay, wenn Linie 47 ist, wo wir die Bühne zeichnen, dann malen wir die Bühne, sparen wir, was passiert. Also, wenn Sie auf die Verarbeitungswebsite gehen würden, würde es SaveFrame sagen. In SaveFrame gibt es so viele verschiedene Bildformate, die Sie hier weitergeben können. Zum Beispiel könnte ich render.jpg sagen. Nun, wenn ich diese Skizze speichere und erstelle, schau dir an, was mit meinem Ordner passiert. Ich sehe, was auf dem Bildschirm passiert, und in meinem Ordner spuckt es render.jpg aus. Jetzt kann ich voran gehen und schließen Sie die Skizze, ich kann öffnen Sie die JPEG innerhalb von Photoshop, und sicher genug überprüfen, dass heraus, es gerendert, was ich auf dem Bildschirm zu sehen. Nun, es ist ein JPEG und JPEG hat eine gewisse Kompression. Wenn Sie wirklich anfangen, hier zu zoomen, ist JPEG nicht unser Freund. Also, es ist zu zäh Chewbacca für Josh Davis. Also, das gefällt mir nicht. Also, ich werde das aus Photoshop schließen, und ich gehe zurück und ich werde das ändern. Ich könnte render.png sagen, ich könnte sparen, ich könnte unsere Skizze bauen. Sie sollten bemerken, dass es eine render.png innerhalb Ihres Build-Ordners ausspuckt. Ich kann weitermachen und diese Skizze schließen. Ich könnte diese render.png innerhalb von Photoshop und viel besser öffnen. Es ist kein komprimiertes Format, wir bekommen keine Art von diesem seltsamen JPEG-Artefaktgeschäft, also ist alles gut mit dem Universum. Ich mag PNG, PNG ist nett. Aber es gibt einige Dinge, die ich nicht wirklich mag, was wäre es nicht toll, wenn es transparent wäre? Müssen wir wirklich den Hintergrund rendern? Im Moment ist das flach. Was wäre, wenn ich das rendern und es einfach als transparentes PNG rendern wollte? Wie Sie direkt aus dem Tor sehen können, tut es das eigentlich nicht. Nun, nur um Ihnen zu zeigen ob Sie wirklich keine Komprimierung wollten und Sie nur Rohdateien möchten, könnten Sie natürlich render.tif sagen und das wird eine TIFF-Datei ausspucken. Sie können auch TARGA verwenden Wenn Sie Ihre Skizze rendern, werden Sie natürlich sehen, dass sie auch eine TARGA-Datei ausspuckt. Also, das ist in Ordnung, aber es fehlt in einigen Bereichen. Also, was ich wirklich gerne tun würde, ist irgendwie zu erweitern. Also, was ich jetzt tun werde, ist, dieses Video zu stoppen, lassen Sie uns voran und starten ein neues, aber dieses Mal werden wir versuchen, die Dinge ein bisschen besser zu machen. Ausgang zwei, nächstes Video. 39. letsRender/besser: Ok. Also, jetzt möchte ich ein paar fortgeschrittenere Ausgabe machen. Also, lassen Sie uns diesen Schritt eins machen und ich werde nur den Schritt eins in einen Schritt zwei kopieren. In Ordnung. Innerhalb von Schritt zwei, innerhalb von Build, werde ich voran gehen und diese vorhandenen Bilder, die kopiert wurden, einfach abnehmen und ich werde build.pde öffnen. Jetzt werde ich ein paar Änderungen vornehmen. Im Moment haben wir nur Setup benutzt, in Ordnung. Was ich tun will, ist, dass ich mir ein paar harte Renditen gebe, um das Zeug hochzuziehen. Ich werde diesen SaveFrame loswerden, und im Moment waren wir gerade im Setup. Nun, wie sich herausstellt, würde ich gerne ein leeres Unentschieden einführen, okay? In der Leere Draw möchte ich diese H.DrawStage darin kopieren, okay. Nun, wenn Sie sich von vorher erinnern, ist ein Unentschieden eine Schleife. Es läuft immer wieder und immer und immer wieder. Nun, wir können das abbrechen, indem wir noLOOP sagen. NoLOOP wird die Draw-Funktion im Grunde einmal ausführen und dann herunterfahren, okay? Also, NoLoop wird diese Draw-Funktion herunterfahren, nachdem sie einmal ausgeführt wird. Jetzt möchte ich eine neue Funktion als void SaveHIRES einführen. Was ich tun möchte, ist, bevor ich NoLOOP anrufe, ist ich möchte SaveHIRES anrufen, okay? Beim Aufrufen dieser Funktion werde ich ihr eine ganze Zahl übergeben, oder? Das wird hier in einem Augenblick Sinn ergeben. Ich übergebe ihm eine Eins, okay? Hier unten in der Funktion werde ich sagen: „Oh mein Gott, da kommt eine Nummer rein.“ In Ordnung, also lass mich einfach int sagen, und dann nennen wir diesen ScaleFactor, okay? Also, int ScaleFactor. Nun, was ich tun werde, ist, dass ich ein wenig Code schreiben werde, der es mir erlaubt, einige Dinge über und darüber hinaus zu tun, was Schritt man tut. Ich werde voran gehen und PGraphics sagen, und wir nennen diese Einstellung ist gleich CreateGraphics, okay? Innerhalb von CreateGraphics werde ich Breite mal ScaleFactor sagen und dann werde ich Höhe mal ScaleFactor sagen und dann werde ich es einen Renderer übergeben. Also, ich werde JAVA2D sagen. Cool. Also erstelle ich eine PGraphics, die die Breite mal den ScaleFactor und die Höhe mal den ScaleFactor hat, aber ich übergebe ihm eine Eins. Also, wenn Sie hier nach oben kommen, ist unsere Skizze 600 mal 600, also 600 mal 1 ist 600 für die Breite und 600 mal 1 für die Höhe 600, oder? Also, hoffentlich werden Sie in der Lage sein, hier zu sehen, können Sie eine Zahl übergeben, um die Größe des Bildes, das Sie basierend auf einem ScaleFactor wollen, zu rendern . Also, wenn ich SaveHIRES zwei sagte, anstatt eine Grafik zu rendern, die 600 mal 600 ist, würde es tatsächlich unsere Grafik 1200 um 1200 rendern. Also, ich kann eine höhere Res-Version als das, was Sie tatsächlich auf dem Bildschirm sehen. Auf dem Bildschirm sehen Sie immer noch die 600 mal 600, aber in unserem Ordner, werden wir das Bild auf 1200 1200 ausgeben, wenn SaveHIRES die Nummer zwei übergeben wurde, aber wir werden dorthin gelangen. Nun, nachdem ich diese PGraphics definiert habe, werde ich einfach voran gehen und BeginRecord sagen und nach BeginRecord müssen Sie so endRecord haben. Innerhalb des BeginRecord werde ich ihm diese PGraphics von Anmietungen übergeben, okay? Dann werde ich sagen, dass Mitarbeiter skalieren sollten, was auch immer als ScaleFactor kam, okay? Also, wir skalieren das Kunstwerk basierend auf unserem ScaleFactor hier, aber wieder, gerade jetzt, ist es nur eins, so dass es genau die gleiche Größe wie unsere Bühne, Breite und Höhe haben wird . Dann werde ich hier eine kleine wenn-else-Aussage setzen. Also, lassen Sie mich einfach tun, wenn und dann lassen Sie mich ein anderes definieren und diese so ablegen. Innerhalb des if werde ich sagen, wenn heures gleich null ist, dann sollte es h.DrawStage tun, okay? Nun, wenn Mitarbeiter nicht gleich null sind, werde ich sagen, H.stage, dann werde ich unseren kleinen internen Kerl feuern, Paintall, und innerhalb von PaintAll, muss ich es einige Informationen weitergeben. Also, innerhalb von PaintAll, muss ich es die PGraphics übergeben. Es möchte auch wissen, ob es 3D verwendet oder nicht. Moment ist das noch in der Entwicklung, weil wir sehen wollen, ob wir dreidimensionalen Raum zu einer zweidimensionalen Grafik machen können , aber das ist eine Arbeit in Arbeit. Dann ist das dritte Argument das Alpha, das hereinkommt, okay? Innerhalb von PaintAll wird unsere PGraphics tatsächlich als hires bezeichnet. Wir verwenden nicht 3D, also ist es ein boolescher Wert, ich werde nur falsch sagen, und für Alpha werde ich nur den Wert eins übergeben, okay? Jetzt haben wir unseren EndRecord und nachdem wir mit der Aufnahme fertig sind, werde ich jetzt das Bild rendern. Wieder, JPG, nicht unser Freund. Vielleicht möchten Sie, wenn Sie ein Ziel wollen, aber ich möchte zu PNG. Also, ich werde sagen hires.save und innerhalb des Speicherns, ich werde sagen, bitte speichern Sie es in render.png, okay? Nun, ich grabe das, also schauen wir mal, was hier passiert. Ich werde voran gehen und sparen und ich werde die Skizze bauen. Hoffentlich haben wir keine Fehler. Tun wir nicht. Bumm. Es läuft und wir können sehen, dass es die render.png innerhalb unseres Ordners hier rendert. Also, von dem, was ich sagen kann, lassen Sie uns gehen und öffnen Sie dieses PNG, es sieht identisch mit dem Schritt eins aus. Ja, ist es, okay? Es ist absolut identisch. Es gibt jedoch tatsächlich einige versteckte Funktionalität hier. Sieh dir das an. Dies hat tatsächlich ein Bild 600 Pixel x 600 Pixel gerendert. Also, wenn ich dieses PNG lösche und diesen Funktionsaufruf frage , um Einstellungen mit einem Skalierungsfaktor von zwei zu speichern, wenn Sie Ihre Skizze speichern und erstellen, was an diesem Punkt passiert ist, ist es 600 mal 600, okay? Aber wenn ich das schließen würde und sich das PNG tatsächlich ansehen würde, würden Sie feststellen, dass es tatsächlich um 1200 ausgegeben wurde. Also, wenn ich hier zur Bildgröße komme, kann ich sehen, dass die Abmessungen bei 1200, 1200 gerendert wurden. Also, jetzt kann ich dieses Bild jede Größe rendern, die ich will trotz dem, was wir sehen, wenn wir die Skizze erstellen. Also, in der Lage zu sein, auf eine viel größere Größe zu rendern , ist etwas, das ich für äußerst hilfreich halte. Nun, da ist noch ein kleines bisschen hier und das ist die Frage der Transparenz, richtig? Es ist ein PNG, also werde ich hierher zurückkommen, ich werde dieses PNG löschen, und es endet, dass oben hier, ich setze die Hintergrundfarbe auf ein dunkelgrau, 20, 20, 20. Nun, du hast es. Sie können tatsächlich in den Hintergrund kommen und H.CLEAR sagen. H.CLEAR wäre ein transparenter Hintergrund. Also, wenn ich diese Skizze speichere und erstelle, sollte ich sehen, dass sie auf dem Bildschirm gerendert wird. Nun, ich sehe offensichtlich nicht mehr den Hintergrund von 20, 20, 20, aber wenn ich tatsächlich diese Skizze schließe und komme, um PNG zu rendern und dieses innerhalb von Photoshop zu öffnen, hat es dies tatsächlich mit Transparenz gerendert. Also, jetzt kann ich viele verschiedene Dinge in Photoshop ziehen und sie übereinander schichten, ich kann eine andere Hintergrundfarbe einstellen, ich kann anfangen, dies in einer Weise zu ändern, die ich denke, ist ein bisschen mehr robust als Schritt eins. Also, ich bin wirklich aufgeregt darüber, in Ordnung? Nun, im nächsten Video, machen wir einen Schritt drei, richtig? In Schritt drei, lassen Sie uns diese Ausgabe zurück zu Vektordaten. Also, Ausgang drei, wir sehen uns dort. 40. letsRender/AM BESTEN: Ok. Wir sind in LetsRender und wir werden einen Schritt drei rocken. Schritt drei für mich ist es, es ist der heilige Gral der Renderer. Wenn wir vektorbasierte Assets verwenden, möchte ich zu einer vektorbasierten Ausgabe zurückkehren. Also, lassen Sie uns das umsetzen. Ich werde Schritt zwei machen und ich werde es tatsächlich in einen Schritt drei kopieren. Ich werde den Build-Ordner öffnen. Ich werde render.png löschen und voran gehen und build.pde öffnen. Nun, ich werde einen Teil des Codes unten unten ändern, aber bevor wir das tun, gibt es ein paar Dinge, die ich oben tun möchte. Die erste ist, dass, wenn Sie wieder in ein vektorbasiertes Format rendern, Sie tatsächlich eine Bibliothek importieren müssen, um dies tun zu können. Was wir tun werden ist, ist ganz oben, wir werden einfach import processing.pdf.*; eingeben. Dies importiert also die PDF-Bibliothek der Verarbeitung, so dass wir wieder im Vektor arbeiten und als Vektor wieder herauskommen können. Nun, das zweite, was ich ändern möchte, ist Zeile acht, wo es H.CLEAR steht. Ich arbeite nicht mehr mit einem transparenten PNG, das ist vektorbasiert, also bin ich in Ordnung, den Hintergrund an dieser Stelle zu sehen. Also werde ich tatsächlich den Hintergrund zurück zu unserem dunkelgrau von 202020 setzen. Wenn wir nach unten scrollen, werden wir einige Änderungen hier vornehmen. Offensichtlich möchte ich das SaveHIRES nicht mehr nennen, ich möchte diesen SaveVector nennen. In den SaveHIRES haben wir einen Skalierungsfaktor übergeben. Das ist Vektor und weil es Vektor ist, spielt es keine Rolle, ob diese Vektordatei die Größe einer Briefmarke hat oder die Größe des Taj Mahal ist. Es ist Vektor, Sie können es auf jede gewünschte Größe skalieren, die Sie wünschen. Wir müssen also keinen Skalierungsfaktor übergeben, wir können einfach sagen, dass diese Funktion namens SaveVector ausgelöst wird. Also, lassen Sie uns voran und aktualisieren Sie die Funktion hier unten auf SaveVector. Auch hier kann ich dieses Argument für Skalierungsfaktor töten und jetzt werde ich unsere PGraphics modifizieren und es anstatt hires zu verwenden, denn wieder scheint mir das irgendwie spezifisch zu sein, dass Sie eine höhere Res-Version rendern als vielleicht das, was Sie auf dem Bildschirm sehen, lassen Sie uns voran und ändern Sie dies in PGraphics tmp. pGraphics temp ist gleich null. Nun, das nächste, was ich tun werde, ist zu sagen, dass tmp gleich BeginRecord ist, und innerhalb des BeginRecord werde ich sagen, ich möchte, dass Sie aufzeichnen, aber ich möchte, dass Sie in PDF aufnehmen. Wir werden also in ein PDF-Dokument ausgeben. Nun, das zweite Argument ist der Dateiname. Also, wir werden einfach render.pdf sagen. Jetzt brauche ich diese Zeilen auf 60 und 61 nicht, also kann ich voran gehen und diese löschen, weil sie wiederum auf die pixelbasierte Ausgabe bezogen haben, damit ich löschen kann. Diese if und else Anweisung ändert nur ein wenig, weil wir den Namen in tmp geändert haben, also werde ich sagen, ob tmp gleich null ist und hier unten auf dem sonst, h.stage () .Paintall und wieder gehen wir in diesem neuen Typ von tmp. Nun müssen wir einen Enddatensatz haben, aber wir brauchen nicht die hires.save („render.png“), da das Dateiformat, in dem wir speichern, wieder, hier in dieser Zeile 59 definiert ist. Wenn alles gut geht, sollte ich in der Lage sein, die Skizze zu speichern und zu erstellen, und wenn ich die Skizze erstelle, sollte ich auf dem Bildschirm 600 Pixel x 600 Pixel genau wie erwartet sehen, aber in meinem Ordner sehe ich eine render.pdf. Ich gehe voran und öffne diese render.pdf innerhalb von Illustrator. Also, hier sind wir innerhalb von Illustrator, ich kann die Ebenenpalette öffnen und, oh ich sehe, es erstellt automatisch eine Clipping-Maske. Also, wenn ich vorgehe und das öffne, solltest du bemerken, dass es wahrscheinlich einen Clipping-Pfad oben oben gibt, du könntest diesen Clipping-Pfad löschen, wenn du willst, du könntest all das aufheben und, oh mein Gott, wir sind zurück in ein Vektorformat. Sie können hier nach oben kommen und klicken Sie auf Ansicht, Umriss, wir könnten an diesem Punkt tanzen, weil es hier ist, wo es ist. Wenn wir vektorbasierte Assets verwenden, lassen Sie uns wieder in vektorbasierte Assets ausgeben, da all dies jetzt editierbar ist. Wenn ich nicht mochte, dass das ein Blau ist, dann wollte ich, dass es eine Orange ist, kann ich es ändern. Wo es viel schwieriger ist zu modifizieren, wenn wir das PNG rendern. Im zweiten Schritt Beispiel, da wir in ein pixelbasiertes Bild rendern, gefällt Ihnen das, was Sie sehen, besser, weil es viel schwieriger ist, diese Datei zu bearbeiten, sobald sie gerendert wurde und Sie sie in Photoshop geöffnet haben, aber wenn wir in Vektor rendern, kann ich hier reingehen und alle möglichen Änderungen vornehmen. Also, wenn ich das Strichgewicht nicht mag, könnte ich das Strichgewicht eines der Vektoren hier auswählen, ich sehe, dass es den schwarzen Strich ausgewählt hat und ich kommen könnte, um die gleiche Strichfarbe auszuwählen, und wenn ich wollte, könnte ich den Strich ändern auf fünf, wenn das ist, was ich suchte. Also, ich mag diese Idee, mit vektorbasierten Assets zu arbeiten , um eine Art zufällige Generierung anstelle der Verarbeitung zu machen, aber dann die Möglichkeit, es wieder in eine vektor-B-basierte Komposition zu rendern , so dass ich anfangen kann, einige Bearbeitung innerhalb von Illustrator. Lassen Sie uns voran und schließen Sie dieses Video, ich werde Ihnen ein letztes Video in Bezug auf die Bearbeitung zeigen . Wir sehen uns in Schritt vier. 41. letsRender/letzte Bearbeitungen: Weil es das ist. Ich kenne diesen Song eigentlich nicht. Aber das ist es, das ist es. Ich möchte dir etwas anderes zeigen. Ich werde HGridLayout öffnen. In HGridLayout speziell werde ich Schritt drei öffnen. Sieh dir das an, das ist derjenige, bei dem wir die Rotation randomisieren, und wir randomisieren die Größe, und es sieht so aus. Ich habe vorhin keinen Kommentar gemacht, weil ich es hier wirklich ansprechen wollte. Da Sie die Größe randomisieren, stellen Sie fest, dass sich die Strichstärke im gesamten Dokument geändert hat? Wie hier, wo es 50 mal 50 gemacht hat, sieht das Strichgewicht wie eins aus, und hier, wo die Strichgewichte ziemlich groß sind, ist es viel dicker geworden, weil der Strich tatsächlich mit dem Kunstwerk skaliert wird, während Sie es bei einer höheren Größe. Also, kümmert es mich? Vielleicht nicht anfangs, aber ich möchte das definitiv in Illustrator bearbeiten. Also, ich werde Ihnen ein paar letzte Tricks hier zeigen. Nun, das ist HGridLayout, und das ist Schritt drei, aber wir haben bereits einen Schritt drei innerhalb von LetsRender. Also, ich werde dies auf meinen Desktop kopieren, und dann kann ich diesen Ordner schließen, und ich werde dies tatsächlich in einen Schritt vier ändern, und dann werde ich Schritt vier in den LetsRender-Ordner ziehen. Jetzt möchte ich Schritt drei öffnen, und ich möchte auch Schritt vier öffnen, und der Grund, warum ich das tun möchte, ist, so dass ich einfach kopieren und einfügen kann mein Geschäft wie Rate oben erscheinen, dass Import Verarbeitung PDF. Ja, bitte. Ich werde das einfügen, und dann unten unten hier, habe ich diese schöne, sagen wir, Vektorfunktion. Also, ich werde bis zu dieser Speichervektorfunktion kopieren, und dann werde ich hierher kommen, und ich werde einfügen, wo es h.Draw Bühne steht. Also, cool. Ich kann jetzt diesen Schritt drei schließen. Also, ich bin in Schritt vier, und alles, was ich getan habe, ist das Rendern zu einer PDF hinzuzufügen. Also, wenn ich meine Skizze speichere und erstelle , sollte ich wieder etwas auf dem Bildschirm sehen, und ich sehe auch, dass es eine render.pdf ausgegeben hat. Also, was ich tun möchte, ist nur ein paar Dinge zu zeigen, tatsächlich in Illustrator. Also werde ich meine Skizze schließen, und ich werde fortfahren und die Build-PDE schließen, und ich werde dieses Rendering innerhalb von Illustrator öffnen. Jetzt sieht alles gut aus. Wenn Sie kommen, um Umrisse zu sehen, ja sicher genug, es ist alles Vektor, das ist genial. Es tut diese Clipping-Maske, also werde ich meine Ebenen öffnen, und sicher genug, es gibt den Clipping-Pfad genau dort, und ich werde voran gehen und sagen, Clipping-Pfad löschen. Wenn ich das tue, öffnet sich dieser Typ, ich wähle alle aus und klicke auf Gruppierung aufheben. Also, jetzt schaue ich mir nur die Vektoren und all ihre wundervolle Schönheit an. Nun, was ich tun werde, ist drücken Sie die A auf der Tastatur, die der Unterauswahlpfeil-Typ hier ist, und ich werde den Strich auswählen, und ich werde sagen, wählen Sie die gleiche Strichfarbe. Nun, das wird durchlaufen und es wird alle meine Striche finden , weil alle meine Striche die gleiche Farbe haben. Wieder, wenn ich Befehl H mache, um die Auswahl zu verbergen und ich komme hier zu streicheln, werden Sie sehen, dass das Gewicht leer ist, weil es so viele verschiedene Striche gibt , die wegen der Größenänderungen passiert sind. Also, ich könnte hierher kommen und sagen, dass ich möchte, dass der Strich eins ist, der die Art, wie dies in Illustrator aussieht, korrigiert. Ich möchte Ihnen einen anderen kleinen Trick zeigen, den ich am Ende in meiner Arbeit mache, und erzähle niemandem, weil das unser Geheimnis ist. Ich liebe diese Palette, die das Erscheinungsbild Palette ist, und ich wette, die meisten von Ihnen wissen nicht einmal, dass diese Palette existiert. Ich liebe die Aussehen-Palette, denn was Sie mit der Aussehen-Palette tun können , ist, während die Striche noch ausgewählt sind, ich kann hier sehen, cool , hey, Sie haben Striche ausgewählt. Sie verwenden einen Punkt ohne Füllung. Nun, Sie können tatsächlich die Strichebene auswählen und sie tatsächlich duplizieren. Also, ich werde es hier duplizieren, und jetzt habe ich zwei Striche, die tatsächlich übereinander liegen. Beide, ein Strichgewicht von eins und auf diesem unteren. Ich werde es auf ein Strichgewicht von drei setzen. Plötzlich bemerken Sie, dass alle Linien auf dem Bildschirm dicker werden. Nun, der Grund, warum ich die Aussehungspalette mag, ist, weil ich diese Aussehungspalette in Verbindung mit Transparenz aufnehmen könnte und sagen kann: „Hey, ich möchte, dass die Transparenz der drei Striche 20 Prozent beträgt.“ Sie würden bemerken, dass, wenn Sie diesen kleinen Schalter hier tatsächlich öffnen, es Ihnen zeigen würde, dass der Strich tatsächlich an drei Punkten mit einer Deckkraft von 20 Prozent geschieht , aber der Strich an einem Punkt ist überhaupt keine Transparenz. Wenn du hineinzoomen würdest, würdest du bemerken, dass es gerade schön und unscharf geworden ist, und ich mache das in jedem einzelnen meiner Drucke, denn wenn das tatsächlich auf Papier in einem meiner Großformatdrucker hier druckt, würdest du bemerken, dass es gerade schön und unscharf geworden ist, und ich mache das in jedem einzelnen meiner Drucke, denn wenn das tatsächlich auf Papier in einem meiner Großformatdrucker hier druckt, mit dieser 20 Prozent Alpha auf beiden Seiten des Strichs, macht das Kunstwerk nur auf eine schöne Art und Weise weich. Ich möchte Ihnen einen anderen Trick zeigen, bevor wir das Geschäft abschließen. Auch in Illustrator und das ist die Musterpalette. Also, ich werde hier zu Mustern kommen, und ich kann sagen, fügen Sie gebrauchte Farben hinzu. Also, wenn ich darauf klicke, sollte es durch mein Dokument laufen und tatsächlich alle Farben hinzufügen , die hier in meinem Dokument abkühlen. Nun, was ich tun möchte, ist mit den Farbfeldern, ich möchte sie tatsächlich auswählen und sie in eine Gruppe, neue Farbgruppe verwandeln. Also, hier unten, klicke ich auf den kleinen Ordner und die Farbgruppe und sage, okay. Also, das hat diese Farben genommen und es hat sie in eine nette kleine Farbgruppe gruppiert. Nun, der Grund, warum ich das tun möchte, ist, weil Sie tatsächlich alles innerhalb Ihrer Illustrator-Datei auswählen können, und die meisten Leute haben keine Ahnung, was dieser kleine Knopf hier macht. Es steht neu färben Kunstwerke. Also, Sie klicken auf diese kleine Schaltfläche, neu färben Kunstwerk und es tatsächlich zieht diese kleine Palette hier, und alle Farbfelder, die Sie in diese Musterpalette hinzufügen, werden sie automatisch magisch in diese Farbgruppen-Sache hinzugefügt. Also, ich werde das eigentlich auswählen, und ich könnte hierher kommen und einfach sagen: „Hey, skaliere die Spannung nicht so, wie es genau machen.“ Aber der Grund, warum ich diese Palette mag, ist, weil ich zufällige Farbe mag, und es endet, dass es hier diesen kleinen Knopf gibt , der sagt, zufällig die Farbreihenfolge ändern, und ich kann da sitzen und gehen, oh, ja, oh, ja, ja, ja. . Ich kann diesen Knopf den ganzen Tag lang drücken. Was es tut, ist, dass es durch mein Kunstwerk läuft und einfach die Farben ummischt. Also, es ist nur ein zusätzlicher Schritt davon, dass ich meinen Kunden viele verschiedene Variationen anbieten kann , indem ich einige Anfangsfarben setze, aber vielleicht diesen Trick verwende und diese Komposition eine Menge verschiedener Möglichkeiten ausgibt , aber mit verschiedenen Farbanordnungen. Plötzlich sagt jemand: „Oh, ja. Aber können wir eine der Farben ändern?“ Sie können tatsächlich einen völlig neuen Satz von Farben erstellen, und Sie können dieses gesamte Bildmaterial mithilfe einer völlig neuen Gruppe von Farbfeldern neu einfärben. Also, das sind zwei kleine Geheimnisse, die ich liebe es mit Illustratoren zu teilen, ist diese Wiederfärbung von Farben und dann dieser Strich, zwei übereinander zu setzen und den unteren zu haben, haben ein wenig Transparenz, so dass es die Kanten weich macht. Ok. Oh, mein Gott. Wir haben uns auf eine Reise von Kick-Hintern begeben. Einige Hintern wurden getreten. Ich konnte es spüren. Ich konnte spüren, dass viele Hintern getreten wurden, und ich bin so aufgeregt, dass du beschlossen hast, deine Zeit mit meinem Verrückten zu verbringen. Ich kann es kaum erwarten zu sehen, was ihr macht und Mädels. Ich denke, es gibt hier viele Techniken, die wiederum, dass das, was ich weiter nach Hause fahren möchte , ist , dass der Code egal ist, welche Farben Sie verwenden oder welche Kunstobjekte Sie verwenden. Sie können eine völlig neue Reihe von Zeichnungen mit Kettensägen und Kätzchen erstellen, und Sie können diese Komposition direkt hier mit Zugsägen und Kätzchen abbilden. Der Code ist vollständig Artwork agnostisch. Wir geben an, welche Assets verwendet werden sollen. Das bedeutet also, dass am Ende dieser Reise die Arbeit, die Sie erstellen, und die Arbeit, die Sie mit uns allen teilen, die diese Klasse genommen haben , völlig einzigartig für Sie sein wird, und der Grund, warum es , um einzigartig für Sie zu sein, ist, weil Sie zu verschiedenen Farben gezogen werden, als der Rest von uns sind. Sie sind in andere Formen getrieben als der Rest von uns und sogar mit diesen einfachen Bausteinen gibt es eine unendliche Anzahl von Möglichkeiten, die unsere Galerie treffen sollten, und ich freue mich, das zu sehen. Großartig. Ich hoffe, das ist einer von vielen Klassen. Ich würde gerne eine andere Klasse für Animation machen, und ich würde gerne eine dritte Klasse auf Hardware wie die Leap Motion und die Connect machen. Also, wenn dir diese Klasse gefallen hat, sag den Skillshare Leuten, dass ich der beste Lehrer bin, den du je in deinem ganzen Leben hattest und dass wir uns verabreden. Wir verabreden uns. Danke. Schlag mich auf Twitter. Schlag mich auf Facebook. Ich mag E-Mail. Ich lese E-Mail. Nochmals vielen Dank. Danke, dass du diesen Kurs genommen hast. Wir sehen uns später. 42. Abschließende Worte …: Wir sind zu diesem großartigen Ende der Ausgabe gekommen. Hier bin ich wirklich aufgeregt zu sehen, was ihr tut, denn hoffentlich habt ihr an diesem Punkt gesehen, eure Zeichnungen sind eure Zeichnungen, eure Farbauswahl sind eure Farbauswahl, und es ist diese Ausgabe, die zufällig ist geschieht innerhalb dieser Layoutklassen. Genau wie das Zeug, das ich dir zeige, völlig einzigartig für mich ist, und es wird von dieser Reise nach Istanbul angetrieben, ist es weg vom Computer, oder? Da ist diese Magie. Es ist nicht vor dem Computer, es geht darum, eine Reise nach Istanbul zu machen, durch den Großen Basar zu gehen und diese Zeichnungen zu finden und diesen Moment zu haben „Ich kann diese Zeichnung nehmen und ich kann es mir eigen machen. Ich kann es zu meiner eigenen machen, indem ich es neu zeichne und abstrahiere, so dass diese Computerprogrammierung verwendet wird , um diese Aufregung auf dem Bildschirm zu erzeugen.“ Dann wird es mit Farben bevölkert, die ich auf dieser Reise erlebt habe. Ich mache eine Wendung, und ich sehe Mosaiken mit bestimmten Farben, und ich mache ein Foto von diesen Farben, und ich werde die Farben aus dem Foto extrahieren. Also, diese gesamte Ausgabe wird vollständig von den anfänglichen Entscheidungen, die Sie treffen, angetrieben, was bedeutet, dass all diese Arbeit, die Sie in dieser Klasse erbrechen werden , für Sie spezifisch ist. Es ist spezifisch für die Bilder, die Sie angezogen werden, unabhängig davon, ob es sich um florale oder organische Stoffe handelt. Ich habe meine Blütenphase. Vielleicht wirst du deine Blütenphase haben. Dann habe ich viel zu viele Blumen gezeichnet und bin in die Geometrie gezogen. Musste mathematische gehen. Also, diese Art von Ästhetik, die Sie angezogen werden, wird Ihre Ausgabe zu definieren. Ihr Output, wieder, völlig einzigartig für Sie. Also, ich bin super aufgeregt, weil du uns alle mit deiner Großartigkeit blendest . Kann ich einen Hallelujah bekommen? 43. hexGrid/Randy Steward: He. Also dachte ich, es würde die Zeit dauern, einen Abschnitt neun namens Project Inspirations hinzuzufügen, in dem ich Dinge nehmen würde, die ich sehe, dass ihr auf die Studentengalerie postet, und vielleicht zeige ich euch einige Dinge, die ich tun würde. - Ja. Also, hier ist ein Beitrag, den Randy gemacht hat, und er macht diese Sechsecke, und nur wenn ich diese Sechsecke betrachte, dachte ich, ich würde Ihnen zeigen, wie man viele verschiedene Pools mit vielen verschiedenen Rasterlayouts kombiniert. Also, an dieses Video angehängt, wird es eine hexGrid.zip Datei geben, und schauen wir mal, ich hatte es in sechs Schritte zerbrochen. Also, schauen wir uns Schritt eins an. Schritt eins ist offensichtlich, ich habe eine Build-PDE, ich habe Höhe PDE, ich habe einen Datenordner, und innerhalb des Datenordners habe ich Hexagon SVG. Wenn wir zum Illustrator umschalten, können Sie sehen, dass ich gerade ein sehr einfaches Sechseck hier gemacht habe, und auch diese Kunst ist eine Breite von 50 und eine Höhe von 50. Richtig. Also, jedes dieser kleinen Sechsecke ist 50 mal 50. Ok. Also, lassen Sie mich Ihnen zeigen, indem Sie diesen Build PDE hier einige Tricks öffnen. Also, das erste, was ist, lassen Sie mich einfach die Schriftgröße ein wenig größer machen. Ok. Ist, habe ich den HDrawablePool-Code komprimiert? Okay, und Sie werden sehen, warum, denn wieder werden wir hier sechs verschiedene Pools hinzufügen. In Ordnung. Also, oben oben sagte ich dp1 für Drawable Pool eins. Ich sagte, ich möchte 88 Artikel zeichnen. Zeile 10 habe ich angegeben, dass ich ein Hexagon hexagon.svg verwenden möchte. Zeile 11 habe ich ein Rasterlayout erstellt, und ich habe gesagt, Okay, ich möchte, dass Sie auf 27 auf der x-Achse beginnen, 40 auf der y-Achse ist dieser Abstand 78, der Y-Abstand ist 51 und Spalten acht. Okay, und in diesem speziellen, sage ich in Ordnung, lassen Sie uns das Styling töten, das vom Illustrator kommt, lassen Sie uns den Strich töten, und fügen Sie eine Füllung aus dunkelgrau und legen Sie den Ankerpunkt an die Zentrum. In Ordnung. Nun, es ist also ein Pool, der Hexagon SVG verwendet, und wenn ich das ausführe, werden Sie feststellen, dass es ein Raster wie so erstellt. Jetzt werden Sie feststellen, dass die Zahlen, die ich gefunden habe, es mir erlauben zu schreiben, ein neues Raster innerhalb des Abstands zu setzen, das ist, was der Abstand ist, seine 78 Pixel, weil es so ausgerichtet ist, dass ich hier ein anderes Sechseck einfügen kann. Aber dieses Sechseck ist offensichtlich auf einem anderen Start x, und in einem anderen Start y, weil es nicht mit diesem speziellen Gitter ausgerichtet ist. In Ordnung. Also, lassen Sie uns zu HGrid zwei gehen, und in HGrid zwei oben, ändere ich jeden Zeichenpool, sagen wir, ich werde einen Drawable Pool eins haben, und einen Drawable Pool zwei. In Drawable Pool zwei sage ich okay, ich will 70 Elemente, ich verwende immer noch Hexagon SVG, aber Sie werden feststellen, dass ich einen anderen Start x habe ich einen anderen Start y, aber der Abstand beträgt immer noch 78 mal 51, und die Spalte ist sieben. Im Fall dieses Sechseck-SVG, es ist identisch mit dem oben, außer für einen Satz die Füllfarbe auf diese dunkelorange. In Ordnung. Also, jetzt haben wir zwei Drawable Pools, die die eine Sechseck-SVG verwenden. Also, wenn ich die Datei erstelle, habe ich jetzt ein zweites Raster und verwende einen zweiten Zeichenpool mit einem anderen Layout, aber ich kann es so platzieren, dass es den Abstand zwischen dem ersten Raster füllt, das wir erstellt haben. Ok. Nun, lassen Sie uns das einfach ein wenig weiter ausdehnen. Also, in Build 3, habe ich gesagt, okay, nun, ich will einen H Pixel Coloristen machen. Ok. Also, sieh dir das an. Ich sage H Drawable Pool, ich werde ein drittes hinzufügen, aber jetzt werde ich einen Pixelkolorist hinzufügen, richtig? Ich möchte Farbe von tatsächlich einem Farbverlauf Jpeg stehlen. In Ordnung. Also, da ist unser Sechseck und im Inneren von Photoshop habe ich ein Bild erstellt, das 600 mal 600, und ich machte einen Farbverlauf, der von weiß nach schwarz ging. Ok. Also, wenn wir uns Drawable Pool drei ansehen würden, ist es wieder identisch mit Drawable Pool zwei außer, denn ich habe ein paar Dinge geändert. Ich sagte, ich möchte, dass die Größe 40 von 40 statt seiner Standardeinstellung 50 von 50 sein soll, und dann in Zeile 36, sagte ich, hey, nehmen wir diesen Farbpoolverlauf und wenden Farbe nur auf die Füllung an. Also, jetzt, wenn ich diesen Film testen, habe ich jetzt ein drittes Raster, das oben auf dem zweiten Gitter ist, aber ich verwende jeden Pixelkoloristen, um von Weiß oben oben, in Richtung Schwarz, nach unten zu wechseln . Richtig. Also, jetzt habe ich drei ziehbare Pools, drei Gitter, und wieder kann ich diese Art von Stapeln fortsetzen. Also, lassen Sie uns HexGrid vier öffnen, und natürlich füge ich jetzt einen vierten Drawable Pool hinzu. Aber dieses Mal füge ich H-Farbpool hinzu, und im H-Farbpool habe ich die Farben, die wir im Grunde an all unseren Beispielbuilds gearbeitet haben. Also, einige Grautöne und zwei Blues und zwei Orangen, so weiter und so weiter. Nun, hier unten, kopiere ich genau die gleiche Sache von Drawable Pool drei. Also, ich kopiere Drawable Pool drei, benenne es als Drawable Pool vier um, wieder ist es 70 Hexagon SVG, aber ich änderte die Größe auf 20 statt 40, und dann sage ich, anstelle von CP eins, wenden Sie Farbe an, sage ich CP2 Farbe anwenden. Nun, dies sollte ein viertes Gitter auf das dritte Gitter setzen , das sich oben auf dem zweiten Gitter befindet, und wir bekommen so etwas. In Ordnung. Jetzt können wir sehen, dass es zufällig Farben auf dem vierten Raster wählt. Nun, wir haben dieses Gitter, das allererste, das wir neu erstellt haben, das immer noch grau ist. Also, warum duplizieren wir nicht das Gleiche, aber vielleicht umkehren wir es um. In Ordnung. Also, lassen Sie uns voran und öffnen H Raster fünf, und ein H Raster fünf oben oben, ich erstelle einen Drawable Pool fünf, und in Drawable Pool fünf kopiere ich tatsächlich Drawable Pool eins. Richtig? Weil zwei, drei und vier übereinander gestapelt sind. Ich will, dass fünf auf eins gestapelt werden. Wieder änderte ich die Größe auf 40, und ich mache den CP2, der der H-Farbpool ist. Also, wenn ich diese Datei ausführen würde, sollte es den Drawable Pool fünf auf den Drawable Pool eins setzen , den Sie hier in dieser Zeile sehen können, indem Sie nach dem Zufallsprinzip Farben aus dem Farbpool auswählen. Richtig. Also, wir haben es umgekehrt als dieser Stapel. Nun fügen wir das letzte Raster hinzu. Wenn Sie zu H Raster sechs gehen, und Sie bauen PDE öffnen, natürlich oben, habe ich einen Drawable Pool sechs erstellt, Drawable Pool sechs ist nur eine Kopie von Drawable Pool fünf, aber ich habe die Größe geändert auf 25, und ich habe tatsächlich den Farbverlaufs-Pixel-Coloristen angewendet Farbe verwendet. In Ordnung. Also, jetzt, Drawable Pool sechs ist oben auf Drawable Pool fünf, und Drawable Pool fünf ist oben auf Drawable Pool eins. Also, wir machen im Grunde nur Gitterstapeln. In Ordnung. Also, wenn wir jetzt schauen, können wir sehen, dass wir ein paar Sechsecke haben, die von der weißen Farbe bis hin zur dunklen Farbe gehen . In Ordnung. Durch die Verwendung dieser Struktur können wir also viele Drawable Pools stapeln, die alle mit demselben Hexagon SVG verwenden, aber nur ein anderes Layout mit verschiedenen Parametern verwenden, und so können wir dieses Layer-Stapeln erhalten. Nun, worin ich denke, es wird gut aussehen. Lassen Sie mich einfach auf die URL gehen hier. Skillshare. Nun, was ich denke, dass es in Randys Datei gut aussehen wird, anstatt eine SVG zu verwenden, wenn er all diese verschiedenen Mutationen von SVG verwendet, richtig. Dann würde diese Datei tatsächlich dieses neue Strukturmuster übernehmen, das meiner Meinung nach der Anfänger wäre. In Ordnung, ich werde das einpacken. Ich werde weiterhin völlig inspiriert von den Dingen, die Sie veröffentlichen, und ich habe einige andere Ideen für einige andere Projekt-Inspiration Remix Videos , die ich unter diesem Abschnitt posten werde. Alles klar, wir sehen uns später. 44. hypnoWheel/Luke L: Ok. Ich dachte, ich würde aufzeichnen. Hi, wie geht's dir? Wie geht es der Klasse? Gut? Ich dachte, wir würden ein weiteres Tutorial für Abschnitt neun machen, das Projektinspirationen ist. Das hier, Luke L., mag wirklich einige Bilder, die er hier einfällt. Aber ich dachte, ich würde das hier aufbrechen und damit einige Möglichkeiten zeigen. Also habe ich einen neuen Ordner auf meinem Desktop namens HypnoWheel erstellt. Ich habe gerade Lukes Projekt als Ausgangspunkt verwendet, aber ich werde die Vektoren ein wenig anders neu erstellen und wir werden es durchsprechen. Nun, das Schöne ist, dass Sie hier auf Lukes Link klicken können, und Sie können tatsächlich sehen, dass diese bestimmte Datei läuft. Es hat ein paar Dinge, die ich vielleicht ein bisschen anders machen würde. Also dachte ich, vielleicht würden wir das Gleiche tun wie vorher, einige Schritte unterbrechen, einige Möglichkeiten zeigen und von dort aus gehen. Nun, in Lukes Akte, gehen wir einfach weiter und schließen das. In Lukes Akte sind seine SVG-Assets tatsächlich Füllungen. Ich würde eigentlich keine Füllungen verwenden. Ich würde Striche benutzen. Lassen Sie mich erklären, warum. Wenn ich also zu Illustrator umschalte, können Sie hier sehen, dass ich die Assets neu erstellt habe, aber anstatt Füllungen zu verwenden, verwende ich tatsächlich Striche. Ich habe gerade vier SVGs gemacht. Das Kunstwerk ist 100 mal 100. Ich nahm gerade einen Kreis und teilte ihn in eine Reihe von Unterabschnitten auf. Also, wieder, wichtig, daran zu erinnern, dass das Kunstwerk 100 mal 100 ist. Auch hier habe ich vier Sample-SVGs. Also, zuerst schauen wir uns Build eins an. Dieses kleine Projekt wird fünf verschiedene Schritte haben, und ich werde einige verschiedene Funktionen präsentieren. Also, lassen Sie uns einfach über einige der Dinge sprechen, die Luke in seiner Datei macht, und wie ich es in meiner Datei ansprechen würde, und fügen Sie auch einige Funktionen hinzu. Also, Luke, ich spreche auch mit dir und anderen Leuten, die nur zuhören. Das erste ist, dass Sie anstatt in Ihrer speziellen Datei Weiß mehrmals kopieren, vergessen Sie nicht, dass Sie im Farbpool Farbgewichtung hinzufügen können, indem Sie die Farbe angeben und dann angeben, wie viele Instanzen von die Farbe, die Sie wollen. Anstatt Weiß, Weiß, Weiß, Weiß, Weiß, Weiß, Weiß, Weiß, Weiß, Weiß, Weiß, Weiß zu kopieren und einzufügen , können Sie Ihren Farbpool auf diese Weise definieren. Hier sehen Sie, dass ich gesagt habe: „Okay, ich will ein Dunkelgrau.“ Ein Mittelgrau gibt mir sechs von ihnen, ein helleres Grau gibt mir vier von ihnen, und ein helleres Grau gibt mir zwei von ihnen. Also, wieder kann ich mich auf diese Weise auf die Farbgewichtung konzentrieren. Jetzt habe ich noch ein paar andere Sachen zu dieser Datei hinzugefügt. Hier sind meine vier SVGs. Denken Sie daran, dass es Striche sind, keine Füllungen. Warum ist das so? Nun, das erste, worüber ich sprechen möchte, ist die Verwendung von Skala im Gegensatz zur Größe. Nun, in einigen der Beispiele, die wir im Laufe dieses Kurses gemacht haben, wurde die Größe festgelegt. Einstellung der Größe ist, wenn Sie wie, okay, ich möchte, dass die Breite 100 ist, und ich möchte, dass die Höhe 100 ist, oder ich möchte, dass die Breite dies ist und die Höhe so ist. Der Maßstab ist, der Maßstab basiert auf der ursprünglichen Größe des Bildmaterials, die von Illustrator übergeht. Also, ich sage, dieses Kunstwerk von Illustrator zu ziehen. Das Bildmaterial in Illustrator hat bereits eine festgelegte Breite und Höhe. Was ich tun möchte, ist die Skala zu ändern. Die Skalierung ist ein Prozentsatz. Also, 0,5 wäre 50 Prozent kleiner. Eine Skala von zwei wäre 200 Prozent größer. Also, wieder, überprüfen Sie diese Datei, in der ich Maßstab im Gegensatz zur Größe verwende. Also, in Zeile 38, sage ich: „Nun, okay, ich will eine zufällige Skala setzen.“ Ich sage an der Basis, es sollte eins sein und dann eine zufällige 16-Zahl auswählen und in Schritten von 0,3 springen. Sie werden in einem Moment sehen, was das macht. Innerhalb des Zeichenbaren, aktiviert Stil false. Also habe ich den Anker in der Mitte gesetzt. Ich befestige es an der Mitte des Bildschirms. Anstatt Punktgröße zu verwenden, verwende ich dann Punktskala und übergebe diese zufällige Skala, die ich in Zeile 38 eingerichtet habe. Ich benutze keine Füllungen. Also, ich gehe voran und sage keine Füllung. Was ich tue, ist, dass ich mit dem Schlaganfall spiele. Nun, eine der Fragen, die Sie gestellt haben, ist, wie kann ich etwas anbringen, aber alles haben, um das gleiche Gewicht zu haben? Also, wieder, aus diesem Grund würde ich lieber Strich als Füllung verwenden , weil Sie in Zeile 47 sehen können, ich kann StrokeWeight sagen, beginnen mit einer Basis von 10, aber dann multipliziert eins geteilt durch RanScale. Was passiert, ist, das Kunstwerk nach oben skaliert, skaliert es das StrokeWeight nach unten. So, so scheint es, dass die StrokeWeight tatsächlich das gleiche Gewicht ist , egal welche Größe, ob es in der kleinsten in der Mitte oder die größte auf der Außenseite. Zeile 51, Ich setze eine RandomColor und auf den Zeilen 55 bis 57, setze ich eine RandomSpeed für HRotate. Hier sage ich, dass, wenn zufällige Picks Null ist, geben Sie es eine Geschwindigkeit von eins auf. Nun, lassen Sie uns einfach die Skizze testen, damit Sie sehen können, was hier passiert. Wie Sie sehen können, sieht es tatsächlich so aus, als wäre das StrokeWeight gleich, und das liegt daran, dass ich während ich die SVG skaliere, das Gewicht der Striche dynamisch nach unten skaliere. Also, sie alle scheinen das gleiche StrokeWeight zu haben. Vergessen Sie nicht in den Zeilen 48 und 49, Sie können angeben, was der StrokeJoin und StrokeCap sein soll. Also, Sie können hier sehen, ich bekomme abgerundete Kappen. Jetzt habe ich einige andere wirklich coole Features hier hinzugefügt. Der letzte Abschnitt der Klasse ist tatsächlich, wie sie ausgegeben werden. Also, ich dachte, vielleicht würden Sie diese bestimmte Datei ausgeben wollen. Also, Sie können oben sehen, ich habe in der importprocessing.pdf gesetzt. Ich habe hier auch zwei Umschalter gesetzt, einen zum Anhalten und einen für die Aufnahme. Wenn Sie tatsächlich nach unten scrollen, kopiere und füge ich unsere gleiche Vektorfunktion ein, die wiederum im letzten Abschnitt der Klasse ist, und dann lege ich einen leeren Tastendruck ein, um ein paar Dinge zu tun. Leertaste wird anhalten und neu starten, die Plus-Taste wird zur nächsten Iteration der Animation weitergeleitet und das Drücken der Taste R würde tatsächlich als PDF gerendert. Wenn ich diese Skizze noch einmal ausführe, was Sie sehen würden , ist, dass ich die Leertaste drücken kann und es tatsächlich die Animation pausiert, ich kann die Leertaste erneut drücken, es startet die Animation neu, ich kann die Leertaste drücken, um pausieren Sie es und dann kann ich die Plus-Taste auf meiner Tastatur drücken und die Iteration der Animation um eins vorantreiben. Also kann ich wirklich anfangen, diese Animation zu betrachten und zu gehen „Okay, lassen Sie mich das ein paar Mal drücken, bis ich zu etwas komme, das mir gefällt“, und dann natürlich, wenn ich die R-Taste drücke, wird es tatsächlich rendern. Wenn ich dies zur Seite setze, werden Sie sehen, dass es ein PDF-Dokument gerendert wird, das offensichtlich ich innerhalb von Illustrator öffnen kann und alle Vektorinformationen gibt es und alles sieht gut aus. Das ist Akte Eins. Wenn wir mit Datei zwei fortfahren, wird alles, was ich in Datei zwei gemacht habe, gesagt, dass ich will, dass der Join und die Kappe tatsächlich quadratisch sein, also beginnt das ein bisschen mehr wie Ihre Animation zu sehen , weil ich die Kappen nicht runden, ich bin quadratische Kappen. Lasst uns weitermachen, drei zu bauen. Auf Build drei habe ich hier ein wenig mehr Funktionalität hinzugefügt, was heißt, wenn ich das Basisgewicht randomisiert habe? Also, Sie werden sehen, auf Linie 39 Ich wähle ein zufälliges Grundgewicht für den Hub und wenn ich tatsächlich das Strichgewicht auf die Einstellung der Grundgewichtszeiten und der dynamischen Skalierung setze, also anstatt es so aussieht, als wäre es alles das gleiche Gewicht, Wenn Sie diese Datei tatsächlich ausführen, randomisiere ich tatsächlich das Basisgewicht und ich denke, es sieht ein wenig interessanter aus. Es kommt einfach so vor, dass, was ich gerade auf dem Bildschirm sehe, ich bin nicht verrückt nach der Farbe. Also, ich dachte, ich würde die Fähigkeit vorstellen, etwas von der Farbe randomisieren. Wenn Sie zum Tastendruck kommen, werden Sie feststellen, dass ich einen neuen Tastendruck für den Buchstaben C hinzugefügt habe, wobei C offensichtlich Farbe ist. Was ist schön an ool ist, dass ich diese Art von Reden direkt hier tun kann, was für während Sie Drawables innerhalb des Pools finden. Also, diese for-Schleife wird jetzt über den Pool iterieren und alle Drawables finden, die wir innerhalb des Pools gesetzt haben. Also sagte ich, „Cool“, HDrawable temp innerhalb des Pools und dann erstelle ich eine neue HShape d und setze es auf das Objekt von temp und feuere dann den zufälligen Farbstrich neu. Also, wenn ich die Skizze testen würde, Sie dieses Ding laufen, wieder, wenn ich die Farben nicht mögen, könnte ich tatsächlich die C-Taste drücken und es würde tatsächlich die Farben auf dem Bildschirm neu zufällig für mich. Jetzt kann ich es wieder pausieren. Nur wissen, dass es in Zeile 101 neu zeichnen, und neu zeichnen wird alles neu zeichnen und leider wird es auch die HRotate Animation laufen neu zeichnen. Also, wenn Sie jetzt tatsächlich die C-Taste drücken, wird es nicht nur neu zufällig, sondern es wird auch die HRotate-Animation um eins vorangetrieben. Also, seien Sie vorsichtig, dass C die Farbe randomisiert, aber es wird auch HRotate erneut ausführen. Wieder, wenn ich R drücke, könnte ich das tatsächlich rendern, kann ich jetzt gehen, um drei zu bauen, und Sie werden sehen, dass ich dies in Illustrator öffnen kann, und ich rendere ein ziemlich schön aussehendes Kunstwerk aus. Schauen wir uns Build vier an. Ich kommentiere tatsächlich die Verwendung von Vermögenswerten eins, zwei und vier. Ich benutze nur SVG3. Der Grund, warum ich nur SVG3 verwende , ist, weil ich etwas Neues vorstellen werde und ich weiß dies in die Animation kommt und meine Hoffnung ist, dass ich eine Skillshare Hype Klasse für Animation machen werde , aber was ich habe hier erledigt ist, dass ich tatsächlich die Animation von HRotate ausgetauscht und Hoscillator eingeführt habe. Hoscillator ist wirklich nett, weil es tatsächlich mit einer Wellenfunktion zeichnet, und in diesem Fall verwende ich eine Zeichenwelle. Also, was ich hier mache, ist zu sagen: „Ich will einen Hoscillator und was ich oszillieren möchte, ist eigentlich Rotation. Ich möchte also von -180 Grad bis +180 Grad oszillieren.“ Ich gebe eine Größe an und ich gebe eine Frequenz der Welle an. Wenn ich diese Skizze mit Hoscillator anstelle von HRotate testen würde, kann ich beginnen, einige wirklich interessante Wellenanimationen zu erhalten indem ich diese im Gegensatz zu HRotate verwende, und wieder kann ich dies ausführen und pausieren, und von Natürlich kann ich es rendern. Jetzt bauen fünf, was das letzte ist, das Schöne am Hype ist, dass Sie tatsächlich das Verhalten stapeln können. Also, in diesem Fall staple ich zwei Hoscillatoren, einen, der Rotation macht und einen anderen, der Skalierung macht. Hier können Sie auf den Zeilen 67 bis 74 sehen, ich stelle einen neuen Hoscillator vor, bei dem ich die Skala des Kunstwerks von 0,25-1,5 ändere. Wenn ich die Skizze testen würde, würden Sie anfangen zu sehen, dass das System jetzt so aussieht. sind also nur viele verschiedene Dinge, viele verschiedene Funktionen, die im Hype sind, dass, auch wenn ich statischen Druck mache, ich ein Verhalten wie dieses ausführen kann und „Okay, lass mich die Farben ändern, bis ich etwas, das ich mag“ und dann, wenn wir die Plus-Taste drücken, um zur nächsten Iteration der Animation zu gelangen, „Cool, ich mag das genau dort“ und ich rendere es aus und vielleicht benutze ich es in einem Poster und ich benutze diese Formen, um entlang der Formen zu entschlüsseln, die Möglichkeiten sind endlos. Posten Sie weiterhin neue Projekte in der Studentengalerie und ich werde diese Art von Video machen. Ich hoffe, du hast Spaß. Wir sehen uns später. 45. Processing 3 + HYPE Bibliothek/Update: Um ein schnelles kleines Video von einem Update aufzuzeichnen. Als ich diese Kurse vor vier Jahren zum ersten Mal gemacht habe, war Processing 2 das Richtige. In Verbindung mit der Verwendung von Processing 2 war HYPE und wie ich HYPE in all diesen Klassen beschrieben habe, auch eine.pde-Datei. Also, in diesen drei Klassen, hatten Sie eine Hype.pde. Hype.pde enthielt die gesamte HYPE-Bibliothek. Das bedeutete auch, dass Sie damals Dinge wie die Verarbeitung von JS verwenden konnten. Aber jetzt hat sich einiges geändert. Es ist vier Jahre später. Die Verarbeitung von JS ist wirklich nicht mehr eine Sache, aber P5 JS ist das neue, neue. Natürlich haben wir Processing 3. Nun, da ich mehr auf Anwendungsbasis machte und den Browser nicht mehr wirklich benutzte, haben wir HYPE tatsächlich auf eine richtige Verarbeitungsbibliothek aktualisiert. Also, was ich getan habe, ist, dass ich alle diese Klassen durchlaufen habe, die ich zuvor vor vier Jahren mit HYPE pde und Processing 2 gemacht hatte , und sie aktualisiert, so dass sie Processing 3 und HYPE, die richtige Verarbeitungs-Bibliothek. Also, ich wollte dir nur sehr schnell zeigen, wenn du zu github.com/hype gehst, wirst du sehen, dass es HYPE Processing hier gibt. Dies ist der Master_Repo. Ich möchte Ihnen jedoch nur zeigen, dass, wenn Sie auf Zweige und innerhalb von Zweigen klicken , lib_staging vorhanden ist. lib_Staging ist immer die aktuellste. Es ist, wo wir die meisten Dinge, die meisten Änderungen, machen Anpassungen. Es ist immer die Arbeit in Arbeit, bevor es tatsächlich zum Master geschoben wird. Also, weil wir das neue, neue, geheime neue, neue wollen , gehen wir voran und gehen Sie zu lib_staging und Sie werden nur auf diesen grünen Button klicken , der „klonen oder herunterladen“ steht, und dann sagen Sie „download zip“. Nun, was dies tut, ist das Herunterladen der gesamten HYPE-Bibliothek einschließlich des Quellcodes und alles. Aber wir wollen es innerhalb der Verarbeitung verwenden. Sie werden also feststellen, dass, wenn Sie zu Ihrer Dokumentdatei „Verarbeitung“ gehen, ein Ordner namens Bibliotheken vorhanden ist, und im Fall dieses speziellen Beispiels ist mein Ordner leer. Also, ich werde die Zip entpacken, die ich gerade heruntergeladen habe, und ich sollte diesen Kerl bekommen. Was das hat, ist es Referenz und Beispiele und Ressourcen hat. Wirklich das einzige, was Sie sich ansehen müssen, ist der Distributions-Ordner. Die Verteilung bedeutet, dass dies der aktuelle Build ist, den Sie in Ihren Dokument-Verarbeitungsbibliotheken Ordner schieben können . Also, gehen Sie in Distribution, und Sie werden feststellen, dass es HYPE.jar und HYPE.zip gibt. Lassen Sie uns voran und entpacken HYPE.zip, und es wird diesen Ordner namens HYPE erstellen, und Sie werden nur diesen Ordner in Ihren Ordner Verarbeitungsbibliotheken ziehen. Also, innerhalb dieses HYPE, sollten Sie Beispiel, Bibliothek, Referenz und Quelle haben . Wenn Sie sich Beispiele wie „Oh mein Gott, es gibt eine Menge Beispiele hier.“ Nun, wenn wir die Verarbeitung der IDE starten würden, würden Sie bemerken, dass, wenn Sie kommen, es mir wahrscheinlich sagen wird, dass ich aktualisieren soll. Nein, nein. - Ja. Nein, nein. Gehen wir zur Skizze Import-Bibliothek. Sieh mal, du solltest HYPE dort sehen. Also, jetzt ist HYPE eine richtige Verarbeitungsbibliothek. Also, die Frage ist, bedeutet das, kann ich das in einem Browser verwenden? Nein, Sie können dies nicht in einem Browser verwenden. Wenn Sie Ihre Sachen in JavaScript ausgeben wollten, schlage ich nicht vor, diese Umgebung zu verwenden, gehen Sie weiter und schauen Sie sich das P5 JS-Projekt an, das passiert , das für den Browser in JavaScript verarbeitet. Aber wenn Sie alle diese Klassendateien aktualisieren möchten , die ich in den letzten Jahren gemacht habe, bin ich jetzt auf das System umgezogen. Wo Sie Processing 3 verwenden und dann HYPE, die Verarbeitungsbibliothek, verwenden . Also, cool. Also, wir haben das in der Verarbeitung und nur zum Teufel davon, wenn ich das beiseite schieben würde, und hier sind einige dieser Skillshare und Gumroad Klassen, an denen ich gearbeitet habe, und Sie werden bemerken, wenn ich zu Programming Graphics 1 gehe, Ich habe jetzt in dieser Zip alle Updates für diesen Code enthalten , um Processing 3 zu verwenden und HYPE, die Bibliothek zu verwenden. Wenn Sie also zu gehen, sagen wir einfach Drawing Visual Assets, und Sie sollten gehen und in den Ordner schauen, werden Sie feststellen, dass Hype.pde jetzt vollständig aus allen Projekten entfernt wird. Wenn Sie auf buildpde klicken, werden Sie hier oben feststellen, dass wir eine neue Struktur haben, die jetzt ist, dass es eine richtige Verarbeitungsbibliothek ist, müssen Sie HYPE als externe Bibliothek importieren. Also, oben an der Spitze, Sie können sehen, ich habe gesagt Import hype.Asterisk, was bedeutet, in geladen. Wenn Sie andere Dinge verwenden möchten, also wenn Sie nur HYPE importieren, erhalten Sie die nackten Bones, die benötigt werden, um HYPE mit Processing 3 zu verwenden. Wenn Sie zusätzliche Dinge wie „Hey, ich benutze einen Farbpool oder ich verwende ein Raster-Layout“ möchten, müssen Sie auch manuell die Klasse importieren, die alles behandelt, was Sie verwenden möchten. Das Beste, was zu tun ist, in Beispiele zu gehen und zu sagen: „Hey, ich möchte einen Oszillator verwenden.“ Also, wenn Sie sich den Oszillator ansehen, werden Sie bemerken, oh, ich muss Oszillator importieren. Das bedeutet, dass dadurch die HYPE-Bibliothek sehr dünn bleibt. Während Sie vorher mit Hype.pde alles importiert haben, auch wenn Sie nicht alles benutzt haben. Also, das ist schlank, das ist gemein, es ist viel effizienter als eine richtige Verarbeitungsbibliothek. Sie importieren die Klassen, mit denen Sie sprechen möchten. Also noch einmal, schauen Sie sich den Ordner Beispiele an, es wird Ihnen zeigen, wie Sie Dinge strukturieren. Darüber hinaus, wenn Sie sich diese Zip-Datei ansehen, werden Sie sehen, dass alle Dateien dort sind, genau wie sie zuvor waren, aber sie alle wurden aktualisiert, um diese neue Struktur zu unterstützen. Ich werde das für alle Klassen tun, und ich werde diese Struktur offensichtlich für alle neuen Klassen in Zukunft verwenden. Hoffe, das hilft. Chatten Sie bald.