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!