https:/.../35c3-wikipakawg-1-deu-Generative_Art_with_Paperjs_hd.mp4

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!