1
00:00:00,000 --> 00:00:15,640
35c3-Vorspannmusik
2
00:00:15,640 --> 00:00:21,901
Herald-Engel: Also dann nochmal guten
Morgen alle Anwesenden, guten Morgen an
3
00:00:21,901 --> 00:00:26,410
alle Streamzuschauer und alle, die sich das
im Nachhinein angucken. Wir werden jetzt
4
00:00:26,410 --> 00:00:31,740
von bleeptrack etwas über generative Kunst
hören. Wir werden mit einem Vortragsteil
5
00:00:31,740 --> 00:00:34,220
anfangen und dann wird es einen
Workshopteil geben und in dem könnt ihr
6
00:00:34,220 --> 00:00:36,850
dann auch Fragen stellen.
7
00:00:36,850 --> 00:00:40,120
bleeptrack: Perfekt. So, hallo auch
nochmal von mir. Freut mich, dass sich so
8
00:00:40,120 --> 00:00:43,660
viele noch zu dieser noch recht frühen
Stunde hier eingefunden haben, um sich was
9
00:00:43,660 --> 00:00:49,420
über Kunst anzuhören. Ihr findet mich im
Netz unter bleeptrack, und so seit ein bis
10
00:00:49,420 --> 00:00:54,300
zwei Jahren beschäftige ich mich etwas
mehr mit generativer Kunst. Jetzt müssen
11
00:00:54,300 --> 00:00:58,450
wir vielleicht erstmal klären, was das
überhaupt ist - Generative Art. Und ich
12
00:00:58,450 --> 00:01:02,690
würde das so zusammenfassen: Da gibt es
eigentlich drei Punkte. Das ist Kunst, die
13
00:01:02,690 --> 00:01:06,780
wird irgendwie durch Code erzeugt. Und das
muss nicht unbedingt ein Bild sein, das
14
00:01:06,780 --> 00:01:11,509
könnte genauso Musik sein oder eine
Interaktive Kunstinstallation sein.
15
00:01:11,509 --> 00:01:19,060
Generative Art hat oft auch noch zufällige
Inhalte, das heißt, manche Parameter,
16
00:01:19,060 --> 00:01:23,359
manche Einstellungen an dem Bild werden
zufällig generiert. Das können wir uns
17
00:01:23,359 --> 00:01:27,729
nachher nochmal anschauen. Und oft haben
Kunstwerke ein bestimmten Input, das
18
00:01:27,729 --> 00:01:31,509
könnte ein Foto sein, wenn es ein
Interaktives Kunstwerk ist, kann es die
19
00:01:31,509 --> 00:01:35,270
Bewegung von Personen sein. Ihr kennt zum
Beispiel vielleicht Leap Motions oder
20
00:01:35,270 --> 00:01:40,119
sowas. Da kann man die Hände tracken und
damit virtuelle Sachen anfassen, sowas wär
21
00:01:40,119 --> 00:01:48,830
ganz gängig. Ich hab mal ein Beispiel
mitgebracht - von einem Twitteruser der
22
00:01:48,830 --> 00:01:55,659
heißt @manoloide und der postet sehr viel
Generative Art und ich finde, die sind immer
23
00:01:55,659 --> 00:02:02,130
sehr repräsentativ. Das ist ein Foto
beziehungsweise eine ganze Bilderreihe,
24
00:02:02,130 --> 00:02:06,140
die er hier veröffentlicht hat. Wir können
einmal durchschalten und ihr seht schon,
25
00:02:06,140 --> 00:02:11,890
es besteht hauptsächlich aus grundlegenden
geometischen Figuren – Linien,
26
00:02:11,890 --> 00:02:17,510
Wellenformen, Kreisen. Und die Bilder sind
alle aus einem Algorithmus entstanden,
27
00:02:17,510 --> 00:02:24,000
sehen aber doch recht unterschiedlich aus.
Dadurch, dass halt in dem Fall eine
28
00:02:24,000 --> 00:02:27,310
bestimmte Farbpalette gewählt wird, passt
natürlich die Reihe noch sehr gut
29
00:02:27,310 --> 00:02:30,550
zusammen. Das nochmal, damit ihr so einen
ersten Eindruck habt, wie so was aussehen
30
00:02:30,550 --> 00:02:38,820
könnte. Jetzt zeig ich euch nochmal kurz
ein paar Sachen, die ich eher so mache.
31
00:02:38,820 --> 00:02:43,360
Mir gefallen Generatoren sehr gut, die gar
nicht so super abstrakt sind, sondern ein
32
00:02:43,360 --> 00:02:47,970
bisschen mehr Sachen zeigen, die man auch
irgendwie wiedererkennt. Mein erstes
33
00:02:47,970 --> 00:02:54,260
Projekt, an dem ich gearbeitet hab, das war
der Beetlesbot. Den haben wir hier zum
34
00:02:54,260 --> 00:02:59,470
Beispiel. Das ist ein Generator, der kann
sich Käfer ausdenken. Und wir können hier
35
00:02:59,470 --> 00:03:04,200
zum Beispiel auf "New" klicken und uns mal
ein paar neue anzeigen lassen. Wenn ihr
36
00:03:04,200 --> 00:03:07,370
mich jetzt fragt – warum Käfer? – das kann
ich nicht mehr so genau sagen, das war so
37
00:03:07,370 --> 00:03:10,590
ein wilder Einfall, der nachts um drei
entstanden ist. Aber was ich euch jetzt
38
00:03:10,590 --> 00:03:15,680
hier ganz gut zeigen kann, ist, der Käfer
besteht eigentlich auch aus grundlegenden
39
00:03:15,680 --> 00:03:20,530
Geometrischen Formen. Wir haben hier die
Füße sind Rechtecke, die Fußenden sind
40
00:03:20,530 --> 00:03:25,250
Dreiecke – ich hoffe man erkennt es. Der
Rest sind alles Kurven, die sich auch sehr
41
00:03:25,250 --> 00:03:29,790
einfach beschreiben lassen. So eine Kurve
läuft immer durch Punkte und ich kann die
42
00:03:29,790 --> 00:03:33,060
Punkte bestimmen, wo sie liegen und wie
die Kurve aussehen soll – also welche
43
00:03:33,060 --> 00:03:37,160
Biegung die Kurve hat. Wir können mal ein
Beispiel machen: Hier rechts gibt's die
44
00:03:37,160 --> 00:03:42,040
ganzen Parameter, die ich an so einem
Käfer einstellen kann. Zum Beispiel gibt
45
00:03:42,040 --> 00:03:48,040
es hier für den Flügel vier Kurven oder
auch die Flügelgröße. Die können wir
46
00:03:48,040 --> 00:03:53,060
einfach mal verändern. Das heißt, der
Punkt - hm, der wackelt immer lacht - am unteren
47
00:03:53,060 --> 00:04:04,470
Ende des Flügels, den kann ich eben einfach
versetzen. Und wenn ich einen neuen Käfer
48
00:04:04,470 --> 00:04:08,030
generiere, dann kann ich eben einfach
diese zufälligen Werte auswürfeln und hab
49
00:04:08,030 --> 00:04:12,010
einen komplett neuen Käfer. Das sind
einfach alle Parameter, die ich einstellen
50
00:04:12,010 --> 00:04:16,168
kann. Ein anderes Projekt, das vielleicht
noch nicht so viele gesehen haben, ist sehr
51
00:04:16,168 --> 00:04:22,009
ähnlich. Das ist so ein floraler
Blumengenerator. Der kann hier auf dieser
52
00:04:22,009 --> 00:04:25,580
Webseite noch nicht so viel, wir können
die Farben shufflen, das heißt, die
53
00:04:25,580 --> 00:04:30,720
Farbanordnung ändert sich. Wenn es
funktioniert... Genau, das dauert einen Moment.
54
00:04:30,720 --> 00:04:34,509
Ich kann mir neue Farben zufällig
generieren lassen. In dem Fall werden die
55
00:04:34,509 --> 00:04:40,189
nach keiner Regel ausgesucht, da werden
einfach vier zufällige Farben ausgesucht
56
00:04:40,189 --> 00:04:44,069
und ein Farbverlauf dazwischen benutzt.
Oder ich kann auch die Blätter neu
57
00:04:44,069 --> 00:04:49,840
erstellen lassen. Das wär eine Variante,
was man auch machen kann. Und den letzten
58
00:04:49,840 --> 00:05:00,360
Generator, den habt ihr vielleicht schon
gesehen. Hm, den hab ich nicht offen.
59
00:05:00,360 --> 00:05:07,930
Moment. Dann machen wir den hier schnell
auf. Das ist der – den habt ihr vielleicht
60
00:05:07,930 --> 00:05:13,490
schon gesehen. Das diesjährige 35c3-Motto
hat ja so ein schönes Circuit-Board-Design
61
00:05:13,490 --> 00:05:16,520
und das hat mich direkt dazu animiert,
dass man da ja auch einen Generator
62
00:05:16,520 --> 00:05:19,690
schreiben könnte, damit sich Leute ihre
eigenen Poster oder Sticker machen können.
63
00:05:19,690 --> 00:05:25,460
Und das wäre auch ein schönes generatives
Projekt, das man machen kann. In dem Fall
64
00:05:25,460 --> 00:05:32,180
auch gar nicht so viele Parameter. Man
könnte eigenen Text eingeben und den damit
65
00:05:32,180 --> 00:05:35,550
generieren – und kann noch ein bisschen
die Schriftgröße ver ändern und ansonsten wird
66
00:05:35,550 --> 00:05:46,749
sehr viel zufällig gewürfelt. So viel zu
meinen Projekten. Jetzt ist die Frage –
67
00:05:46,749 --> 00:05:49,680
okay, jetzt habt ihr vielleicht was
Schönes programmiert oder wir programmieren
68
00:05:49,680 --> 00:05:53,059
nachher zusammen im Workshopteil noch was
Schönes – aber was mach ich dann damit?
69
00:05:53,059 --> 00:05:56,870
Dann hab ich jetzt irgendwie ein digitales
Bild und deswegen hab ich noch ein paar
70
00:05:56,870 --> 00:06:01,060
kleine Ideen mitgebracht, was man da so
anstellen kann. Das erste, was ich finde,
71
00:06:01,060 --> 00:06:05,150
was man tun sollte, ist das irgendwie im
Netz zu veröffentlichen. Da haben sich
72
00:06:05,150 --> 00:06:08,719
gerade auf Twitter zwei Hashtags
etabliert, wo sehr viel aktive Menschen
73
00:06:08,719 --> 00:06:12,250
drin sind. Das eine ist #plottertwitter,
zu Plottern komme ich nachher noch, aber
74
00:06:12,250 --> 00:06:19,550
da findet ihr total spannende kreative und
generative Kunst. Und der Hashtag
75
00:06:19,550 --> 00:06:21,900
#generative hat sich auch noch
eingebürgert, Sachen darunter zu
76
00:06:21,900 --> 00:06:25,340
veröffentlichen. Das würde ich euch
empfehlen, euch einfach da mal
77
00:06:25,340 --> 00:06:29,242
durchzuscrollen durch den Twitterfeed und
eure Sachen da auch zu posten und ein
78
00:06:29,242 --> 00:06:33,930
bisschen Feedback von anderen Leuten zu
bekommen. Ansonsten, man kann es natürlich
79
00:06:33,930 --> 00:06:37,020
drucken. Wie jeder, ihr könnt einen
Posterabzug machen, es gibt
80
00:06:37,020 --> 00:06:41,169
hochqualitative Museumsdrucke auf ganz
tolles Papier, oder wie hier im
81
00:06:41,169 --> 00:06:43,939
Hintergrund, ihr könnt auch Sticker
drucken und Leuten in die Hand drücken,
82
00:06:43,939 --> 00:06:48,310
wenn sie euch treffen. Das finde ich immer
sehr schön, außerdem mag jeder Sticker.
83
00:06:48,310 --> 00:06:53,850
Die Alternative wäre auch noch, das zu
plotten. Stiftplotter haben gerade so ein
84
00:06:53,850 --> 00:06:57,289
bisschen ein Revival in der Generative-
Art-Szene. Stiftplotter wurden eigentlich
85
00:06:57,289 --> 00:07:02,039
verwendet früher zum technischen Zeichnen,
um da Dinge zu plotten. Zum Beispiel in
86
00:07:02,039 --> 00:07:05,349
der Architektur. Das ist praktisch, man
könnte sagen, der Vorgänger zum
87
00:07:05,349 --> 00:07:09,780
klassischen Ink-Jet-Drucker. Es ist
einfach ein Gerät mit einer X und Y-Achse
88
00:07:09,780 --> 00:07:13,580
und kann auch noch den Stift anheben und
absetzen - also eine mini-Z-Achse - und
89
00:07:13,580 --> 00:07:18,550
kann eben computergesteuert diesen Stift
über ein Blatt Papier bewegen. Und das
90
00:07:18,550 --> 00:07:22,949
bietet sich natürlich auch sehr an, um
seine Kunst damit nicht auszudrucken
91
00:07:22,949 --> 00:07:28,120
sondern auszuplotten. Auch ein sehr
schönes Projekt, was man machen kann, ist
92
00:07:28,120 --> 00:07:32,659
ein Bot draus zu schreiben. Auf Twitter,
auf Mastodon, das geht ziemlich zügig und
93
00:07:32,659 --> 00:07:36,350
man erfreut sich dann selber etwas mehr an
seiner Kunst, finde ich. Weil man kann den Bot
94
00:07:36,350 --> 00:07:40,240
ja so schreiben, dass er alle sechs Stunden,
alle vier Stunden einfach ein neues Bild
95
00:07:40,240 --> 00:07:43,349
generiert und postet und so muss man
selber nicht dauernd auf den
96
00:07:43,349 --> 00:07:46,110
"Neu-generieren"-Button klicken, sondern wird
immer selber ein bisschen von seinem
97
00:07:46,110 --> 00:07:50,020
Projekt überrascht. Das ist sehr nett und
andere Leute können auch daran teilhaben.
98
00:07:50,020 --> 00:07:55,839
Ihr könnt es natürlich auch animieren.
Gerade bei so Projekten die sehr viel
99
00:07:55,839 --> 00:07:59,870
Zufallsvariablen oder Parameter haben,
funktioniert es ziemlich einfach, das seht
100
00:07:59,870 --> 00:08:05,039
ihr jetzt hier im Hintergrund für den
Käfergenerator laufen. Denn der in dem
101
00:08:05,039 --> 00:08:09,490
Fall besteht ja, wie gesagt, aus knapp über
fünfzig Parametern und ich kann jeden Parameter
102
00:08:09,490 --> 00:08:12,990
einfach leicht verändern. Das ist ja
praktisch ein Vektor, ich zähle zu jedem
103
00:08:12,990 --> 00:08:17,029
Vektorwert ein bisschen was dazu, ziehe
ein bisschen was ab, zeichne das wieder
104
00:08:17,029 --> 00:08:21,379
und iteriere da einfach drüber. Und dann
habe ich wie so eine Art Morph-Animation,
105
00:08:21,379 --> 00:08:24,839
die in diesem Vektorraum einfach
entlangläuft. Und damit hat man super
106
00:08:24,839 --> 00:08:31,979
schnell eine Animation gebaut mit super
wenig Aufwand. Wir können auch noch etwas
107
00:08:31,979 --> 00:08:34,539
Abgefahreneres machen. Wir können
natürlich nicht nur auf Papier drucken,
108
00:08:34,539 --> 00:08:37,799
wir können natürlich auch auf Stoff
drucken. Und im Hintergrund seht ihr zum
109
00:08:37,799 --> 00:08:41,409
Beispiel ein Kissen mit diesem
Blumengenerator. Alternativen sind, man
110
00:08:41,409 --> 00:08:46,160
kann natürlich sich auch irgendwie diese
Mäntel bedrucken und selbst nähen, oder
111
00:08:46,160 --> 00:08:50,450
sich sonst irgendwie kreativ auch mit anderen
Materialien austoben. Ich glaube, man kann
112
00:08:50,450 --> 00:08:56,251
mittlerweile mit Online-Diensten so
ziemlich alles bedrucken lassen. Oder ihr
113
00:08:56,251 --> 00:08:59,850
geht in den nächsten Makerspace bei euch
und schmeißt mal die
114
00:08:59,850 --> 00:09:05,450
Holzverarbeitungsmaschinen an. Man kann
generative Kunst auch sehr schön fräsen,
115
00:09:05,450 --> 00:09:08,520
wie ich finde. Das sind – ohje, fällt mir
der Name ein – ich glaube, die Platten
116
00:09:08,520 --> 00:09:15,310
heißen HPL in dem Fall, die haben innen
eine schwarze Schicht und außen auf den
117
00:09:15,310 --> 00:09:18,990
beiden äußeren Seiten eine weiße
Plastikbeschichtung und die lässt sich
118
00:09:18,990 --> 00:09:22,620
halt hervorragend abfräsen und dann tritt
die schwarze Schicht, der schwarze Kern in
119
00:09:22,620 --> 00:09:27,400
der Mitte raus in dem Fall. Das geht auch
sehr zügig und so eine CNC-Maschine zu
120
00:09:27,400 --> 00:09:35,200
bedienen macht ja auch sehr viel Spaß. So
und jetzt kommen wir zum kurzen
121
00:09:35,200 --> 00:09:40,240
Praxisteil, den ich euch noch zeigen würde.
Der Talk heißt ja "Generative Art with
122
00:09:40,240 --> 00:09:44,960
paper.js", das ist momentan mein Tool der
Wahl, um irgendwie generative Kunst zu
123
00:09:44,960 --> 00:09:51,620
erstellen, das ist ein Javascript-
Framework, das einem sehr dabei
124
00:09:51,620 --> 00:09:54,680
unterstützt, Vektorgrafiken zu erstellen.
Man kann sich das ein bisschen vorstellen,
125
00:09:54,680 --> 00:09:58,990
als würde man in Inkscape so richtig
ordentlich skripten können. Und um da
126
00:09:58,990 --> 00:10:02,150
einfach so einen Mini-Einblick zu geben,
zeig ich euch jetzt ein paar Zeilen Code
127
00:10:02,150 --> 00:10:04,600
und danach machen wir einen kleinen
Workshopteil, wo wir uns einfach ein
128
00:10:04,600 --> 00:10:18,240
bisschen zusammensetzen können, jeder kann
mal herumprobieren. Das ist der Plan. So,
129
00:10:18,240 --> 00:10:22,600
hier oben seht ihr schon paperjs.org, das
ist die Webseite und die bietet auch
130
00:10:22,600 --> 00:10:25,590
direkt so einen Editor, das heißt ihr
müsst eigentlich gar nichts herunterladen.
131
00:10:25,590 --> 00:10:30,560
Die Webseite könnt ihr direkt öffnen und
loslegen mit paper.js. Das ist, was ich
132
00:10:30,560 --> 00:10:36,380
jetzt mal mache. Und mein Plan ist: Zuerst
möchte ich mal kurz ein Rechteck zeichnen.
133
00:10:36,380 --> 00:10:40,310
Das heißt, ich lege mir eine Variable an,
damit ich später dieses Rechteck auch
134
00:10:40,310 --> 00:10:47,490
weiter manipulieren kann. Es gibt die
Überklasse "Path", die beinhaltet auch
135
00:10:47,490 --> 00:10:53,590
diverse Formen, eben zum Beispiel
Rechtecke. Und jetzt muss ich angeben, wie
136
00:10:53,590 --> 00:11:05,160
dieses Rechteck aussehen soll. In dem Fall
die Größe. So ein Rechteck definiert sich
137
00:11:05,160 --> 00:11:08,670
erstmal durch die Position, wo es liegt.
Das heißt, wir erstellen einen neuen
138
00:11:08,670 --> 00:11:14,190
Punkt. In dem Fall vielleicht in der
linken oberen Ecke, und wir brauchen noch
139
00:11:14,190 --> 00:11:20,200
eine Größe. Und die Größe, in dem Fall
Rechteck, hat ja zwei Dimensionen, in die es
140
00:11:20,200 --> 00:11:24,390
eine Größe haben kann. Wir sagen mal, das
wird vielleicht ein Quadrat und das ist 40
141
00:11:24,390 --> 00:11:30,920
mal 40 groß. Jetzt kann ich hier oben
direkt auf Play drücken. Wenn ich das tue
142
00:11:30,920 --> 00:11:35,340
passiert erstmal gar nichts, weil ich habe
diesem Rechteck noch kein Styling gegeben.
143
00:11:35,340 --> 00:11:38,730
Das Rechteck hat noch keine Farben und
noch keine Strichstärke und weiß gar nicht,
144
00:11:38,730 --> 00:11:42,560
wie das aussehen soll. Deswegen müssen wir
das dem Rechteck auch noch kurz
145
00:11:42,560 --> 00:11:55,220
beibringen. Es gibt zum Beispiel das
Attribut "strokeColor" für die Strichfarbe
146
00:11:55,220 --> 00:11:58,890
und da lassen sich auch direkt Strings
angeben für so Basis-Farben, die kennt ihr
147
00:11:58,890 --> 00:12:05,630
aus CSS vielleicht. Das heißt, ich kann
einfach mal sagen: Die Strichfarbe soll
148
00:12:05,630 --> 00:12:09,320
schwarz sein und wenn ich jetzt auf Play
drücke und es ausführe, sehe ich oben links
149
00:12:09,320 --> 00:12:13,860
auch schon mein Rechteck. Ein Rechteck
alleine ist jetzt vielleicht so ein
150
00:12:13,860 --> 00:12:18,420
bisschen langweilig, deswegen wollen wir
ein paar mehr Rechtecke haben. Deswegen
151
00:12:18,420 --> 00:12:22,000
würde ich sagen, wir bauen uns kurz eine
for-Schleife mit der wir einfach mal zehn
152
00:12:22,000 --> 00:12:40,310
Stück erstellen können. Nennen wir das
vielleicht mal x. Und jetzt müssen wir nur
153
00:12:40,310 --> 00:12:43,140
sagen, wenn ich jetzt auf Play drücke dann
landen die natürlich alle auf der gleichen
154
00:12:43,140 --> 00:12:49,830
Stelle, das ist doof. Wir wollen das ja
verschieben. Deswegen sagen wir mal, dass
155
00:12:49,830 --> 00:12:53,530
die alle nebeneinander liegen sollen, das
sieht dann so aus. Jetzt haben wir schon
156
00:12:53,530 --> 00:12:58,510
eine ganze Reihe. Das ist schonmal nicht
schlecht. So, jetzt können wir mal
157
00:12:58,510 --> 00:13:05,270
anfangen, die zu manipulieren. Vielleicht
wollen wir die von links nach rechts
158
00:13:05,270 --> 00:13:13,700
rotieren lassen. Dafür gibt es auch direkt
einen Befehl. Wir sagen einfach "rotate",
159
00:13:13,700 --> 00:13:20,070
das ist so das Naheliegendste. Können wir
ja mal kurz ausprobieren, was für ein Wert
160
00:13:20,070 --> 00:13:28,080
da sinnvoll ist. Okay, 30 ist schon mal
ganz cool. Lassen wir es doch einfach mal
161
00:13:28,080 --> 00:13:31,470
um x rotieren, das ist vielleicht ein
bisschen krass. Ne, das ist sogar ein
162
00:13:31,470 --> 00:13:34,120
bisschen langweilig - also wir sehen
schon, der fängt jetzt praktisch bei 0 an
163
00:13:34,120 --> 00:13:37,030
und geht bis zur Rotation 10, das ist ein
bisschen wenig, können wir mal ein
164
00:13:37,030 --> 00:13:41,280
bisschen mehr machen, dass es stärker
rotiert. Oh – das ist vielleicht ein
165
00:13:41,280 --> 00:13:48,260
bisschen arg schlimm. Hm. 3 finde ich ganz
gut. Jetzt haben wir schonmal ein bisschen
166
00:13:48,260 --> 00:13:52,650
irgendwie Bewegung in dem Bild. Was es
auch oft noch ganz spannend macht, ist, wenn
167
00:13:52,650 --> 00:13:57,880
wir Sachen manipulieren an einem Objekt,
und zwar in unterschiedliche Dimensionen.
168
00:13:57,880 --> 00:14:00,660
Jetzt haben wir ja eine Reihe Rechtecke,
jetzt können wir praktisch ein ganzes Grid
169
00:14:00,660 --> 00:14:04,660
Rechtecke machen und nach unten was
anderes manipulieren. Wir können sie zum
170
00:14:04,660 --> 00:14:09,130
Beispiel wachsen lassen. Das heißt, ich
mache mir noch eine for-Schleife für die
171
00:14:09,130 --> 00:14:28,980
Y-Richtung nach unten. Genau, jetzt müssen
wir nur noch sagen, dass sie sich auch
172
00:14:28,980 --> 00:14:37,070
verschieben sollen. Und schon haben wir
ein Grid nach unten. Das sieht jetzt noch
173
00:14:37,070 --> 00:14:42,210
sehr wüst und durcheinander aus. Genau -
lassen wir die doch mal wachsen. Dafür
174
00:14:42,210 --> 00:14:45,940
sagen wir doch einfach mal "rect.scale",
also es ist bei paper.js eigentlich immer
175
00:14:45,940 --> 00:14:49,430
sehr naheliegend, was man vermutet, was
an Methoden da ist, dann sind die eigentlich
176
00:14:49,430 --> 00:14:52,740
auch da. Ich hatte selten den Fall, dass
mal irgendwas total zu vermissen, was
177
00:14:52,740 --> 00:15:05,220
überhaupt nicht existiert. Wir wollen bei
0 anfangen, machen wir das mal so. Genau.
178
00:15:05,220 --> 00:15:09,300
Jetzt skalieren wir praktisch von 0 weg,
das heißt die oberste Zeile ist ganz
179
00:15:09,300 --> 00:15:13,730
verschwunden und wir lassen die von oben
nach unten wachsen. Jetzt hat das schon
180
00:15:13,730 --> 00:15:16,820
irgendwie eine ganz nette Dynamik, es ist
noch sehr farblos. Schauen wir uns mal an,
181
00:15:16,820 --> 00:15:28,740
wie wir bei paper.js noch mit Farbe umgehen
können. Es gibt das Attribut "fillColor".
182
00:15:28,740 --> 00:15:40,990
Füllen wir mal mit rot, erstmal. Genau,
das passt. Was man auch noch verändern
183
00:15:40,990 --> 00:15:44,790
kann, was man öfter braucht, ist die
Strichdicke. Das sind praktisch die drei
184
00:15:44,790 --> 00:15:48,250
Farbparameter die man in der gängigen
Vektorgrafik hat. Die Füllfarbe, die
185
00:15:48,250 --> 00:15:56,080
Strichfarbe und die Strichdicke. Das ist
bei paper.js in dem Fall die "strokeWidth".
186
00:15:56,080 --> 00:16:02,570
Die könnte ich jetzt auf 3 setzen, dann
ist die schwarze Umrandung noch viel
187
00:16:02,570 --> 00:16:08,100
fetter. 3 finde ich jetzt vielleicht arg
schlimm, machen wir mal 2. So jetzt
188
00:16:08,100 --> 00:16:11,013
könnten wir noch zum Schluss die Farbe
verändern, da muss ich jetzt mal gucken,
189
00:16:11,013 --> 00:16:14,490
ob ich das noch auswendig kann. Das heißt,
wir sagen hier bei der Farbe vielleicht
190
00:16:14,490 --> 00:16:23,930
nicht gängigerweise rot, sondern sagen "new
Color". Und ich glaube, der nimmt hier
191
00:16:23,930 --> 00:16:31,460
Werte zwischen 0 und 1. Probieren wir das
mal. Ja, das passt. Okay, wir wollen hier
192
00:16:31,460 --> 00:16:35,870
also Werte zwischen 0 und 1 haben. Das
heißt, wir könnten jetzt auch so eine Art
193
00:16:35,870 --> 00:16:40,500
Farbverlauf bauen und wir haben ja wieder
hier oben unsere X- und Y-Variable, die wir
194
00:16:40,500 --> 00:16:47,220
dafür benutzen können. Das heißt, wir
nehmen mal hier, das ist der rote, also
195
00:16:47,220 --> 00:16:52,190
RGB-Rot, Grün, Blau-Anteil, wir können zum
Beispiel den mal verändern und abhängig
196
00:16:52,190 --> 00:17:01,960
machen von unserem Y. Jetzt wird das von
oben dunkler. Das Blau nimmt nach unten
197
00:17:01,960 --> 00:17:08,459
zu. Und vielleicht machen wir das hier
noch vom X abhängig. Das heißt nach rechts
198
00:17:08,459 --> 00:17:12,329
nehmen wir jetzt mehr grün dazu. Jetzt
haben wir schon einen schönen Farbverlauf.
199
00:17:12,329 --> 00:17:16,400
Jetzt hab ich vorhin noch gesagt, oft wird
irgendwie was Zufälliges benutzt, so ein
200
00:17:16,400 --> 00:17:20,250
Zufallsfaktor könnten wir jetzt natürlich
auch noch mit reinbringen. Wir könnten zum
201
00:17:20,250 --> 00:17:27,599
Beispiel hier nicht immer um den Faktor 3
rotieren, sondern da einen zufälligen Wert
202
00:17:27,599 --> 00:17:34,540
wählen. Das macht man in Javascript
gängigerweise mit "Math.random". Oder man
203
00:17:34,540 --> 00:17:36,770
schreibt sich dann noch eine kleine
Funktion, die noch ein Minimum und ein
204
00:17:36,770 --> 00:17:40,470
Maximum übernehmen kann. Ist in dem Fall
jetzt nicht so wichtig. Aber wenn ich
205
00:17:40,470 --> 00:17:45,570
jetzt das mehrfach ausführe, dann seht ihr
schon, dass die Rotation einfach immer ein
206
00:17:45,570 --> 00:17:50,680
bisschen anders ist. Und schon haben wir
eigentlich ein nettes, kleines erstes
207
00:17:50,680 --> 00:17:56,320
Kunstwerk und mein Vorschlag wäre jetzt
bei paper.js kann man hier oben den Link
208
00:17:56,320 --> 00:17:59,050
nehmen, den poste ich jetzt auf Twitter
und hänge ihn auch hinten an die Slides
209
00:17:59,050 --> 00:18:03,350
dran, die sind auch online, dann könnt ihr
direkt hierdran weiterschreiben, habt ihr
210
00:18:03,350 --> 00:18:06,450
praktisch jetzt den gleichen Code bei euch
vorliegen und wir können uns gerne jetzt
211
00:18:06,450 --> 00:18:12,380
noch zusammensetzen und ein bisschen uns
unterhalten oder was zusammen hacken und
212
00:18:12,380 --> 00:18:14,970
Kunst machen und an dieser Stelle würde
ich mich dann auch vom Stream
213
00:18:14,970 --> 00:18:18,309
verabschieden, weil ich glaube der
Workshopteil ist dann nicht mehr so
214
00:18:18,309 --> 00:18:21,211
spannend anzugucken. Vielen Dank fürs
zuschauen und ich freu mich, wenn wir uns
215
00:18:21,211 --> 00:18:23,851
jetzt noch zusammensetzen.
216
00:18:23,851 --> 00:18:28,150
Applaus
217
00:18:28,150 --> 00:18:32,966
Abspannmusik
218
00:18:32,966 --> 00:18:51,102
Untertitel erstellt von c3subtitles.de
im Jahr 2019. Mach mit und hilf uns!