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 „Farblis