35c3-Vorspannmusik
Herald-Engel: Also dann nochmal guten Morgen alle Anwesenden, guten Morgen an
alle Streamzuschauer und alle, die sich das im Nachhinein angucken. Wir werden jetzt
von bleeptrack etwas über generative Kunst hören. Wir werden mit einem Vortragsteil
anfangen und dann wird es einen Workshopteil geben und in dem könnt ihr
dann auch Fragen stellen.
bleeptrack: Perfekt. So, hallo auch nochmal von mir. Freut mich, dass sich so
viele noch zu dieser noch recht frühen Stunde hier eingefunden haben, um sich was
über Kunst anzuhören. Ihr findet mich im Netz unter bleeptrack, und so seit ein bis
zwei Jahren beschäftige ich mich etwas mehr mit generativer Kunst. Jetzt müssen
wir vielleicht erstmal klären, was das überhaupt ist - Generative Art. Und ich
würde das so zusammenfassen: Da gibt es eigentlich drei Punkte. Das ist Kunst, die
wird irgendwie durch Code erzeugt. Und das muss nicht unbedingt ein Bild sein, das
könnte genauso Musik sein oder eine Interaktive Kunstinstallation sein.
Generative Art hat oft auch noch zufällige Inhalte, das heißt, manche Parameter,
manche Einstellungen an dem Bild werden zufällig generiert. Das können wir uns
nachher nochmal anschauen. Und oft haben Kunstwerke ein bestimmten Input, das
könnte ein Foto sein, wenn es ein Interaktives Kunstwerk ist, kann es die
Bewegung von Personen sein. Ihr kennt zum Beispiel vielleicht Leap Motions oder
sowas. Da kann man die Hände tracken und damit virtuelle Sachen anfassen, sowas wär
ganz gängig. Ich hab mal ein Beispiel mitgebracht - von einem Twitteruser der
heißt @manoloide und der postet sehr viel Generative Art und ich finde, die sind immer
sehr repräsentativ. Das ist ein Foto beziehungsweise eine ganze Bilderreihe,
die er hier veröffentlicht hat. Wir können einmal durchschalten und ihr seht schon,
es besteht hauptsächlich aus grundlegenden geometischen Figuren – Linien,
Wellenformen, Kreisen. Und die Bilder sind alle aus einem Algorithmus entstanden,
sehen aber doch recht unterschiedlich aus. Dadurch, dass halt in dem Fall eine
bestimmte Farbpalette gewählt wird, passt natürlich die Reihe noch sehr gut
zusammen. Das nochmal, damit ihr so einen ersten Eindruck habt, wie so was aussehen
könnte. Jetzt zeig ich euch nochmal kurz ein paar Sachen, die ich eher so mache.
Mir gefallen Generatoren sehr gut, die gar nicht so super abstrakt sind, sondern ein
bisschen mehr Sachen zeigen, die man auch irgendwie wiedererkennt. Mein erstes
Projekt, an dem ich gearbeitet hab, das war der Beetlesbot. Den haben wir hier zum
Beispiel. Das ist ein Generator, der kann sich Käfer ausdenken. Und wir können hier
zum Beispiel auf "New" klicken und uns mal ein paar neue anzeigen lassen. Wenn ihr
mich jetzt fragt – warum Käfer? – das kann ich nicht mehr so genau sagen, das war so
ein wilder Einfall, der nachts um drei entstanden ist. Aber was ich euch jetzt
hier ganz gut zeigen kann, ist, der Käfer besteht eigentlich auch aus grundlegenden
Geometrischen Formen. Wir haben hier die Füße sind Rechtecke, die Fußenden sind
Dreiecke – ich hoffe man erkennt es. Der Rest sind alles Kurven, die sich auch sehr
einfach beschreiben lassen. So eine Kurve läuft immer durch Punkte und ich kann die
Punkte bestimmen, wo sie liegen und wie die Kurve aussehen soll – also welche
Biegung die Kurve hat. Wir können mal ein Beispiel machen: Hier rechts gibt's die
ganzen Parameter, die ich an so einem Käfer einstellen kann. Zum Beispiel gibt
es hier für den Flügel vier Kurven oder auch die Flügelgröße. Die können wir
einfach mal verändern. Das heißt, der Punkt - hm, der wackelt immer lacht - am unteren
Ende des Flügels, den kann ich eben einfach versetzen. Und wenn ich einen neuen Käfer
generiere, dann kann ich eben einfach diese zufälligen Werte auswürfeln und hab
einen komplett neuen Käfer. Das sind einfach alle Parameter, die ich einstellen
kann. Ein anderes Projekt, das vielleicht noch nicht so viele gesehen haben, ist sehr
ähnlich. Das ist so ein floraler Blumengenerator. Der kann hier auf dieser
Webseite noch nicht so viel, wir können die Farben shufflen, das heißt, die
Farbanordnung ändert sich. Wenn es funktioniert... Genau, das dauert einen Moment.
Ich kann mir neue Farben zufällig generieren lassen. In dem Fall werden die
nach keiner Regel ausgesucht, da werden einfach vier zufällige Farben ausgesucht
und ein Farbverlauf dazwischen benutzt. Oder ich kann auch die Blätter neu
erstellen lassen. Das wär eine Variante, was man auch machen kann. Und den letzten
Generator, den habt ihr vielleicht schon gesehen. Hm, den hab ich nicht offen.
Moment. Dann machen wir den hier schnell auf. Das ist der – den habt ihr vielleicht
schon gesehen. Das diesjährige 35c3-Motto hat ja so ein schönes Circuit-Board-Design
und das hat mich direkt dazu animiert, dass man da ja auch einen Generator
schreiben könnte, damit sich Leute ihre eigenen Poster oder Sticker machen können.
Und das wäre auch ein schönes generatives Projekt, das man machen kann. In dem Fall
auch gar nicht so viele Parameter. Man könnte eigenen Text eingeben und den damit
generieren – und kann noch ein bisschen die Schriftgröße ver ändern und ansonsten wird
sehr viel zufällig gewürfelt. So viel zu meinen Projekten. Jetzt ist die Frage –
okay, jetzt habt ihr vielleicht was Schönes programmiert oder wir programmieren
nachher zusammen im Workshopteil noch was Schönes – aber was mach ich dann damit?
Dann hab ich jetzt irgendwie ein digitales Bild und deswegen hab ich noch ein paar
kleine Ideen mitgebracht, was man da so anstellen kann. Das erste, was ich finde,
was man tun sollte, ist das irgendwie im Netz zu veröffentlichen. Da haben sich
gerade auf Twitter zwei Hashtags etabliert, wo sehr viel aktive Menschen
drin sind. Das eine ist #plottertwitter, zu Plottern komme ich nachher noch, aber
da findet ihr total spannende kreative und generative Kunst. Und der Hashtag
#generative hat sich auch noch eingebürgert, Sachen darunter zu
veröffentlichen. Das würde ich euch empfehlen, euch einfach da mal
durchzuscrollen durch den Twitterfeed und eure Sachen da auch zu posten und ein
bisschen Feedback von anderen Leuten zu bekommen. Ansonsten, man kann es natürlich
drucken. Wie jeder, ihr könnt einen Posterabzug machen, es gibt
hochqualitative Museumsdrucke auf ganz tolles Papier, oder wie hier im
Hintergrund, ihr könnt auch Sticker drucken und Leuten in die Hand drücken,
wenn sie euch treffen. Das finde ich immer sehr schön, außerdem mag jeder Sticker.
Die Alternative wäre auch noch, das zu plotten. Stiftplotter haben gerade so ein
bisschen ein Revival in der Generative- Art-Szene. Stiftplotter wurden eigentlich
verwendet früher zum technischen Zeichnen, um da Dinge zu plotten. Zum Beispiel in
der Architektur. Das ist praktisch, man könnte sagen, der Vorgänger zum
klassischen Ink-Jet-Drucker. Es ist einfach ein Gerät mit einer X und Y-Achse
und kann auch noch den Stift anheben und absetzen - also eine mini-Z-Achse - und
kann eben computergesteuert diesen Stift über ein Blatt Papier bewegen. Und das
bietet sich natürlich auch sehr an, um seine Kunst damit nicht auszudrucken
sondern auszuplotten. Auch ein sehr schönes Projekt, was man machen kann, ist
ein Bot draus zu schreiben. Auf Twitter, auf Mastodon, das geht ziemlich zügig und
man erfreut sich dann selber etwas mehr an seiner Kunst, finde ich. Weil man kann den Bot
ja so schreiben, dass er alle sechs Stunden, alle vier Stunden einfach ein neues Bild
generiert und postet und so muss man selber nicht dauernd auf den
"Neu-generieren"-Button klicken, sondern wird immer selber ein bisschen von seinem
Projekt überrascht. Das ist sehr nett und andere Leute können auch daran teilhaben.
Ihr könnt es natürlich auch animieren. Gerade bei so Projekten die sehr viel
Zufallsvariablen oder Parameter haben, funktioniert es ziemlich einfach, das seht
ihr jetzt hier im Hintergrund für den Käfergenerator laufen. Denn der in dem
Fall besteht ja, wie gesagt, aus knapp über fünfzig Parametern und ich kann jeden Parameter
einfach leicht verändern. Das ist ja praktisch ein Vektor, ich zähle zu jedem
Vektorwert ein bisschen was dazu, ziehe ein bisschen was ab, zeichne das wieder
und iteriere da einfach drüber. Und dann habe ich wie so eine Art Morph-Animation,
die in diesem Vektorraum einfach entlangläuft. Und damit hat man super
schnell eine Animation gebaut mit super wenig Aufwand. Wir können auch noch etwas
Abgefahreneres machen. Wir können natürlich nicht nur auf Papier drucken,
wir können natürlich auch auf Stoff drucken. Und im Hintergrund seht ihr zum
Beispiel ein Kissen mit diesem Blumengenerator. Alternativen sind, man
kann natürlich sich auch irgendwie diese Mäntel bedrucken und selbst nähen, oder
sich sonst irgendwie kreativ auch mit anderen Materialien austoben. Ich glaube, man kann
mittlerweile mit Online-Diensten so ziemlich alles bedrucken lassen. Oder ihr
geht in den nächsten Makerspace bei euch und schmeißt mal die
Holzverarbeitungsmaschinen an. Man kann generative Kunst auch sehr schön fräsen,
wie ich finde. Das sind – ohje, fällt mir der Name ein – ich glaube, die Platten
heißen HPL in dem Fall, die haben innen eine schwarze Schicht und außen auf den
beiden äußeren Seiten eine weiße Plastikbeschichtung und die lässt sich
halt hervorragend abfräsen und dann tritt die schwarze Schicht, der schwarze Kern in
der Mitte raus in dem Fall. Das geht auch sehr zügig und so eine CNC-Maschine zu
bedienen macht ja auch sehr viel Spaß. So und jetzt kommen wir zum kurzen
Praxisteil, den ich euch noch zeigen würde. Der Talk heißt ja "Generative Art with
paper.js", das ist momentan mein Tool der Wahl, um irgendwie generative Kunst zu
erstellen, das ist ein Javascript- Framework, das einem sehr dabei
unterstützt, Vektorgrafiken zu erstellen. Man kann sich das ein bisschen vorstellen,
als würde man in Inkscape so richtig ordentlich skripten können. Und um da
einfach so einen Mini-Einblick zu geben, zeig ich euch jetzt ein paar Zeilen Code
und danach machen wir einen kleinen Workshopteil, wo wir uns einfach ein
bisschen zusammensetzen können, jeder kann mal herumprobieren. Das ist der Plan. So,
hier oben seht ihr schon paperjs.org, das ist die Webseite und die bietet auch
direkt so einen Editor, das heißt ihr müsst eigentlich gar nichts herunterladen.
Die Webseite könnt ihr direkt öffnen und loslegen mit paper.js. Das ist, was ich
jetzt mal mache. Und mein Plan ist: Zuerst möchte ich mal kurz ein Rechteck zeichnen.
Das heißt, ich lege mir eine Variable an, damit ich später dieses Rechteck auch
weiter manipulieren kann. Es gibt die Überklasse "Path", die beinhaltet auch
diverse Formen, eben zum Beispiel Rechtecke. Und jetzt muss ich angeben, wie
dieses Rechteck aussehen soll. In dem Fall die Größe. So ein Rechteck definiert sich
erstmal durch die Position, wo es liegt. Das heißt, wir erstellen einen neuen
Punkt. In dem Fall vielleicht in der linken oberen Ecke, und wir brauchen noch
eine Größe. Und die Größe, in dem Fall Rechteck, hat ja zwei Dimensionen, in die es
eine Größe haben kann. Wir sagen mal, das wird vielleicht ein Quadrat und das ist 40
mal 40 groß. Jetzt kann ich hier oben direkt auf Play drücken. Wenn ich das tue
passiert erstmal gar nichts, weil ich habe diesem Rechteck noch kein Styling gegeben.
Das Rechteck hat noch keine Farben und noch keine Strichstärke und weiß gar nicht,
wie das aussehen soll. Deswegen müssen wir das dem Rechteck auch noch kurz
beibringen. Es gibt zum Beispiel das Attribut "strokeColor" für die Strichfarbe
und da lassen sich auch direkt Strings angeben für so Basis-Farben, die kennt ihr
aus CSS vielleicht. Das heißt, ich kann einfach mal sagen: Die Strichfarbe soll
schwarz sein und wenn ich jetzt auf Play drücke und es ausführe, sehe ich oben links
auch schon mein Rechteck. Ein Rechteck alleine ist jetzt vielleicht so ein
bisschen langweilig, deswegen wollen wir ein paar mehr Rechtecke haben. Deswegen
würde ich sagen, wir bauen uns kurz eine for-Schleife mit der wir einfach mal zehn
Stück erstellen können. Nennen wir das vielleicht mal x. Und jetzt müssen wir nur
sagen, wenn ich jetzt auf Play drücke dann landen die natürlich alle auf der gleichen
Stelle, das ist doof. Wir wollen das ja verschieben. Deswegen sagen wir mal, dass
die alle nebeneinander liegen sollen, das sieht dann so aus. Jetzt haben wir schon
eine ganze Reihe. Das ist schonmal nicht schlecht. So, jetzt können wir mal
anfangen, die zu manipulieren. Vielleicht wollen wir die von links nach rechts
rotieren lassen. Dafür gibt es auch direkt einen Befehl. Wir sagen einfach "rotate",
das ist so das Naheliegendste. Können wir ja mal kurz ausprobieren, was für ein Wert
da sinnvoll ist. Okay, 30 ist schon mal ganz cool. Lassen wir es doch einfach mal
um x rotieren, das ist vielleicht ein bisschen krass. Ne, das ist sogar ein
bisschen langweilig - also wir sehen schon, der fängt jetzt praktisch bei 0 an
und geht bis zur Rotation 10, das ist ein bisschen wenig, können wir mal ein
bisschen mehr machen, dass es stärker rotiert. Oh – das ist vielleicht ein
bisschen arg schlimm. Hm. 3 finde ich ganz gut. Jetzt haben wir schonmal ein bisschen
irgendwie Bewegung in dem Bild. Was es auch oft noch ganz spannend macht, ist, wenn
wir Sachen manipulieren an einem Objekt, und zwar in unterschiedliche Dimensionen.
Jetzt haben wir ja eine Reihe Rechtecke, jetzt können wir praktisch ein ganzes Grid
Rechtecke machen und nach unten was anderes manipulieren. Wir können sie zum
Beispiel wachsen lassen. Das heißt, ich mache mir noch eine for-Schleife für die
Y-Richtung nach unten. Genau, jetzt müssen wir nur noch sagen, dass sie sich auch
verschieben sollen. Und schon haben wir ein Grid nach unten. Das sieht jetzt noch
sehr wüst und durcheinander aus. Genau - lassen wir die doch mal wachsen. Dafür
sagen wir doch einfach mal "rect.scale", also es ist bei paper.js eigentlich immer
sehr naheliegend, was man vermutet, was an Methoden da ist, dann sind die eigentlich
auch da. Ich hatte selten den Fall, dass mal irgendwas total zu vermissen, was
überhaupt nicht existiert. Wir wollen bei 0 anfangen, machen wir das mal so. Genau.
Jetzt skalieren wir praktisch von 0 weg, das heißt die oberste Zeile ist ganz
verschwunden und wir lassen die von oben nach unten wachsen. Jetzt hat das schon
irgendwie eine ganz nette Dynamik, es ist noch sehr farblos. Schauen wir uns mal an,
wie wir bei paper.js noch mit Farbe umgehen können. Es gibt das Attribut "fillColor".
Füllen wir mal mit rot, erstmal. Genau, das passt. Was man auch noch verändern
kann, was man öfter braucht, ist die Strichdicke. Das sind praktisch die drei
Farbparameter die man in der gängigen Vektorgrafik hat. Die Füllfarbe, die
Strichfarbe und die Strichdicke. Das ist bei paper.js in dem Fall die "strokeWidth".
Die könnte ich jetzt auf 3 setzen, dann ist die schwarze Umrandung noch viel
fetter. 3 finde ich jetzt vielleicht arg schlimm, machen wir mal 2. So jetzt
könnten wir noch zum Schluss die Farbe verändern, da muss ich jetzt mal gucken,
ob ich das noch auswendig kann. Das heißt, wir sagen hier bei der Farbe vielleicht
nicht gängigerweise rot, sondern sagen "new Color". Und ich glaube, der nimmt hier
Werte zwischen 0 und 1. Probieren wir das mal. Ja, das passt. Okay, wir wollen hier
also Werte zwischen 0 und 1 haben. Das heißt, wir könnten jetzt auch so eine Art
Farbverlauf bauen und wir haben ja wieder hier oben unsere X- und Y-Variable, die wir
dafür benutzen können. Das heißt, wir nehmen mal hier, das ist der rote, also
RGB-Rot, Grün, Blau-Anteil, wir können zum Beispiel den mal verändern und abhängig
machen von unserem Y. Jetzt wird das von oben dunkler. Das Blau nimmt nach unten
zu. Und vielleicht machen wir das hier noch vom X abhängig. Das heißt nach rechts
nehmen wir jetzt mehr grün dazu. Jetzt haben wir schon einen schönen Farbverlauf.
Jetzt hab ich vorhin noch gesagt, oft wird irgendwie was Zufälliges benutzt, so ein
Zufallsfaktor könnten wir jetzt natürlich auch noch mit reinbringen. Wir könnten zum
Beispiel hier nicht immer um den Faktor 3 rotieren, sondern da einen zufälligen Wert
wählen. Das macht man in Javascript gängigerweise mit "Math.random". Oder man
schreibt sich dann noch eine kleine Funktion, die noch ein Minimum und ein
Maximum übernehmen kann. Ist in dem Fall jetzt nicht so wichtig. Aber wenn ich
jetzt das mehrfach ausführe, dann seht ihr schon, dass die Rotation einfach immer ein
bisschen anders ist. Und schon haben wir eigentlich ein nettes, kleines erstes
Kunstwerk und mein Vorschlag wäre jetzt bei paper.js kann man hier oben den Link
nehmen, den poste ich jetzt auf Twitter und hänge ihn auch hinten an die Slides
dran, die sind auch online, dann könnt ihr direkt hierdran weiterschreiben, habt ihr
praktisch jetzt den gleichen Code bei euch vorliegen und wir können uns gerne jetzt
noch zusammensetzen und ein bisschen uns unterhalten oder was zusammen hacken und
Kunst machen und an dieser Stelle würde ich mich dann auch vom Stream
verabschieden, weil ich glaube der Workshopteil ist dann nicht mehr so
spannend anzugucken. Vielen Dank fürs zuschauen und ich freu mich, wenn wir uns
jetzt noch zusammensetzen.
Applaus
Abspannmusik
Untertitel erstellt von c3subtitles.de im Jahr 2019. Mach mit und hilf uns!