0:00:00.000,0:00:15.640
35c3-Vorspannmusik
0:00:15.640,0:00:21.901
Herald-Engel: Also dann nochmal guten[br]Morgen alle Anwesenden, guten Morgen an
0:00:21.901,0:00:26.410
alle Streamzuschauer und alle, die sich das[br]im Nachhinein angucken. Wir werden jetzt
0:00:26.410,0:00:31.740
von bleeptrack etwas über generative Kunst[br]hören. Wir werden mit einem Vortragsteil
0:00:31.740,0:00:34.220
anfangen und dann wird es einen[br]Workshopteil geben und in dem könnt ihr
0:00:34.220,0:00:36.850
dann auch Fragen stellen.
0:00:36.850,0:00:40.120
bleeptrack: Perfekt. So, hallo auch[br]nochmal von mir. Freut mich, dass sich so
0:00:40.120,0:00:43.660
viele noch zu dieser noch recht frühen[br]Stunde hier eingefunden haben, um sich was
0:00:43.660,0:00:49.420
über Kunst anzuhören. Ihr findet mich im[br]Netz unter bleeptrack, und so seit ein bis
0:00:49.420,0:00:54.300
zwei Jahren beschäftige ich mich etwas[br]mehr mit generativer Kunst. Jetzt müssen
0:00:54.300,0:00:58.450
wir vielleicht erstmal klären, was das[br]überhaupt ist - Generative Art. Und ich
0:00:58.450,0:01:02.690
würde das so zusammenfassen: Da gibt es[br]eigentlich drei Punkte. Das ist Kunst, die
0:01:02.690,0:01:06.780
wird irgendwie durch Code erzeugt. Und das[br]muss nicht unbedingt ein Bild sein, das
0:01:06.780,0:01:11.509
könnte genauso Musik sein oder eine[br]Interaktive Kunstinstallation sein.
0:01:11.509,0:01:19.060
Generative Art hat oft auch noch zufällige[br]Inhalte, das heißt, manche Parameter,
0:01:19.060,0:01:23.359
manche Einstellungen an dem Bild werden[br]zufällig generiert. Das können wir uns
0:01:23.359,0:01:27.729
nachher nochmal anschauen. Und oft haben[br]Kunstwerke ein bestimmten Input, das
0:01:27.729,0:01:31.509
könnte ein Foto sein, wenn es ein[br]Interaktives Kunstwerk ist, kann es die
0:01:31.509,0:01:35.270
Bewegung von Personen sein. Ihr kennt zum[br]Beispiel vielleicht Leap Motions oder
0:01:35.270,0:01:40.119
sowas. Da kann man die Hände tracken und[br]damit virtuelle Sachen anfassen, sowas wär
0:01:40.119,0:01:48.830
ganz gängig. Ich hab mal ein Beispiel[br]mitgebracht - von einem Twitteruser der
0:01:48.830,0:01:55.659
heißt @manoloide und der postet sehr viel[br]Generative Art und ich finde, die sind immer
0:01:55.659,0:02:02.130
sehr repräsentativ. Das ist ein Foto[br]beziehungsweise eine ganze Bilderreihe,
0:02:02.130,0:02:06.140
die er hier veröffentlicht hat. Wir können[br]einmal durchschalten und ihr seht schon,
0:02:06.140,0:02:11.890
es besteht hauptsächlich aus grundlegenden[br]geometischen Figuren – Linien,
0:02:11.890,0:02:17.510
Wellenformen, Kreisen. Und die Bilder sind[br]alle aus einem Algorithmus entstanden,
0:02:17.510,0:02:24.000
sehen aber doch recht unterschiedlich aus.[br]Dadurch, dass halt in dem Fall eine
0:02:24.000,0:02:27.310
bestimmte Farbpalette gewählt wird, passt[br]natürlich die Reihe noch sehr gut
0:02:27.310,0:02:30.550
zusammen. Das nochmal, damit ihr so einen[br]ersten Eindruck habt, wie so was aussehen
0:02:30.550,0:02:38.820
könnte. Jetzt zeig ich euch nochmal kurz[br]ein paar Sachen, die ich eher so mache.
0:02:38.820,0:02:43.360
Mir gefallen Generatoren sehr gut, die gar[br]nicht so super abstrakt sind, sondern ein
0:02:43.360,0:02:47.970
bisschen mehr Sachen zeigen, die man auch[br]irgendwie wiedererkennt. Mein erstes
0:02:47.970,0:02:54.260
Projekt, an dem ich gearbeitet hab, das war[br]der Beetlesbot. Den haben wir hier zum
0:02:54.260,0:02:59.470
Beispiel. Das ist ein Generator, der kann[br]sich Käfer ausdenken. Und wir können hier
0:02:59.470,0:03:04.200
zum Beispiel auf "New" klicken und uns mal[br]ein paar neue anzeigen lassen. Wenn ihr
0:03:04.200,0:03:07.370
mich jetzt fragt – warum Käfer? – das kann[br]ich nicht mehr so genau sagen, das war so
0:03:07.370,0:03:10.590
ein wilder Einfall, der nachts um drei[br]entstanden ist. Aber was ich euch jetzt
0:03:10.590,0:03:15.680
hier ganz gut zeigen kann, ist, der Käfer[br]besteht eigentlich auch aus grundlegenden
0:03:15.680,0:03:20.530
Geometrischen Formen. Wir haben hier die[br]Füße sind Rechtecke, die Fußenden sind
0:03:20.530,0:03:25.250
Dreiecke – ich hoffe man erkennt es. Der[br]Rest sind alles Kurven, die sich auch sehr
0:03:25.250,0:03:29.790
einfach beschreiben lassen. So eine Kurve[br]läuft immer durch Punkte und ich kann die
0:03:29.790,0:03:33.060
Punkte bestimmen, wo sie liegen und wie[br]die Kurve aussehen soll – also welche
0:03:33.060,0:03:37.160
Biegung die Kurve hat. Wir können mal ein[br]Beispiel machen: Hier rechts gibt's die
0:03:37.160,0:03:42.040
ganzen Parameter, die ich an so einem[br]Käfer einstellen kann. Zum Beispiel gibt
0:03:42.040,0:03:48.040
es hier für den Flügel vier Kurven oder[br]auch die Flügelgröße. Die können wir
0:03:48.040,0:03:53.060
einfach mal verändern. Das heißt, der[br]Punkt - hm, der wackelt immer lacht - am unteren
0:03:53.060,0:04:04.470
Ende des Flügels, den kann ich eben einfach[br]versetzen. Und wenn ich einen neuen Käfer
0:04:04.470,0:04:08.030
generiere, dann kann ich eben einfach[br]diese zufälligen Werte auswürfeln und hab
0:04:08.030,0:04:12.010
einen komplett neuen Käfer. Das sind[br]einfach alle Parameter, die ich einstellen
0:04:12.010,0:04:16.168
kann. Ein anderes Projekt, das vielleicht[br]noch nicht so viele gesehen haben, ist sehr
0:04:16.168,0:04:22.009
ähnlich. Das ist so ein floraler[br]Blumengenerator. Der kann hier auf dieser
0:04:22.009,0:04:25.580
Webseite noch nicht so viel, wir können[br]die Farben shufflen, das heißt, die
0:04:25.580,0:04:30.720
Farbanordnung ändert sich. Wenn es[br]funktioniert... Genau, das dauert einen Moment.
0:04:30.720,0:04:34.509
Ich kann mir neue Farben zufällig[br]generieren lassen. In dem Fall werden die
0:04:34.509,0:04:40.189
nach keiner Regel ausgesucht, da werden[br]einfach vier zufällige Farben ausgesucht
0:04:40.189,0:04:44.069
und ein Farbverlauf dazwischen benutzt.[br]Oder ich kann auch die Blätter neu
0:04:44.069,0:04:49.840
erstellen lassen. Das wär eine Variante,[br]was man auch machen kann. Und den letzten
0:04:49.840,0:05:00.360
Generator, den habt ihr vielleicht schon[br]gesehen. Hm, den hab ich nicht offen.
0:05:00.360,0:05:07.930
Moment. Dann machen wir den hier schnell[br]auf. Das ist der – den habt ihr vielleicht
0:05:07.930,0:05:13.490
schon gesehen. Das diesjährige 35c3-Motto[br]hat ja so ein schönes Circuit-Board-Design
0:05:13.490,0:05:16.520
und das hat mich direkt dazu animiert,[br]dass man da ja auch einen Generator
0:05:16.520,0:05:19.690
schreiben könnte, damit sich Leute ihre[br]eigenen Poster oder Sticker machen können.
0:05:19.690,0:05:25.460
Und das wäre auch ein schönes generatives[br]Projekt, das man machen kann. In dem Fall
0:05:25.460,0:05:32.180
auch gar nicht so viele Parameter. Man[br]könnte eigenen Text eingeben und den damit
0:05:32.180,0:05:35.550
generieren – und kann noch ein bisschen[br]die Schriftgröße ver ändern und ansonsten wird
0:05:35.550,0:05:46.749
sehr viel zufällig gewürfelt. So viel zu[br]meinen Projekten. Jetzt ist die Frage –
0:05:46.749,0:05:49.680
okay, jetzt habt ihr vielleicht was[br]Schönes programmiert oder wir programmieren
0:05:49.680,0:05:53.059
nachher zusammen im Workshopteil noch was[br]Schönes – aber was mach ich dann damit?
0:05:53.059,0:05:56.870
Dann hab ich jetzt irgendwie ein digitales[br]Bild und deswegen hab ich noch ein paar
0:05:56.870,0:06:01.060
kleine Ideen mitgebracht, was man da so[br]anstellen kann. Das erste, was ich finde,
0:06:01.060,0:06:05.150
was man tun sollte, ist das irgendwie im[br]Netz zu veröffentlichen. Da haben sich
0:06:05.150,0:06:08.719
gerade auf Twitter zwei Hashtags[br]etabliert, wo sehr viel aktive Menschen
0:06:08.719,0:06:12.250
drin sind. Das eine ist #plottertwitter,[br]zu Plottern komme ich nachher noch, aber
0:06:12.250,0:06:19.550
da findet ihr total spannende kreative und[br]generative Kunst. Und der Hashtag
0:06:19.550,0:06:21.900
#generative hat sich auch noch[br]eingebürgert, Sachen darunter zu
0:06:21.900,0:06:25.340
veröffentlichen. Das würde ich euch[br]empfehlen, euch einfach da mal
0:06:25.340,0:06:29.242
durchzuscrollen durch den Twitterfeed und[br]eure Sachen da auch zu posten und ein
0:06:29.242,0:06:33.930
bisschen Feedback von anderen Leuten zu[br]bekommen. Ansonsten, man kann es natürlich
0:06:33.930,0:06:37.020
drucken. Wie jeder, ihr könnt einen[br]Posterabzug machen, es gibt
0:06:37.020,0:06:41.169
hochqualitative Museumsdrucke auf ganz[br]tolles Papier, oder wie hier im
0:06:41.169,0:06:43.939
Hintergrund, ihr könnt auch Sticker[br]drucken und Leuten in die Hand drücken,
0:06:43.939,0:06:48.310
wenn sie euch treffen. Das finde ich immer[br]sehr schön, außerdem mag jeder Sticker.
0:06:48.310,0:06:53.850
Die Alternative wäre auch noch, das zu[br]plotten. Stiftplotter haben gerade so ein
0:06:53.850,0:06:57.289
bisschen ein Revival in der Generative-[br]Art-Szene. Stiftplotter wurden eigentlich
0:06:57.289,0:07:02.039
verwendet früher zum technischen Zeichnen,[br]um da Dinge zu plotten. Zum Beispiel in
0:07:02.039,0:07:05.349
der Architektur. Das ist praktisch, man[br]könnte sagen, der Vorgänger zum
0:07:05.349,0:07:09.780
klassischen Ink-Jet-Drucker. Es ist[br]einfach ein Gerät mit einer X und Y-Achse
0:07:09.780,0:07:13.580
und kann auch noch den Stift anheben und[br]absetzen - also eine mini-Z-Achse - und
0:07:13.580,0:07:18.550
kann eben computergesteuert diesen Stift[br]über ein Blatt Papier bewegen. Und das
0:07:18.550,0:07:22.949
bietet sich natürlich auch sehr an, um[br]seine Kunst damit nicht auszudrucken
0:07:22.949,0:07:28.120
sondern auszuplotten. Auch ein sehr[br]schönes Projekt, was man machen kann, ist
0:07:28.120,0:07:32.659
ein Bot draus zu schreiben. Auf Twitter,[br]auf Mastodon, das geht ziemlich zügig und
0:07:32.659,0:07:36.350
man erfreut sich dann selber etwas mehr an[br]seiner Kunst, finde ich. Weil man kann den Bot
0:07:36.350,0:07:40.240
ja so schreiben, dass er alle sechs Stunden,[br]alle vier Stunden einfach ein neues Bild
0:07:40.240,0:07:43.349
generiert und postet und so muss man[br]selber nicht dauernd auf den
0:07:43.349,0:07:46.110
"Neu-generieren"-Button klicken, sondern wird[br]immer selber ein bisschen von seinem
0:07:46.110,0:07:50.020
Projekt überrascht. Das ist sehr nett und[br]andere Leute können auch daran teilhaben.
0:07:50.020,0:07:55.839
Ihr könnt es natürlich auch animieren.[br]Gerade bei so Projekten die sehr viel
0:07:55.839,0:07:59.870
Zufallsvariablen oder Parameter haben,[br]funktioniert es ziemlich einfach, das seht
0:07:59.870,0:08:05.039
ihr jetzt hier im Hintergrund für den[br]Käfergenerator laufen. Denn der in dem
0:08:05.039,0:08:09.490
Fall besteht ja, wie gesagt, aus knapp über[br]fünfzig Parametern und ich kann jeden Parameter
0:08:09.490,0:08:12.990
einfach leicht verändern. Das ist ja[br]praktisch ein Vektor, ich zähle zu jedem
0:08:12.990,0:08:17.029
Vektorwert ein bisschen was dazu, ziehe[br]ein bisschen was ab, zeichne das wieder
0:08:17.029,0:08:21.379
und iteriere da einfach drüber. Und dann[br]habe ich wie so eine Art Morph-Animation,
0:08:21.379,0:08:24.839
die in diesem Vektorraum einfach[br]entlangläuft. Und damit hat man super
0:08:24.839,0:08:31.979
schnell eine Animation gebaut mit super[br]wenig Aufwand. Wir können auch noch etwas
0:08:31.979,0:08:34.539
Abgefahreneres machen. Wir können[br]natürlich nicht nur auf Papier drucken,
0:08:34.539,0:08:37.799
wir können natürlich auch auf Stoff[br]drucken. Und im Hintergrund seht ihr zum
0:08:37.799,0:08:41.409
Beispiel ein Kissen mit diesem[br]Blumengenerator. Alternativen sind, man
0:08:41.409,0:08:46.160
kann natürlich sich auch irgendwie diese[br]Mäntel bedrucken und selbst nähen, oder
0:08:46.160,0:08:50.450
sich sonst irgendwie kreativ auch mit anderen[br]Materialien austoben. Ich glaube, man kann
0:08:50.450,0:08:56.251
mittlerweile mit Online-Diensten so[br]ziemlich alles bedrucken lassen. Oder ihr
0:08:56.251,0:08:59.850
geht in den nächsten Makerspace bei euch[br]und schmeißt mal die
0:08:59.850,0:09:05.450
Holzverarbeitungsmaschinen an. Man kann[br]generative Kunst auch sehr schön fräsen,
0:09:05.450,0:09:08.520
wie ich finde. Das sind – ohje, fällt mir[br]der Name ein – ich glaube, die Platten
0:09:08.520,0:09:15.310
heißen HPL in dem Fall, die haben innen[br]eine schwarze Schicht und außen auf den
0:09:15.310,0:09:18.990
beiden äußeren Seiten eine weiße[br]Plastikbeschichtung und die lässt sich
0:09:18.990,0:09:22.620
halt hervorragend abfräsen und dann tritt[br]die schwarze Schicht, der schwarze Kern in
0:09:22.620,0:09:27.400
der Mitte raus in dem Fall. Das geht auch[br]sehr zügig und so eine CNC-Maschine zu
0:09:27.400,0:09:35.200
bedienen macht ja auch sehr viel Spaß. So[br]und jetzt kommen wir zum kurzen
0:09:35.200,0:09:40.240
Praxisteil, den ich euch noch zeigen würde. [br]Der Talk heißt ja "Generative Art with
0:09:40.240,0:09:44.960
paper.js", das ist momentan mein Tool der[br]Wahl, um irgendwie generative Kunst zu
0:09:44.960,0:09:51.620
erstellen, das ist ein Javascript-[br]Framework, das einem sehr dabei
0:09:51.620,0:09:54.680
unterstützt, Vektorgrafiken zu erstellen.[br]Man kann sich das ein bisschen vorstellen,
0:09:54.680,0:09:58.990
als würde man in Inkscape so richtig[br]ordentlich skripten können. Und um da
0:09:58.990,0:10:02.150
einfach so einen Mini-Einblick zu geben,[br]zeig ich euch jetzt ein paar Zeilen Code
0:10:02.150,0:10:04.600
und danach machen wir einen kleinen[br]Workshopteil, wo wir uns einfach ein
0:10:04.600,0:10:18.240
bisschen zusammensetzen können, jeder kann[br]mal herumprobieren. Das ist der Plan. So,
0:10:18.240,0:10:22.600
hier oben seht ihr schon paperjs.org, das[br]ist die Webseite und die bietet auch
0:10:22.600,0:10:25.590
direkt so einen Editor, das heißt ihr[br]müsst eigentlich gar nichts herunterladen.
0:10:25.590,0:10:30.560
Die Webseite könnt ihr direkt öffnen und[br]loslegen mit paper.js. Das ist, was ich
0:10:30.560,0:10:36.380
jetzt mal mache. Und mein Plan ist: Zuerst[br]möchte ich mal kurz ein Rechteck zeichnen.
0:10:36.380,0:10:40.310
Das heißt, ich lege mir eine Variable an,[br]damit ich später dieses Rechteck auch
0:10:40.310,0:10:47.490
weiter manipulieren kann. Es gibt die[br]Überklasse "Path", die beinhaltet auch
0:10:47.490,0:10:53.590
diverse Formen, eben zum Beispiel[br]Rechtecke. Und jetzt muss ich angeben, wie
0:10:53.590,0:11:05.160
dieses Rechteck aussehen soll. In dem Fall[br]die Größe. So ein Rechteck definiert sich
0:11:05.160,0:11:08.670
erstmal durch die Position, wo es liegt.[br]Das heißt, wir erstellen einen neuen
0:11:08.670,0:11:14.190
Punkt. In dem Fall vielleicht in der[br]linken oberen Ecke, und wir brauchen noch
0:11:14.190,0:11:20.200
eine Größe. Und die Größe, in dem Fall[br]Rechteck, hat ja zwei Dimensionen, in die es
0:11:20.200,0:11:24.390
eine Größe haben kann. Wir sagen mal, das[br]wird vielleicht ein Quadrat und das ist 40
0:11:24.390,0:11:30.920
mal 40 groß. Jetzt kann ich hier oben[br]direkt auf Play drücken. Wenn ich das tue
0:11:30.920,0:11:35.340
passiert erstmal gar nichts, weil ich habe[br]diesem Rechteck noch kein Styling gegeben.
0:11:35.340,0:11:38.730
Das Rechteck hat noch keine Farben und[br]noch keine Strichstärke und weiß gar nicht,
0:11:38.730,0:11:42.560
wie das aussehen soll. Deswegen müssen wir[br]das dem Rechteck auch noch kurz
0:11:42.560,0:11:55.220
beibringen. Es gibt zum Beispiel das[br]Attribut "strokeColor" für die Strichfarbe
0:11:55.220,0:11:58.890
und da lassen sich auch direkt Strings[br]angeben für so Basis-Farben, die kennt ihr
0:11:58.890,0:12:05.630
aus CSS vielleicht. Das heißt, ich kann[br]einfach mal sagen: Die Strichfarbe soll
0:12:05.630,0:12:09.320
schwarz sein und wenn ich jetzt auf Play[br]drücke und es ausführe, sehe ich oben links
0:12:09.320,0:12:13.860
auch schon mein Rechteck. Ein Rechteck[br]alleine ist jetzt vielleicht so ein
0:12:13.860,0:12:18.420
bisschen langweilig, deswegen wollen wir[br]ein paar mehr Rechtecke haben. Deswegen
0:12:18.420,0:12:22.000
würde ich sagen, wir bauen uns kurz eine[br]for-Schleife mit der wir einfach mal zehn
0:12:22.000,0:12:40.310
Stück erstellen können. Nennen wir das[br]vielleicht mal x. Und jetzt müssen wir nur
0:12:40.310,0:12:43.140
sagen, wenn ich jetzt auf Play drücke dann[br]landen die natürlich alle auf der gleichen
0:12:43.140,0:12:49.830
Stelle, das ist doof. Wir wollen das ja[br]verschieben. Deswegen sagen wir mal, dass
0:12:49.830,0:12:53.530
die alle nebeneinander liegen sollen, das[br]sieht dann so aus. Jetzt haben wir schon
0:12:53.530,0:12:58.510
eine ganze Reihe. Das ist schonmal nicht[br]schlecht. So, jetzt können wir mal
0:12:58.510,0:13:05.270
anfangen, die zu manipulieren. Vielleicht[br]wollen wir die von links nach rechts
0:13:05.270,0:13:13.700
rotieren lassen. Dafür gibt es auch direkt[br]einen Befehl. Wir sagen einfach "rotate",
0:13:13.700,0:13:20.070
das ist so das Naheliegendste. Können wir[br]ja mal kurz ausprobieren, was für ein Wert
0:13:20.070,0:13:28.080
da sinnvoll ist. Okay, 30 ist schon mal[br]ganz cool. Lassen wir es doch einfach mal
0:13:28.080,0:13:31.470
um x rotieren, das ist vielleicht ein[br]bisschen krass. Ne, das ist sogar ein
0:13:31.470,0:13:34.120
bisschen langweilig - also wir sehen[br]schon, der fängt jetzt praktisch bei 0 an
0:13:34.120,0:13:37.030
und geht bis zur Rotation 10, das ist ein[br]bisschen wenig, können wir mal ein
0:13:37.030,0:13:41.280
bisschen mehr machen, dass es stärker[br]rotiert. Oh – das ist vielleicht ein
0:13:41.280,0:13:48.260
bisschen arg schlimm. Hm. 3 finde ich ganz[br]gut. Jetzt haben wir schonmal ein bisschen
0:13:48.260,0:13:52.650
irgendwie Bewegung in dem Bild. Was es[br]auch oft noch ganz spannend macht, ist, wenn
0:13:52.650,0:13:57.880
wir Sachen manipulieren an einem Objekt,[br]und zwar in unterschiedliche Dimensionen.
0:13:57.880,0:14:00.660
Jetzt haben wir ja eine Reihe Rechtecke,[br]jetzt können wir praktisch ein ganzes Grid
0:14:00.660,0:14:04.660
Rechtecke machen und nach unten was[br]anderes manipulieren. Wir können sie zum
0:14:04.660,0:14:09.130
Beispiel wachsen lassen. Das heißt, ich[br]mache mir noch eine for-Schleife für die
0:14:09.130,0:14:28.980
Y-Richtung nach unten. Genau, jetzt müssen[br]wir nur noch sagen, dass sie sich auch
0:14:28.980,0:14:37.070
verschieben sollen. Und schon haben wir[br]ein Grid nach unten. Das sieht jetzt noch
0:14:37.070,0:14:42.210
sehr wüst und durcheinander aus. Genau -[br]lassen wir die doch mal wachsen. Dafür
0:14:42.210,0:14:45.940
sagen wir doch einfach mal "rect.scale",[br]also es ist bei paper.js eigentlich immer
0:14:45.940,0:14:49.430
sehr naheliegend, was man vermutet, was [br]an Methoden da ist, dann sind die eigentlich
0:14:49.430,0:14:52.740
auch da. Ich hatte selten den Fall, dass[br]mal irgendwas total zu vermissen, was
0:14:52.740,0:15:05.220
überhaupt nicht existiert. Wir wollen bei[br]0 anfangen, machen wir das mal so. Genau.
0:15:05.220,0:15:09.300
Jetzt skalieren wir praktisch von 0 weg,[br]das heißt die oberste Zeile ist ganz
0:15:09.300,0:15:13.730
verschwunden und wir lassen die von oben[br]nach unten wachsen. Jetzt hat das schon
0:15:13.730,0:15:16.820
irgendwie eine ganz nette Dynamik, es ist[br]noch sehr farblos. Schauen wir uns mal an,
0:15:16.820,0:15:28.740
wie wir bei paper.js noch mit Farbe umgehen[br]können. Es gibt das Attribut "fillColor".
0:15:28.740,0:15:40.990
Füllen wir mal mit rot, erstmal. Genau,[br]das passt. Was man auch noch verändern
0:15:40.990,0:15:44.790
kann, was man öfter braucht, ist die[br]Strichdicke. Das sind praktisch die drei
0:15:44.790,0:15:48.250
Farbparameter die man in der gängigen[br]Vektorgrafik hat. Die Füllfarbe, die
0:15:48.250,0:15:56.080
Strichfarbe und die Strichdicke. Das ist[br]bei paper.js in dem Fall die "strokeWidth".
0:15:56.080,0:16:02.570
Die könnte ich jetzt auf 3 setzen, dann[br]ist die schwarze Umrandung noch viel
0:16:02.570,0:16:08.100
fetter. 3 finde ich jetzt vielleicht arg[br]schlimm, machen wir mal 2. So jetzt
0:16:08.100,0:16:11.013
könnten wir noch zum Schluss die Farbe[br]verändern, da muss ich jetzt mal gucken,
0:16:11.013,0:16:14.490
ob ich das noch auswendig kann. Das heißt,[br]wir sagen hier bei der Farbe vielleicht
0:16:14.490,0:16:23.930
nicht gängigerweise rot, sondern sagen "new[br]Color". Und ich glaube, der nimmt hier
0:16:23.930,0:16:31.460
Werte zwischen 0 und 1. Probieren wir das[br]mal. Ja, das passt. Okay, wir wollen hier
0:16:31.460,0:16:35.870
also Werte zwischen 0 und 1 haben. Das[br]heißt, wir könnten jetzt auch so eine Art
0:16:35.870,0:16:40.500
Farbverlauf bauen und wir haben ja wieder[br]hier oben unsere X- und Y-Variable, die wir
0:16:40.500,0:16:47.220
dafür benutzen können. Das heißt, wir[br]nehmen mal hier, das ist der rote, also
0:16:47.220,0:16:52.190
RGB-Rot, Grün, Blau-Anteil, wir können zum[br]Beispiel den mal verändern und abhängig
0:16:52.190,0:17:01.960
machen von unserem Y. Jetzt wird das von[br]oben dunkler. Das Blau nimmt nach unten
0:17:01.960,0:17:08.459
zu. Und vielleicht machen wir das hier[br]noch vom X abhängig. Das heißt nach rechts
0:17:08.459,0:17:12.329
nehmen wir jetzt mehr grün dazu. Jetzt[br]haben wir schon einen schönen Farbverlauf.
0:17:12.329,0:17:16.400
Jetzt hab ich vorhin noch gesagt, oft wird[br]irgendwie was Zufälliges benutzt, so ein
0:17:16.400,0:17:20.250
Zufallsfaktor könnten wir jetzt natürlich[br]auch noch mit reinbringen. Wir könnten zum
0:17:20.250,0:17:27.599
Beispiel hier nicht immer um den Faktor 3[br]rotieren, sondern da einen zufälligen Wert
0:17:27.599,0:17:34.540
wählen. Das macht man in Javascript[br]gängigerweise mit "Math.random". Oder man
0:17:34.540,0:17:36.770
schreibt sich dann noch eine kleine[br]Funktion, die noch ein Minimum und ein
0:17:36.770,0:17:40.470
Maximum übernehmen kann. Ist in dem Fall[br]jetzt nicht so wichtig. Aber wenn ich
0:17:40.470,0:17:45.570
jetzt das mehrfach ausführe, dann seht ihr[br]schon, dass die Rotation einfach immer ein
0:17:45.570,0:17:50.680
bisschen anders ist. Und schon haben wir[br]eigentlich ein nettes, kleines erstes
0:17:50.680,0:17:56.320
Kunstwerk und mein Vorschlag wäre jetzt[br]bei paper.js kann man hier oben den Link
0:17:56.320,0:17:59.050
nehmen, den poste ich jetzt auf Twitter[br]und hänge ihn auch hinten an die Slides
0:17:59.050,0:18:03.350
dran, die sind auch online, dann könnt ihr[br]direkt hierdran weiterschreiben, habt ihr
0:18:03.350,0:18:06.450
praktisch jetzt den gleichen Code bei euch[br]vorliegen und wir können uns gerne jetzt
0:18:06.450,0:18:12.380
noch zusammensetzen und ein bisschen uns[br]unterhalten oder was zusammen hacken und
0:18:12.380,0:18:14.970
Kunst machen und an dieser Stelle würde[br]ich mich dann auch vom Stream
0:18:14.970,0:18:18.309
verabschieden, weil ich glaube der[br]Workshopteil ist dann nicht mehr so
0:18:18.309,0:18:21.211
spannend anzugucken. Vielen Dank fürs[br]zuschauen und ich freu mich, wenn wir uns
0:18:21.211,0:18:23.851
jetzt noch zusammensetzen.
0:18:23.851,0:18:28.150
Applaus
0:18:28.150,0:18:32.966
Abspannmusik
0:18:32.966,0:18:51.102
Untertitel erstellt von c3subtitles.de[br]im Jahr 2019. Mach mit und hilf uns!