Eine Einführung in die generative Kunst: Was es ist und wie Sie es machen

Generative Kunst kann ein einschüchterndes Thema sein - es scheint, als wäre viel Mathematik involviert, und Kunst ist an sich schwierig!

Aber es muss nicht schwierig sein - Sie können einige wirklich coole Dinge ohne einen Abschluss in Mathematik oder Kunst bauen. In diesem Beitrag wird erläutert, was generative Kunst überhaupt ist und wie Sie mit dem Aufbau Ihrer eigenen generativen Kunst beginnen können.

Was ist Code Art?

Codekunst ist jede Kunst, die mit Code erstellt wird. Es gibt endlose Beispiele für CodePen - zum Beispiel CSS-Kunst.

Was ist generative Kunst?

Generative Kunst lässt sich oft von moderner Kunst inspirieren, insbesondere von Pop-Art, die geordnete geometrische Muster stark nutzt.

Es ist jedoch eine sehr breite und reichhaltige Kunstkategorie, die mit Code mit einem zentralen Merkmal erstellt wurde. Generative Kunst beinhaltet in irgendeiner Weise ein selbstverwaltetes oder autonomes System.

Zufälligkeit ist eine Art von autonomem System. Indem Sie den Zufall in ein Code-Kunstwerk integrieren, erhalten Sie jedes Mal ein anderes, völlig einzigartiges Kunstwerk, wenn Sie Ihr Skript ausführen, Ihre Seite laden oder auf eine Benutzerinteraktion reagieren.

Es gibt auch geordnetere autonome Systeme. Ein Beispiel ist Mandelbrots Fraktal, abgeleitet aus einer täuschend einfachen Gleichung.

Wir können auch beide Ansätze integrieren, Ordnung und Chaos verbinden!

Das Kunstwerk wird zu einer Zusammenarbeit zwischen dem Computer und dem Künstler. Einige Aspekte des Kunstwerks werden vom Codierer gesteuert, jedoch nicht alle. Der Künstler kontrolliert sowohl die Zufälligkeit als auch die Reihenfolge in der Kunst.

In gewisser Weise gibt der Künstler mit einem autonomen System die Kontrolle über seine Kunst auf und der Computer tut dies für ihn. Eine differenziertere Perspektive ergibt sich, wenn ein neuer kreativer Prozess betrachtet wird.

Der Codierer-Künstler befindet sich in einer Rückkopplungsschleife, in der er ständig ein System optimiert, um wünschenswertere und oft überraschendere Ergebnisse zu erzielen.

Dieser Prozess umfasst Experimente und glückliche Unfälle auf eine Weise, die die Rolle des Künstlers neu formt. Als generative Künstler verwenden wir die Code-Grundlagen wie Schleifen, Kontrollfluss und spezielle Funktionen. Wir mischen sie dann mit oft unvorhersehbaren Kräften, um völlig einzigartige Ergebnisse zu erzielen, wie sie sonst nichts gibt.

Beispiele für generative Kunst

Kate Comptons Blumen

Zelluläre Automaten und der Rand des Chaos

Animierte generative Kunst in mehreren Farben von Phil Nash

Impressionists Blobs von Murasaki Uma

Generierter Baum von Miriam Nadler

Was gehört zu einem Stück generativer Kunst?

  • Zufälligkeit ist entscheidend für die Schaffung generativer Kunst. Die Grafik sollte jedes Mal anders sein, wenn Sie das Generierungsskript ausführen, daher ist Zufälligkeit normalerweise ein großer Teil davon.
  • Algorithmen - Die visuelle Implementierung eines Algorithmus kann oft großartige Kunst erzeugen, zum Beispiel den obigen Binärbaum.
  • Geometrie - Die meiste generative Kunst enthält Formen, und die Mathematik aus der High-School-Geometrieklasse kann einige wirklich coole Effekte erzielen.

Wie können Sie sich einem generativen Kunstwerk nähern?

Es gibt zwei Hauptstrategien für die Schaffung generativer Kunst, obwohl die meisten zwischen den beiden Strategien liegen werden.

Das erste ist, keine Ergebnisse im Auge zu haben und zu sehen, was der Computer beim Herumspielen erzeugt.

Das zweite ist, dass Sie eine sehr endgültige Vorstellung davon haben, wie die Kunst aussehen soll, und die Zufälligkeit das Endergebnis nur geringfügig verändert.

Wo solltest du anfangen?

Wenn Sie JavaScript kennen, ist p5.js ein großartiger Ausgangspunkt. Ziel ist es, „Codierung für Künstler, Designer, Pädagogen und Anfänger zugänglich zu machen“. Es ist ein Wrapper für die Canvas-API und vereinfacht einen Großteil der Mathematik. Es konzentriert sich auf das Zeichnen, aber Sie können auch Ton-, Video- oder Webcam-Interaktionen damit durchführen, wenn Sie sich für diese Kunstformen interessieren!

