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!