Einführung in die Generative Kunst in Processing

1. Einführung: Hallo, alle. Ich bin Hadeel, und das ist Intro zur Generativen Kunst. In dieser Klasse lernen wir die grundlegenden Konzepte der Programmierung und einige Verarbeitung spezifischer Funktionen, um dieses generative Kunstwerk zu schaffen. Die Verarbeitung ist eine Java-basierte Sprache, und es ist eine der einfachsten Möglichkeiten, zu lernen, wie man geht. Es bietet nicht nur die Möglichkeit, eine weit verbreitete Sprache zu lernen, sondern liefert auch sofortige visuelle Ergebnisse. Wir verweisen auch auf die Seite der Verarbeitungsdokumentation , um zu demonstrieren, wie Sie das Beste aus der Verarbeitung herausholen können, was Ihnen bei der Erstellung Ihres Projekts sicherlich helfen wird. Darüber hinaus werde ich Ihnen zeigen, wie Sie eine Verarbeitungsbibliothek verwenden , um die Ergebnisse in ein Vektorformat zu exportieren. Eine gute Möglichkeit, Bilder in hoher Qualität zu speichern oder die Arbeit mit Software wie Adobe Illustrator weiter zu bearbeiten. Am Ende dieser Klasse sollten Sie in der Lage sein, ein Originalstück zu programmieren und zu produzieren. Sie werden Ihr schickes Zertifikat sein, um der Welt zu präsentieren. Lasst uns loslegen. 2. Programmiergrundlagen: Zuerst müssen Sie die grundlegenden Konzepte jeder Programmiersprache kennen , um diese Klasse durchlaufen zu können. Sie sind sehr leicht zu verstehen und mit der Praxis können Sie ein generatives Design pro Tag mit diesen erstellen. harte Codierung jeder Genauigkeitswerte, Größe oder Farbe kann zu einer langwierigen Aufgabe werden, besonders wenn Sie Werte für ein Array von Formen bearbeiten müssen, deshalb brauchen wir etwas, das Variablen genannt wird. Eine Variable ist einfach ein Name, den Sie für einen Wert festlegen, um ihn im Speicher zu speichern, um ihn im gesamten Programm zu verwenden. Sie beispielsweise WennSie beispielsweiseden Radius des Kreises festlegen möchten, geben Sie CircleRadius gleich 100 ein, wie bei 100 Pixel. Jetzt das Programm verstehen, dass CircleRadius ist ein 100 Pixel, weil wir es definiert. Bei der Verarbeitung fehlt dieser Anweisung jedoch ein sehr wichtiges Schlüsselwort, was bedeutet, dass Ihr Programm einen Fehler auslösen kann. Das Schlüsselwort ist int. Int steht für ganze Zahlen, und es ist einer der Datentypen der Verarbeitung. Es gibt mehrere Datentypen in der Verarbeitung, die Sie in Ihren Programmen verwenden können, wie int für ganze Zahlen, float für Dezimalzahlen, Zeichenfolge für Text, Zeichen für Zeichen, Boolean für true und false Werte, Farbe für Farbtöne, Arrays für geordnete Listen und Wörterbücher für Schlüsselwertelisten. In diesem Kurs werden nur ganze Zahlen, Gleitkommazahlen, Arrays und Farben verwendet . Da wir ein Raster erstellen, bedeutet dies, dass wir eine Reihe von Formen auf der Leinwand zeichnen werden, was wie eine Menge Arbeit scheint, bis Sie mehr über Schleifen erfahren. Schleifen sind eine gute Möglichkeit, die gleiche Aufgabe mehrmals auszuführen , ohne die Mühe, diese Aufgabe immer und immer wieder zu tippen. Eine Möglichkeit, eine Schleife zu erstellen, besteht darin, das „For Schlüsselwort“ wie folgt zu verwenden. Der erste Teil der Anweisung gibt den Anfang der Schleife an, der zweite Teil gibt an, wann eine Schleife beendet werden soll, und der dritte Teil ist Ihr Inkrementwert, und der Code, den Sie diese innerhalb des Schleifenkörpers wiederholen möchten. Manchmal innerhalb von Schleifen oder einem anderen Teil der Skizze, müssen wir den Fluss unseres Codes kontrollieren, indem wir „If Conditionals“ verwenden. Dies ist nützlich, wenn Sie einen Codeblock nur ausführen möchten , wenn eine Anweisung als true ausgewertet wird und nur Formen einfärben soll, wenn sie gerade nummerierte Spalten sind. Das letzte, was wir in dieser Lektion wissen müssen, sind Funktionen und Methoden, diese beiden Aussagen sind etwas gleich. Methoden sind im Grunde Funktionen, die zu einer Klasse gehören, so dass sie nicht direkt innerhalb des Programms wie Funktionen definiert sind. Wir müssen keine Menge über Funktionen für diesen Kurs kennen, außer es ist eine Anweisung, die einen Codeblock enthält, den Sie überall in Ihrem Programm aufrufen können , indem Sie seinen Namen eingeben und den entsprechenden Typ und die Anzahl der Argumente übergeben . Während Sie diesen Kurs durchlaufen, werden Sie alle Informationen in dieser Lektion erfassen und sich nicht darum kümmern, sich jetzt etwas auswendig zu lernen. Jeder geht hin und wieder zur Dokumentation zurück, insbesondere in der beginnend. 3. Einführung in die Verarbeitung: Verarbeitung hat drei Hauptkomponenten, die Sie beachten müssen: Der Texteditor, in dem Sie Ihren Code schreiben, die Konsole, wo Sie normalerweise Ihren Code debuggen, und Canvas, wo Sie Ihr Design anzeigen können. Auch jede Verarbeitungsdatei wird üblicherweise als Skizze bezeichnet. In jeder Skizze haben wir zwei Funktionen, die das Basistraining bilden. Einer wird Setup genannt, und der andere wird als Draw bezeichnet. Die Setup-Funktion umfasst die Einstellungen Ihrer Skizze und wird einmal aufgerufen, wenn Sie das Programm ausführen. Während die Zeichenfunktion den Rest Ihres Codes enthält und für jeden Frame ausgeführt wird, bis Sie das Programm beenden. Nun, da wir alle diese Informationen haben, lassen Sie uns die Funktionen untersuchen, die wir verwenden können, um unsere Umgebung einzurichten. Zuerst haben wir die Größenfunktion, die die Größe unserer Leinwand bestimmt. Für das Projekt schlage ich ein Drei-zu-Zwei-Verhältnis oder ein Quadrat vor. Der Maßstab selbst spielt keine Rolle, vor allem, weil wir unsere Skizze in eine Vektordatei exportieren , die nach dem Export leicht angepasst werden kann. Ich werde 600 mal 400 für die Dauer dieses Kurses verwenden. Eine weitere Funktion, die wir im Setup aufrufen können, ist die Hintergrundfunktion, die die Hintergrundfarbe des Canvas bestimmt. Die zu verwendende Hintergrundfarbe liegt natürlich bei Ihnen. Ich werde diese Farbe verwenden. Wir werden auch die NoLoop-Funktion verwenden, um die Zeichenfunktion von Schleifen zu stoppen. Dies liegt daran, dass wir ein statisches Design erstellen möchten. Stattdessen können Sie statische Designs erstellen, indem den vollständigen Code innerhalb der Einrichtungsfunktion schreiben. Aber das scheint ein bisschen konterintuitiv und ein wenig verwirrend zu sein, also werden wir die NoLoop-Funktion verwenden. Eine weitere Verarbeitungsfunktion, die wir während dieses Kurses verwenden werden , ist die Ellipsenfunktion. Dies ist spezifisch für das Design, das wir erstellen. Es gibt jedoch eine Reihe von Formfunktionen, mit denen Sie andere Formen wie Quadrate, Bogen und Linien erstellen können. Lassen Sie uns auf die Verarbeitung gehen, um zu zeigen, was wir gerade gelernt haben. Bevor wir etwas mit der Verarbeitung tun, müssen wir die Software herunterladen. Der Weg, dies zu tun, besteht darin, zu processing.org gehen und dann zum Download-Verarbeitungslink zu gehen. Jetzt können Sie das Betriebssystem finden, das Sie benötigen und es herunterladen, für mich ist es Mac OS. Ich werde einfach darauf klicken. Die Datei sollte heruntergeladen werden. Entpacken Sie die Datei, und installieren Sie sie. Lassen Sie uns nun die Verarbeitung öffnen. Sobald Sie die Verarbeitung geöffnet haben, sollten Sie eine leere Datei wie diese sehen. Um die Umgebung einzurichten, definieren wir zunächst die Setup- und Draw-Funktionen. Um das zu tun, machen wir einfach nichtig Setup. Der Grund, warum wir void verwenden, ist, weil diese Funktion nichts zurückgibt, und so nichtig, da in leer nichts zurückgibt, und void draw. wir nun die Setup- und Draw-Funktion definiert haben, können wir die Umgebung einrichten, indem wir die Größe des Canvas einstellen. Wir können das tun, indem wir die Größenfunktion verwenden, wie wir zuvor im Video gesehen haben. Size Funktion erwartet zwei Argumente. Wir haben gesagt, wir werden 600 mal 400 benutzen. Fühlen Sie sich frei zu wählen, welche Größe Sie mögen. Dann machen wir vorerst einen Hintergrund von Null. Jetzt innerhalb der Zeichenfunktion werden wir die Ellipse zeichnen. Wir können dies tun, indem wir die Ellipsenfunktion verwenden, die vier Argumente erwartet. Wir können vier Argumente übergeben. Die ersten beiden werden die Position des Zentrums dieser Ellipse sein. Die zweiten beiden Argumente werden die Breite und Höhe dieser Ellipse sein. Weil wir einen Kreis erstellen wollen, werden die Breite und Höhe gleich sein. In unserem Koordinatensystem haben wir die X- und Y-Achse. Wir möchten, dass das in der Mitte der Seite liegt, also ist Null für x und Null für y, das das Zentrum unseres Koordinatensystems ist, oben links auf unserer Leinwand. Wenn wir in die Mitte dieser Leinwand gehen wollten, sagen wir im Grunde, dass sie auf die Breite geteilt durch die Hälfte gehen soll, und dann die Höhe geteilt durch die Hälfte. Die Verarbeitung hat sehr nützliche Variablen, die Breite und Höhe genannt werden. Sie erhalten ihre Werte aus der Größenfunktion. Da 600 die Breite unserer Leinwand ist und 400 die Höhe unserer Leinwand ist, wird die Breite 600 sein und die Höhe wird 400 sein. Wenn Sie es horizontal zentrieren möchten, teilen wir die Breite durch zwei. Dann, wenn wir es vertikal tun wollten, teilten wir die Höhe durch zwei. Für die Breite und Höhe, lassen Sie uns einfach 100 mal 100 tun. Die Breite und Höhe sind im Wesentlichen der Durchmesser des Kreises. Wenn wir es ausführen, können Sie entweder klicken Sie auf die Schaltfläche Ausführen hier oder Sie können Befehl R tun . Jetzt können wir sehen, dass wir einen Kreis auf einem Hintergrund haben, der schwarz ist. 4. Durchsetzung der Dokumentation: Ich habe in einem vorherigen Video erwähnt, dass wir eine andere Form verwenden können , anstatt nur die Ellipse zu verwenden, die ich verwende. So können wir das tun, indem wir auf die Referenzseite gehen, und dies ist im Grunde die Dokumentationsseite für alle Dinge Verarbeitung. Also, welche Funktionen Sie benötigen, welche Operatoren Sie benötigen, alles, was Sie brauchen, was mit der Verarbeitung zusammenhängt, finden Sie auf dieser Seite. Wenn Sie auf der Seite Dokumentation zum Abschnitt Shape wechseln und zu den 2D-Grundkörpern navigieren, können Sie sehen, dass mehrere Shapes verwendet werden können. Es gibt eine Arc-Funktion, es gibt eine Circle-Funktion, es gibt eine Line-Funktion, es gibt auch eine Rect-Funktion, also zögern Sie nicht zu wählen, was Sie wollen. Also werde ich mit der Ellipse-Funktion demonstrieren, die wir gerade verwendet haben. Wenn Sie auf die Seite Ellipse Function gehen und Sie hier nach unten gehen, können Sie sehen, dass dies die Syntax dieser Funktion ist. So schreiben Sie eine Funktion in Ihren Code. Dann im Abschnitt Argument in der Funktion, also A, B, C und D, die die Argumente für die Ellipse Funktion sind, können Sie die Definition von ihnen hier unten sehen. Also für A ist es ein Float, und es ist die X-Koordinate der Ellipse. Und dann ist B die Y-Koordinate der Ellipse. Dann sind C und D die Breite und Höhe dieser Ellipse. Ich benutze dies, um Kreise zu erstellen, aber fühlen Sie sich frei, die eigentliche Kreisfunktion zu wählen, um Ihre eigenen Kreise zu erstellen. Wenn Sie zurückgehen und sehen, wie wir das schreiben können, können Sie ein Beispiel sehen, und dann können Sie sehen, dass es ein X und Y als die ersten beiden Argumente hat. Für das dritte Argument können Sie sehen, dass dies die Ausdehnung des Kreises ist. Es gibt viel mehr Formen, die Sie verwenden können, wie Sie im Abschnitt 2D-Grundkörper gesehen haben, und Sie können natürlich das verwenden, was Sie möchten, um Ihr Projekt so einzigartig wie möglich zu machen. 5. Planung des Raster: Um ein Raster zu erstellen, müssen Sie zunächst verstehen, wie das Konzept funktioniert. Normalerweise, bevor Sie etwas programmieren, planen Sie es auf einem Stück Papier oder mental, dann schreiben Sie Ihren Pseudocode und schließlich beginnen Sie zu codieren. Dies macht die Aufgabe viel einfacher. Wie bereits erwähnt, liegt der Null-Nullpunkt auf unserem Koordinatensystem in der oberen linken Ecke unserer Leinwand. Außerdem ist eine weitere Sache zu beachten, dass das Koordinatensystem vertikal gekippt wird. Also sind die Y-Positive am unteren Rand, Gegensatz zu wie wir es in Mathematik gelernt haben. Wenn wir also die Leinwand nach unten bewegen müssen, fügen Sie dem Y-Wert hinzu. Wenn Sie nach oben gehen müssen, subtrahieren Sie vom Y-Wert. Die X-Achse in der Programmierung funktioniert genau wie in Mathematik. rechts zu gehen ist positiv und nach links zu gehen ist negativ. Lassen Sie uns ein Gitter visualisieren. Um ein Raster zu zeichnen, müssen wir die Anzahl der Spalten und Zeilen kennen. Nehmen wir an, wir wollen ein 15 mal 10 Raster. Jetzt wissen wir, dass wir die Anzahl der Spalten und Zeilen definieren müssen, um ein Gitter zu erstellen. Das sind unsere ersten beiden Variablen. Als nächstes wissen wir, dass wir die Breite und Höhe jeder Zelle in diesem Gitter herausfinden müssen , um die maximale Größe unserer Formen zu bestimmen. Wir können dies tun, indem wir die Breite durch die Anzahl der Spalten und die Höhe durch die Anzahl der Zeilen dividieren. Das sind die Dimensionen unserer Zellen, und es gibt unsere nächsten beiden Variablen. Das letzte, was wir herausfinden müssen, sind die X- und Y-Positionen jeder Form. Wenn wir einen Kreis auf Null zeichnen, wird er in der oberen linken Ecke der ersten Zelle positioniert, die sich in der oberen linken Ecke der ersten Zelle befindet, die sich in der oberen linken Ecke der Leinwand befindet. Wenn Sie nun diesen Kreis in die Mitte dieser Zelle schieben möchten, kann ich einfach die halbe Breite dieser Zelle zur X-Position dieses Kreises hinzufügen und die Hälfte der Höhe dieser Zelle hinzufügen, machen Sie die Y-Position dieses Kreises. Dies wird unsere Form in den Mittelpunkt drängen. Das funktioniert also, weil Kreise und Ellipsen von der Mitte gezeichnet werden. Bei Rechtecken und Quadraten werden sie jedoch von der linken oberen Ecke gezeichnet. Wir müssen sie also nicht irgendwo hinstellen, um sie zu zentrieren. Gehen Sie zur nächsten Lektion, um zu sehen, wie wir das programmgesteuert machen können. 6. Erstellen des Raster: Nachdem wir nun konzeptualisiert haben, wie Gitter mithilfe der Verarbeitung erstellt werden können, lassen Sie sich auf die Verarbeitung und beginnen Sie mit der Anwendung dieser Konzepte. Lassen Sie uns zunächst alle Variablen definieren, die wir für dieses Design benötigen. Es gibt vier Variablen, die wir initialisieren müssen. Die ersten beiden sind die Anzahl der Spalten und Zeilen, und sie sollten ganze Zahlen sein, da wir keine halbe Spalte oder Zeile haben können. Die zweiten beiden sind die Abmessungen jeder Zelle. Um unnötige Lücken auf der rechten und unteren Seite des Rasters zu vermeiden, müssen wir diese Variablen schweben lassen, weil wir zwei Zahlen teilen, die möglicherweise nicht zu einer ganzen Zahl führen. Ich deklariere die Variablen außerhalb der Funktionen, um sie global zu machen , so dass ich sie überall im Programm verwenden kann. Wenn ich die Variablen entweder innerhalb der Setup- oder der Draw-Funktion deklariert habe. Ich mache sie lokale Variablen. Ich kann nur innerhalb ihrer jeweiligen Funktionen zugreifen. Jetzt, da die Variablen deklariert sind, kann ich sie innerhalb der Setup-Funktion initialisieren, indem ich die Werte, die ich benötige, übergebe. Ich habe mich dafür entschieden, ein Raster von 15 mal 10 zu haben. Also mache ich die Spalten 15 und die Zeilen 10 und Sie können Verknüpfungen für Ihre Variablen verwenden. Ich habe cols verwendet, um auf Spalten zu verweisen. Als nächstes initialisiere ich die Zellenbreite und die Zellenhöhenvariablen, indem ich die Breite, d. h. die Breite der Leinwand, durch die Anzahl der Spalten dividiert und die Höhe durch die Anzahl der Zeilen dividiert. Ich mache Zellenbreite, und wieder sage ich Zelle W oder ich tippe Zelle W, um sich auf die Zellenbreite zu beziehen , und das wird die Breite durch Spalten geteilt sein. Dann wird die Zellenhöhe die Höhe geteilt durch Zeilen sein. Ich kann etwas anderes tun, um diesen Code kürzer zu machen, was heißt, anstatt int hier und hier drüben zu schreiben, kann ich den zweiten entfernen und ein Komma zwischen Spalten und Zeilen hinzufügen. Also jetzt weiß ich, dass Spalten ein int sind und Zeile ein int ist, und das Programm weiß das auch. Ich werde das Gleiche für die Schwimmer tun. Lassen Sie uns Schleifen verwenden, um in der Lage zu sein, eine Reihe von Rechtecken zu zeichnen, um unser Gitter zu erstellen. Um dies zu tun, können wir die for-Schleife Syntax verwenden, die so für int i gleich 0 geht. Dies ist unsere Variable oder unser Initialisierer und dann ist die Bedingung i kleiner als die Spalten und schließlich erhöht die i-Variable, indem ich i plus plus tut, was bedeutet, dass i um eins inkrementiert wird. Dann schließen wir die Klammern und öffnen den Codeblock. Nun, wenn wir ein Rechteck innerhalb dieses schaffen, und wir gaben ihm eine Position von Null, Null. Lassen Sie es Zellenbreite und Zellenhöhe geben und unser Programm ausführen. Also jetzt haben wir tatsächlich 15 Quadrate übereinander. Wir müssen uns über die Leinwand bewegen, wie können wir das tun? Wir können die i-Variable verwenden, um jedes Rechteck an seine Position zu verschieben. Statt Null, die hart codiert ist, müssen wir die Variable i verwenden. Aber wenn Sie i verwenden, ohne sie mit der Zellenbreite zu multiplizieren, dann werden wir nur um eins inkrementieren. Also, wenn ich das jetzt ausführe, werden wir sehen, dass es nur einen Punkt oder ein Pixel bewegt. Wenn ich mich um die Breite der Zelle bewegen musste, dann muss ich sie mit der Zellenbreite multiplizieren und jetzt haben wir unsere Spalten. Aber wie erstellen wir die Zeilen für jede Spalte? Wir können das tun, indem wir jede Spalte durchschleifen und dafür eine Reihe von for-Schleifen hinzufügen. Die Art und Weise, wie wir das tun können, besteht darin, eine Schleife innerhalb unserer anderen Schleife zu verwenden. Wenn ich für int tue und ich eine andere Variable wählen muss , weil es i nicht mehr verwenden kann , da es bereits in dieser for-Schleife verwendet wird. Also wähle ich j und mache es gleich Null und dann wird die Bedingung dafür kleiner als Zeilen sein, weil wir über die Höhe der Leinwand bewegen möchten und dann j plus plus, um sie zu inkrementieren, schließen Sie die Klammern und schließen Sie die geschweifte Klammern. Jetzt müssen wir das erfinden, um zu verstehen, dass es innerhalb von zwei for-Schleifen ist. Wenn ich das jetzt noch einmal durchführe, werden wir sehen, dass sich nichts geändert hat. Allerdings hat sich etwas geändert, weil wir jetzt 10 Zeilen übereinander haben, aber wir müssen sie über die Höhe der Leinwand bewegen. Wir werden dasselbe tun, was wir mit den Spalten gemacht haben, aber dieses Mal werden wir die j-Variable verwenden , weil ein j sich auf jede Zeile bezieht. Also werde ich j mit der Zellenhöhe multiplizieren und jetzt, wenn ich es ausführe, sollte es funktionieren. Nachdem wir nun unser Raster erstellt haben, ändern wir diese Rechtecke in Kreise, denn das ist das Design, nach dem wir suchen. Wenn ich hierher gehe und rect in ellipse ändere, sollte das funktionieren, weil sie die gleiche Menge an Argumenten in der gleichen Anordnung haben. Die x- und y-Position für die ersten beiden und die Breite und Höhe für die zweite oder für die Ellipse hier, ihr Durchmesser. Wenn ich das durchführe, sehe ich, dass sich alle meine Ellipsen nach links und oben verschoben haben. Der Grund dafür ist, dass sie aus der Mitte gezogen werden. Wie wir bereits in der vorherigen Lektion gesagt haben, müssen wir die Hälfte der Breite der Zelle zur x-Position und die Hälfte der Höhe der Zelle zur y-Position dieser Ellipse hinzufügen , um sie zu zentrieren. Also, wenn Sie hier zurück gehen und Zellenbreite dividiert durch zwei hinzufügen und hier, Zellenhöhe geteilt durch zwei. Dies sollte in den Zellen zentrieren und wir haben unser Raster von Kreisen. 7. Farbe hinzufügen: Es gibt in der Regel zwei Farbmodelle, die in der Verarbeitung verwendet werden können, RGB und HSB. RGB steht für Rot, Grün und Blau, während HSB für Farbton, Sättigung und Helligkeit steht. Während dieses Kurses werde ich mich hauptsächlich auf RGB konzentrieren. RGB-Werte gehen von 0-255, Null ist der dunkelste und 255 die hellsten. Jede der Funktionen in Bezug auf Farbe wie Hintergrund, Strich und Füllung nimmt drei Argumente, rot, grün und blau. Wenn alle drei Werte identisch sind, erhalten Sie einen Graustufenfarbmodus. Zum Beispiel, wenn Sie in Nullen übergeben, werden Sie schwarz, und wenn Sie 255s übergeben, erhalten Sie weiß. Sie können vergleichbare Ergebnisse mit einem Argument eines Wertes von 0-255 erzielen. Andernfalls kombinieren Sie die Menge, die Sie für jede Farbe benötigen, um die gewünschten Formen zu erhalten. Nehmen wir an, Sie haben Lust auf eine leuchtend rote Farbe, in diesem Fall übergeben Sie 255 nur an das erste Argument, und wenn Sie eine Orange benötigen, fügen Sie ein wenig Grün hinzu. Sie können mit Farben so viel experimentieren, wie Sie wollen, bis Sie das Konzept wahrgenommen haben. Obwohl es einen einfacheren Ansatz zur Auswahl von Farbwerten für Ihre Entwürfe gibt, und zwar durch die Verwendung eines Farbrads. Eine Möglichkeit, dies zu tun, ist die Verwendung von Adobe Color. Wählen Sie Farben auf der Adobe Color-Website aus, geben Sie color.adobe.com und gelangen Sie zur Adobe Color-Website. Sie können Farben im Explore Section auswählen, indem hier gehen, wo es heißt, alle Quellen anzeigen. Wenn ich nach unten gehe und zum Farbthema gehe, kann ich die beliebtesten, am häufigsten verwendeten wählen, und dann, wenn ich eine Palette öffne, kann ich sehen, dass ich die hexadezimalen Werte hier kopieren und einfügen kann, die ich verwenden kann. Hexadezimalwerte sind genau wie RGB-Werte. Wir können dies auf der Registerkarte Erstellen hier sehen, also wenn ich zu dem Farbrad gehe, das wir hier haben, und in den Farbmodus gehen, können wir sehen, dass es ein RGB ist. Wenn ich für die erste Farbe wähle, um alle diese auf Null zu scrollen, können wir sehen, dass, weil sie alle Nullen jetzt sind, der Wert schwarz ist. Sie können sehen, dass dies rot ist und das ist grün, das ist blau. Sie können durch alle diese Farben blättern, um die gewünschten Farben auszuwählen, oder Sie können sie aus dem Farbrad selbst auswählen. Wenn Sie hier in den hexadezimalen Werten schauen, wenn ich keine Nullen hinzugefügt habe, dann sind all dies Nullen. Die ersten beiden Zahlen sind also für rote Werte, die zweiten beiden sind für Grün und die dritte für Blau. Die Werte gehen von 0-9 und dann von A-F. Wenn ich möchte, dass es weiß ist, ist der letzte Wert F, also muss ich alle Fs machen. Ich sehe, dass es 255 sind, wie wir es vorher getan haben. Dies ist eine gute Möglichkeit, Farben zu wählen. Normalerweise gehe ich in Adobe-Farben auf die Registerkarte Explorer, aber ich kann auch auf die Registerkarte Trends gehen, und ich kann zum Grafikdesign scrollen, und wenn ich mehr sehe, kann ich die trendigen Farben in der Grafikdesign-Industrie sehen. Wenn ich es öffne, kann ich die Werte kopieren und einfügen und sie zu meinem generativen RPC hinzufügen. Halten Sie sich an der nächsten Lektion fest, um zu erfahren, wie wir Farben für unser Design verwenden werden. 8. Randomisierung: Bisher haben wir unsere Variablen und verschachtelten Schleifen initialisiert, um 15 Spalten und 10 Zeilen zu erstellen. Indem Sie zuerst eine Schleife erstellen, die 15 Mal iteriert, dann für jede dieser Spalten schleifen wir 10 Mal, um 10 Zeilen zu erstellen. So sieht unser Raster jetzt aus. Es ist ein bisschen leer, ohne irgendwelche Farben. Lassen Sie uns eine Füllfunktion innerhalb der Schleife hinzufügen. Unabhängig von der Farbe, die wir dieser Füllung zuweisen, wird auf alle Formen angewendet. Wir fügen immer die Füllfunktion oder eine Farbfunktion vor den Formen hinzu, die wir färben möchten. Andernfalls wenden sie es nicht auf diese Form an. Wir werden füllen und lassen Sie uns Null für Schwarz tun. Wenn wir unser Programm jetzt ausführen, werden wir sehen, dass alle unsere Kreise schwarz sind. Wir wollen jedoch ein bisschen Randomisierung. Wir können das tun, indem wir die Zufallsfunktion verwenden. Die Zufallsfunktion nimmt ein oder zwei Argumente. Wenn Sie ein Argument an die Zufallsfunktion übergeben, übergeben Sie nur die maximale Zahl und die Mindestzahl wird standardmäßig auf Null. Wenn Sie jedoch zwei Argumente übergeben, geben Sie die minimale und maximale Zahl an. Da wir wissen, dass die Farbwerte von Null bis 255 gehen, können wir 255 in die Zufallsfunktion übergehen. Jetzt erhalten wir eine Zufallszahl von Null bis 255. Dann können wir diesen Wert in einer Variablen speichern und ihn in der Füllfunktion verwenden. Lassen Sie uns in der Verarbeitung demonstrieren. Die Zufallsfunktion gibt immer eine Dezimalzahlen zurück, so dass wir einen Float namens col, wie in Farbe erstellen und ihm einen Wert für zufällige 255 zuweisen. Jetzt übergeben wir diesen Wert in die Füllfunktion. Aus dem, was wir über Farben wissen, wissen wir, dass ein Argument in der Füllfunktion eine Farbe aus einem Graustufenmodus bedeutet. Wenn wir unser Programm ausführen, können wir einen Beweis dafür sehen. Sehen Sie, wie die zufälligen, aber sie sind alle Graustufen. Wenn Sie das Design bunt machen möchten, müssen wir einen zufälligen Wert für jeden der R-, G- und B-Parameter erhalten . Lassen Sie uns stattdessen drei Variablen erstellen, eine genannt R eine andere namens G für grün, und eine dritte namens B für blau und geben ihm einen Zufallswert auch von 255. Nun fügen wir diese zur Füllfunktion hinzu. Lassen Sie uns das Programm ausführen und jetzt sollten wir eine andere Farbe für jeden der Kreise sehen. Lassen Sie uns die Strichfarbe entfernen, um sie ein bisschen ansprechender zu machen. Ich gehe in die Setup-Funktion und füge eine Funktion ohne Strich hinzu , um alle Striche in unserem Design zu entfernen. Du musst immer mit einem Semikolon enden. Wenn ich mein Programm jetzt ausführe, kann ich sehen, dass es viel besser ist. Dies ist ein großer Schritt, aber wir möchten, dass dies ein bisschen kontrollierter ist, da wir ein bestimmtes Farbthema wählen möchten, das auf die Kreise angewendet werden soll. Wir machen das in der nächsten Lektion. 9. Randomisieren fortgesetzt: In der vorherigen Lektion haben wir diesen Entwurf erstellt, indem wir einen Zufallswert für Rot-, Grün- und Blauwerte verwenden. Aber wir wollen, dass dies stärker kontrolliert wird, wie wir gesagt haben. Um ein kontrollierteres Farbthema zu haben, müssen wir ein Array erstellen. So funktionieren Arrays. Wir haben eine Variable wie jede andere, aber ihr Datentyp wird durch eckige Klammern gefolgt, um anzuzeigen, dass es sich um eine Liste von Werten handelt. Um dann Werte zuzuweisen, öffneten wir geschweifte Klammern und fügen die Werte eines Datentyps hinzu, den wir vor den eckigen Klammern angegeben haben. Der Zugriff auf diese Werte erfordert nun auch eine andere Syntax als normale Variablen. Es beginnt genau wie Variablen. Dem Variablennamen folgen nun jedoch eckige Klammern. Innerhalb dieser eckigen Klammern gehen wir an der Position dieses Artikels vorbei. Jetzt werden Positionen für Arrays Indizes genannt. Wenn ich das erste Element im Array erhalten möchte, muss ich den Index Null übergeben. Denn bei der Programmierung von Arrays beginnen Indizes bei Null. Es ist auch einer der Gründe, warum wir normalerweise unsere for-Schleife mit einem Anfangswert von Null starten . Lassen Sie uns gehen und erstellen Sie unser Farben-Array. Okay, ich habe fünf Farben in meinem Farbthema, die ich hier kopieren und einfügen werde , die ich für meine Kreise verwenden möchte. Also zuerst mache ich Farbe, weil das der Datentyp der Werte ist, und dann gefolgt von eckigen Klammern und gib dieser Liste einen Namen. Ich nenne es einfach „Farben. Jetzt kopiere ich meine Farben und füge sie ein. Das sind die fünf Farben, die ich wählen werde. Ich verwende hexadezimale Farbwerte, weil sie kürzer sind als das Flechten von RGB-Werten innerhalb von Farbfunktionen. Stellen Sie sich vor, wie lange das sein wird, wenn ich die RGB-Werte verwende. Jetzt, da wir wissen, dass die Indizes von Null auf eins kleiner als die Länge gehen, wissen wir, dass unser Farben-Array fünf Elemente hat, und so wird es von Null beginnen und endet bei vier. Jetzt können wir das in der Zufallsfunktion verwenden. Anstatt all diese zu schreiben, werde ich sie entfernen und jetzt wird sich unsere Füllfunktion beschweren, weil es keine Variablen namens R, G oder B gibt . Ich werde einen Flow machen und ihm einen Wert von „r“ für zufällige geben, und ich werde eine zufällige von fünf, weil es von Null bis zu fünf gehen wird, wird es nie fünf erreichen. Aber jetzt, wenn wir hier mit dem Farben-Array vorbeigehen, und ich benutze die eckigen Klammern. Jetzt verwende ich die Zufallsfunktion, um den Index zu übergeben. Ich weiß, es bekommt eine Zahl von null bis fünf, und ich werde in „r.“ übergeben. Aber jetzt gibt es einen Fehler hier, weil er mir sagt, dass es eine Typ-Diskrepanz gibt. „ Float“ stimmt nicht mit „int“ überein. Der Grund dafür liegt darin, dass die Indizes hier im Array nur ganze Zahlen sind, so dass es keine Gleitkommazahlen gibt. Wir können die Zufallsfunktion hier ändern, um eine ganze Zahl zu werden, indem wir dies tun. Also, wenn ich sage, ich möchte, dass dies eine ganze Zahl ist, aber jetzt beschwert sich das, weil die zufällige Funktion einen Float zurückgibt. Also müssen wir es in eine ganze Zahl konvertieren. Die Art und Weise, wie wir dies tun können, besteht darin, die Funktion „int“ zu verwenden, indem wir die zufällige Funktion in die Funktion „int“ übergeben. Dann bekomme ich jetzt eine Zufallszahl von Null bis vier oder von Null bis fünf. Aber es wird es auf die Indizes abrunden, die ich brauche. Wir können überprüfen, was die Variable „r“ zurückgibt, indem wir sie in der Konsole drucken. Die Art und Weise, wie wir das tun können, ist die Verwendung der Funktion „println“. Println druckt im Grunde den Wert, den wir ihn an die Konsole übergeben , und es erstellt eine neue Zeile für jeden Wert, so dass es für uns einfacher ist, sie zu sehen. Wenn Sie also die Variable „r“ drucken und mein Programm ausführen, sollte ich zuerst sehen, dass meine Farben alle übergeben werden. Ich sehe hier drüben, dass ich immer einen Zufallswert von Null bis vier bekomme. Sie können sehen, hier ist eine Drei, hier ist Null, hier sind vier, und hier als zwei und es sollte irgendwo eins sein. Wir wissen also, dass unsere Zufallsfunktion funktioniert, und natürlich können wir sie hier visuell sehen. Deshalb ist die Verarbeitung eine gute Möglichkeit, Programmierung für Designer zu lernen da sie visueller ist als jede andere Programmiersprache. Lassen Sie uns nun die Hintergrundfarbe erhalten, die ich in meinem Projekt verwendet habe. Wie Sie hier sehen können, habe ich die Hintergrundfarbe und die braune Farbe, die ich wähle, und ich habe meine spezifische Farbpalette anstelle von willkürlichen zufälligen Farben. Lassen Sie uns nun die Größe jedes dieser Kreise randomisieren. Wenn Sie also zurück zum Programm gehen, können wir hier sehen, dass die Breite und Höhe der Ellipse fixiert ist. Also müssen wir dies entfernen und es durch eine zufällige Funktion ersetzen. Wir können zufällig machen, und dann möchte ich, dass es bis zur Zellenbreite und auch Zellenhöhe geht. Dies wird jedoch zu einem Problem für uns führen. Mal sehen, worin das resultieren wird. So sehen Sie, wie es jetzt Ellipsen nicht Kreise, weil wir eine zufällige Funktion für jede der beiden übergeben. Wir müssen eine Variable für die Größe erstellen um einen zufälligen Wert für die Breite und Höhe zu erhalten. Also werde ich schweben, CircleSize. Jetzt haben wir eine CircleSize, die einen zufälligen Wert der Zellenbreite hat, und wir haben es als Argument übergeben. Wenn wir das Programm ausführen, können wir sehen, dass wir Kreise von zufälliger Größe haben. Endlich ist es uns gelungen, das Design zu kreieren, das wir kreieren wollen. In dem Design, das ich geteilt habe, hatten wir jedoch einige Kreise auf anderen Kreisen, die auch unterschiedliche Größen hatten. Die Art und Weise, wie wir das tun können, ist die Verwendung eines wenn bedingten. Darauf können wir in der nächsten Lektion kommen. 10. Den Fluss steueren: Wir haben in unserer letzten Lektion gesehen, dass wir ein Raster aus Kreisen unterschiedlicher Größe und unterschiedlicher Farben erstellt haben . Aber in dem gleichen Projekt, das ich mit dir geteilt habe, hatte ich einige Kreise auf anderen Kreisen. Die Art und Weise, wie wir dies tun können, wie wir in der vorherigen Lektion gesagt haben, ist, wenn Bedingungen. Wenn ich hier rüber gehe und eine wenn bedingte schreibe, prüft das, ob die Spalte eine gerade Zahl ist. Wir wissen, dass die Spalten mit der Variablen i bezeichnet werden. Ich kann sagen, ob i Modul zwei gleich Null ist, und was dies tut, ist im Grunde i durch zwei zu teilen und zu prüfen, ob der Rest davon Null ist. Wenn es Null ist, ist es durch zwei teilbar, was bedeutet, dass es eine gerade Zahl ist. Das Modulo-Zeichen gibt den Rest der Division zurück. Jetzt können wir die Klammern öffnen. Wir können die Ellipsenfunktion innerhalb des Blocks setzen. Nun, wenn wir es ausführen, können wir sehen, dass wir nur sehen, dass Kreise innerhalb als geradlinige Zahlentoleranz gezeichnet werden. Der Grund, warum es von Anfang an beginnt, liegt darin, dass unsere Indizes bei Null beginnen oder unsere Werte in den Variablen i und j von Null beginnen und Null durch zwei teilbar ist, und daher wird es als gerade Zahl angesehen, obwohl dies nicht der Fall ist. Wir werden Null bekommen und dann wird das eins sein, die Spalte Nummer eins, also ist es nicht einmal. Da sind keine Kreise drin, und dann haben wir zwei, vier und so weiter und so weiter. Wir können unseren Code verbessern, indem wir eine Zufallszahl wählen. Anstatt es zu kontrollieren, wollte ich, dass es etwas willkürlicher wird. Wenn ich eine Zufallszahl erstelle, nennen wir es Zufallsposition, Pos für Position, und ich wollte eine ganze Zahl sein, und ich werde Ihnen zeigen, warum. Ich gebe ihm einen Zufallswert von Null bis zwei. Ich werde nur in das gehen wird nur Nullen oder Einsen zu bekommen. Jetzt kann ich hier drüben nachsehen. Wenn zufällige Position gleich ist, und Sie müssen sich bewusst sein, dass, gleich über hier ist ein Zuweisungsoperator, weil es nur ein gleich ist. Wenn Sie jedoch zwei Gleichheitszeichen haben, handelt es sich um einen Vergleichsoperator. Wenn ich überprüfe, ob zufällig in Position gleich Null ist, dann wollte ich eine Ellipse anders zeichnen. Lassen Sie uns dasselbe tun, aber ein Rechteck, nur um den Unterschied zu sehen. Wenn ich das Programm ausführe, kann ich sehen, dass es an einigen Stellen Kreise und an einigen anderen Stellen Rechtecke gibt. Der einzige Grund, warum das ein bisschen seltsam ist, ist weil Quadrat wie Kreise eingedrängt werden. Wir können den hinzugefügten Festkörper und so Höhe entfernen, und jetzt können wir sehen, dass es ein bisschen besser ist. Kommen wir jedoch zu den Ellipsen zurück. Jetzt werden wir sehen, dass wir zu den ersten Ergebnissen zurückgekommen sind. Der Grund, warum ich das getan habe, ist jedoch, weil ich eine andere Ellipse auf diesen Ellipsen erstellen möchte . Wenn ich hier rüber gehe und ich auch eine Ellipse mache, aber dieses Mal möchte ich, dass die Zufallszahl für die Größe ein wenig anders ist. Ich mache Kreisgröße geteilt durch zwei, und Kreisgröße geteilt durch zwei. Ich bekomme Zufallswerte, aber dann teile ich es durch zwei, damit es kleiner ist, und es ist auf dem anderen Kreis. Dies wird jedoch nichts ändern nur weil es die gleiche Farbe haben wird. Wir müssen auch eine Zelle dafür neu zuweisen. Dann versiegeln Sie diese Kreise mit dieser neuen zugewiesenen Variablen. Jetzt haben wir unser Design. Was wir hier getan haben, ist, dass wir die R-Variable neu zuweisen, die wir hier oben haben, und wenn wir sie erneut ausführen, können wir sehen, dass wir andere Zufallswerte erhalten. Wir können auch die Kreisgrößenvariable neu zuweisen, weil wir jetzt nur diese Kreisgröße bekommen und dann teilen wir sie durch die Hälfte, so dass wir immer die Hälfte dieses Kreises bekommen. Aber ich wollte, dass es etwas zufälliger wird. Ich wollte, dass es so aussieht, als hätten einige der größeren Kreise sehr kleine Kreise darin, und einige der kleineren Kreise sind von größeren Kreisen bedeckt. Ich kann die Kreisgrößenvariable auch neu zuweisen, indem ich ihr auch einen Wert der zufälligen Zellenbreite und sie als Kreisgröße beibehalten. Aber dieses Mal, weil es neu zugewiesen wird, werden wir verschiedene Werte von dieser Variablen hier oben bekommen. Wir können sehen, dass wir unterschiedliche Größe haben. Sie können sehen, dass der gelbe Teil hier sehr klein ist , verglichen mit dem orangefarbenen Teil, den wir sehen können, und Sie können hier sehen, dass es einen sehr kleinen orangefarbenen Punkt innerhalb unseres blauen Kreises gibt. 11. Exportieren des Designs: Jetzt ist der Punkt, an dem Sie Ihre letzten Optimierungen zu Ihrem Projekt hinzufügen. Denn als nächstes werden wir das Design exportieren. Die Art und Weise, wie ich ein so einfaches Design bevorzuge, ist die Verwendung der PDF-Bibliothek und Verarbeitung. Um diese Bibliothek verwenden zu können, müssen wir sie zunächst mit dieser Syntax in eine Skizze importieren. Importieren, Verarbeiten, aus der Verarbeitungsbibliothek Ich möchte die PDF-Bibliothek erhalten, und dann verwende ich das Sternchen, um alle Funktionen innerhalb dieser PDF-Bibliothek zu erhalten. Grundsätzlich zeigt das Sternchen an, dass wir alle Funktionalitäten innerhalb dieser Bibliothek unserer Skizze zugänglich machen wollen , damit wir sie verwenden können. Sie können andernfalls angeben, welche Funktionen genau aus dieser Bibliothek importiert werden sollen. Lassen Sie uns untersuchen, welche Funktionen wir nutzen können, um unser endgültiges Kunstwerk zu exportieren. Um unser Design in eine PDF-Datei zu exportieren, müssen wir mit dem Speichern oder Exportieren vor der Hintergrundfunktion oder der NoStroke Funktion beginnen , da dies Funktionalitäten sind, die unserem Design hinzugefügt werden. Ich kann aufnehmen, indem ich die Funktion BeginRecord verwende. Die Funktion BeginRecord nimmt einen Typ an, also gebe ich ihm einen PDF-Typ. Dann der Pfad, in dem Ihre Entwürfe gespeichert werden sollen. Die Dateien werden in den Skizzenordner exportiert. Sie können jedoch einen Ordner angeben, den Sie innerhalb dieses Skizzenordners hinzufügen möchten, und das ist, was ich gerne tun, um es ein wenig organisierter zu machen. Ich nenne es gerne Ausgabe und dann gebe ich der Datei einen Namen. Ich werde sagen, generative Gitter und die Erweiterung. Wenn wir jetzt mit der Aufnahme beginnen, müssen wir sie beenden. Denn wenn wir mit der Aufnahme beginnen und sie nie beenden, werden Sie die Datei nie bekommen. Die Datei wird mit dem Speichern beginnen, aber sie wird nie aufhören zu speichern. Ich muss es am Ende hier drüben hinzufügen. Die EndRecord-Funktion ist im Grunde EndRecord mit Klammern ohne Argumente darin. Wenn ich nun meine Skizze ausführe, wird sie innerhalb meines Skizzenordners gespeichert. Lassen Sie uns gehen und überprüfen Sie den Skizzenordner. Sie können finden, wo Sie Ihre Dateien gespeichert haben, wenn Sie vergessen haben, indem Sie hier mit der rechten Maustaste auf den Titel klicken. Ich kann auf den Ordner klicken und es wird mich dorthin bringen, wo ich ihn gespeichert habe. Wenn ich auf die Blende doppelklicke, um den Ordner zu öffnen, dann sehe ich, dass ich mein Design hier drüben habe und als PDF gespeichert habe. Jetzt, da wir unsere PDF-Datei haben, können wir sie in jeder Imaging-Software öffnen. Ich werde es öffnen und eine Vorschau anzeigen, weil ich auf Mac bin, aber fühlen Sie sich frei, ein Programm zu wählen, das eine PDF öffnet und es in einer Bilddatei speichern kann. Nach dem Öffnen und der Vorschau gehe ich zur Datei, exportiere und wähle dann PNG aus. Ich habe die Auflösung bei 300 Pixeln pro Zoll, um ein sehr hochwertiges Bild zu erhalten. Sie sollten wählen, wo Sie es speichern möchten, Es ist gespeichert. Nun, wenn wir hier zurück gehen und eine Vorschau der Datei sehen, können wir sehen, dass das Bild sehr hochwertig ist. Wie in, gibt es keine Pixelation oder es gibt eine geringfügige Pixelation, wenn wir es nach oben skalieren. Das ist großartig. Jetzt haben wir eine PDF-Datei und ein PNG. 12. Bearbeiten des Designs in Adobe Illustrator: Als Nächstes zeige ich Ihnen, wie Sie dies in Illustrator öffnen, um es weiter zu bearbeiten. Sie können mit der rechten Maustaste klicken und „Mit Adobe Illustrator öffnen“ auswählen . Jetzt haben wir unsere Akte. Wenn ich auf die Clip-Gruppe doppelklicke, können Sie sehen, dass ich jeden Kreis ändern kann. Öffnen von PDF in Illustrator kann jedoch ein wenig einschränkend sein. Wenn Sie in das Farbfeldbedienfeld schauen, können Sie sehen, dass es hier keine Farbfelder gibt. Die Art und Weise, wie ich dies tun würde, ist, eine andere Datei zu öffnen und kopieren und einfügen, was sich hier befindet, in einer anderen Adobe Illustrator -Datei mit dem gleichen Verhältnis. Aber ich zeige Ihnen hier, wie Sie es weiter manipulieren können. Wenn ich auf das „Bild“ klicke, bewegt sich das ganze Bild tatsächlich, weil es sich innerhalb einer Clipping-Maske befindet. Wenn ich zu „Objekt“ gehe und dann gehe ich zu „Clipping Mask“, und ich lasse die Maske los oder verwende die Verknüpfung Befehlsoption 7, und jetzt kann ich die Kreise einzeln auswählen. Sie können das Bild neu einfärben und die Größe der Shapes nach Belieben ändern. So habe ich meine Miniaturansicht für diese Projekte erstellt, indem ich den mittleren Teil entfernt und Text hinzugefügt habe. So manipulieren Sie es im Grunde in Adobe Illustrator. 13. Deine Aufgabe: Für Ihre Aufgabe erstellen Sie ein authentisches, gitterbasiertes generatives Kunstwerk. Sie können über und darüber hinaus mit Ihrem Projekt gehen. Am wichtigsten ist jedoch, dass Sie eine Art Randomisierung in Ihrem Design benötigen. Hier sind drei Beispiele, um Ihnen verschiedene Möglichkeiten zur Implementierung der Zufallsfunktion zu zeigen. Im ersten Beispiel habe ich Rechtecke erstellt, jeweils die Breite und Höhe einer Zelle im Raster umfassen. Dann habe ich die Farben dieser Rechtecke randomisiert, um dieses Ergebnis zu erhalten. Im zweiten Beispiel wurde die Drehung zu einigen Quadraten verwendet, die auf der Leinwand gezeichnet wurden, was etwas fortgeschrittener ist, da für jede Zelle im Raster eine neue Matrix erstellt sie dann um 45 Grad oder um ein Viertel von Pi gedreht wird. Ich fügte auch verschiedene Strichgewichte zu einigen der Quadrate hinzu und randomisierte die Farben jeder Form. Letzt habe ich Kreise in gleicher Größe mit gemischten Strichgewichten und Farben erstellt, um dieses Design zu erstellen. Wenn Sie die 2D-Grundkörper im Shape-Abschnitt auf der Dokumentationsseite referenzieren, sollten Sie in der Lage sein, einige davon in Ihrem Projekt zu verwenden.