Eine kurze Einführung in P5

Laden Sie zuerst das p5-CDN. Dann fügen Sie in Ihrer JavaScript-Datei zwei Funktionen hinzu, die in so ziemlich jedem p5-Skript verwendet werden: setupund draw. Diese Namen sind erforderlich, damit p5 sie aufruft.

setupwird aufgerufen, wenn das Programm startet. Sie werden wahrscheinlich mit der createCanvasFunktion eine Zeichenfläche erstellen, auf die Sie darin zeichnen können, und Sie können dort einige Standardeinstellungen festlegen. Es wird nur einmal aufgerufen!

drawwird nach dem Setup aufgerufen und wird ständig ausgeführt, bis Sie aufrufen. Dadurch wird die Ausführung noLoopgestoppt. drawMit der frameRateFunktion können Sie steuern, wie oft jede Sekunde ausgeführt wird .

Bei generativer Kunst setze ich normalerweise noLoopdie setupFunktion ein, die drawnur einmal statt kontinuierlich laufen lässt .

Hier ist eine p5-Startervorlage für CodePen.

Da wir so viel über die Bedeutung der Zufälligkeit für die generative Kunst gesprochen haben, ist eine weitere wichtige Funktion in p5 random. Es funktioniert ähnlich wie bei JavaScript, Math.randomaber Sie können einen Bereich für die Zahlen festlegen, damit Sie nicht so viel rechnen müssen, um die Zahl in ein nützliches Format zu bringen.

p5 Zeilen

Sie können eine Zeile in p5.js wie folgt erstellen:

line(startX, startY, endX, endY)

Dann können Sie zufällig eine Reihe von Linien generieren und ein einfaches Stück generativer Kunst wie folgt erstellen:

Selbst wirklich einfache Skripte können coole Kunstwerke erzeugen!

p5 Formen

Sie können auch Formen mit p5-ähnlichen Kreisen, Dreiecken und Quadraten erstellen.

Hier ist ein Beispiel für das Erstellen einiger Formen mit p5:

// circle ellipse(xCoordinate, yCoordinate, width, height) 
// square rect(xCoordinate, yCoordinate, width, height) 
// triangle triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)

Dann können wir weitere Formen erstellen, um mehr Spaß zu haben!

p5 Bewegung

Wir können unseren Zeichnungen Bewegung hinzufügen, indem wir den noLoopFunktionsaufruf in der setupFunktion entfernen - sehen Sie sich das an!

Farbe

Sie können auch mit Farbe mit generativer Kunst spielen, indem Sie zufällig Farben auswählen. Sie können dies mathematisch über RGB-Werte tun oder eine Farbpalette mit Ihrem bevorzugten Farbwähler erstellen (wir haben diesen verwendet).

Sie können die Füllfarbe mit der colorFunktion einstellen . Es sind verschiedene Formate erforderlich, z. B. benannte Farben, RGBAs und Hex-Codes.

Sie können die Farbe der Kontur auch mit ändern stroke. Sie können diesen Umriss auch mit entfernen noStrokeoder eine andere Breite mit festlegen strokeWeight.

Alles zusammenfügen

Sobald wir alle diese Teile installiert haben, können wir die Techniken kombinieren, um einige wirklich coole Sachen zu bauen.

Eine andere Strategie: Tutorials optimieren

Sie können auch wirklich coole generative Kunst erzeugen, indem Sie die Arbeit eines anderen nehmen und daraus aufbauen. Hier ist zum Beispiel das Ergebnis eines Tutorials von Dan Shiffman:

Hier sind zwei Verbesserungen, um verschiedene Effekte zu erzielen:

Hier ist eine Codepen-Sammlung mit noch mehr!

Sie können Tutorials, Fork CodePens oder Glitch-Projekten folgen und etwas Neues und Einzigartiges erstellen. Stellen Sie einfach sicher, dass Sie dem ursprünglichen Künstler auch etwas Ehre machen.

Spickzettel

Hier ist ein Spickzettel mit allen P5-Funktionen, die wir für dieses Tutorial verwendet haben.

Weiterlesen

  • Generative Kunst
  • Codierungszug
  • Vortrag von Tim Holman

Den Kontakt halten

Dieser Beitrag wurde gemeinsam mit James Reichard verfasst. Wenn Sie Ihre eigene Kunst kreieren, twittern Sie sie bei uns! (Ali und James).

Ursprünglich veröffentlicht bei dev.to.