Return to Video

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

  • 0:00 - 0:16
    35c3-Vorspannmusik
  • 0:16 - 0:22
    Herald-Engel: Also dann nochmal guten
    Morgen alle Anwesenden, guten Morgen an
  • 0:22 - 0:26
    alle Streamzuschauer und alle, die sich das
    im Nachhinein angucken. Wir werden jetzt
  • 0:26 - 0:32
    von bleeptrack etwas über generative Kunst
    hören. Wir werden mit einem Vortragsteil
  • 0:32 - 0:34
    anfangen und dann wird es einen
    Workshopteil geben und in dem könnt ihr
  • 0:34 - 0:37
    dann auch Fragen stellen.
  • 0:37 - 0:40
    bleeptrack: Perfekt. So, hallo auch
    nochmal von mir. Freut mich, dass sich so
  • 0:40 - 0:44
    viele noch zu dieser noch recht frühen
    Stunde hier eingefunden haben, um sich was
  • 0:44 - 0:49
    über Kunst anzuhören. Ihr findet mich im
    Netz unter bleeptrack, und so seit ein bis
  • 0:49 - 0:54
    zwei Jahren beschäftige ich mich etwas
    mehr mit generativer Kunst. Jetzt müssen
  • 0:54 - 0:58
    wir vielleicht erstmal klären, was das
    überhaupt ist - Generative Art. Und ich
  • 0:58 - 1:03
    würde das so zusammenfassen: Da gibt es
    eigentlich drei Punkte. Das ist Kunst, die
  • 1:03 - 1:07
    wird irgendwie durch Code erzeugt. Und das
    muss nicht unbedingt ein Bild sein, das
  • 1:07 - 1:12
    könnte genauso Musik sein oder eine
    Interaktive Kunstinstallation sein.
  • 1:12 - 1:19
    Generative Art hat oft auch noch zufällige
    Inhalte, das heißt, manche Parameter,
  • 1:19 - 1:23
    manche Einstellungen an dem Bild werden
    zufällig generiert. Das können wir uns
  • 1:23 - 1:28
    nachher nochmal anschauen. Und oft haben
    Kunstwerke ein bestimmten Input, das
  • 1:28 - 1:32
    könnte ein Foto sein, wenn es ein
    Interaktives Kunstwerk ist, kann es die
  • 1:32 - 1:35
    Bewegung von Personen sein. Ihr kennt zum
    Beispiel vielleicht Leap Motions oder
  • 1:35 - 1:40
    sowas. Da kann man die Hände tracken und
    damit virtuelle Sachen anfassen, sowas wär
  • 1:40 - 1:49
    ganz gängig. Ich hab mal ein Beispiel
    mitgebracht - von einem Twitteruser der
  • 1:49 - 1:56
    heißt @manoloide und der postet sehr viel
    Generative Art und ich finde, die sind immer
  • 1:56 - 2:02
    sehr repräsentativ. Das ist ein Foto
    beziehungsweise eine ganze Bilderreihe,
  • 2:02 - 2:06
    die er hier veröffentlicht hat. Wir können
    einmal durchschalten und ihr seht schon,
  • 2:06 - 2:12
    es besteht hauptsächlich aus grundlegenden
    geometischen Figuren – Linien,
  • 2:12 - 2:18
    Wellenformen, Kreisen. Und die Bilder sind
    alle aus einem Algorithmus entstanden,
  • 2:18 - 2:24
    sehen aber doch recht unterschiedlich aus.
    Dadurch, dass halt in dem Fall eine
  • 2:24 - 2:27
    bestimmte Farbpalette gewählt wird, passt
    natürlich die Reihe noch sehr gut
  • 2:27 - 2:31
    zusammen. Das nochmal, damit ihr so einen
    ersten Eindruck habt, wie so was aussehen
  • 2:31 - 2:39
    könnte. Jetzt zeig ich euch nochmal kurz
    ein paar Sachen, die ich eher so mache.
  • 2:39 - 2:43
    Mir gefallen Generatoren sehr gut, die gar
    nicht so super abstrakt sind, sondern ein
  • 2:43 - 2:48
    bisschen mehr Sachen zeigen, die man auch
    irgendwie wiedererkennt. Mein erstes
  • 2:48 - 2:54
    Projekt, an dem ich gearbeitet hab, das war
    der Beetlesbot. Den haben wir hier zum
  • 2:54 - 2:59
    Beispiel. Das ist ein Generator, der kann
    sich Käfer ausdenken. Und wir können hier
  • 2:59 - 3:04
    zum Beispiel auf "New" klicken und uns mal
    ein paar neue anzeigen lassen. Wenn ihr
  • 3:04 - 3:07
    mich jetzt fragt – warum Käfer? – das kann
    ich nicht mehr so genau sagen, das war so
  • 3:07 - 3:11
    ein wilder Einfall, der nachts um drei
    entstanden ist. Aber was ich euch jetzt
  • 3:11 - 3:16
    hier ganz gut zeigen kann, ist, der Käfer
    besteht eigentlich auch aus grundlegenden
  • 3:16 - 3:21
    Geometrischen Formen. Wir haben hier die
    Füße sind Rechtecke, die Fußenden sind
  • 3:21 - 3:25
    Dreiecke – ich hoffe man erkennt es. Der
    Rest sind alles Kurven, die sich auch sehr
  • 3:25 - 3:30
    einfach beschreiben lassen. So eine Kurve
    läuft immer durch Punkte und ich kann die
  • 3:30 - 3:33
    Punkte bestimmen, wo sie liegen und wie
    die Kurve aussehen soll – also welche
  • 3:33 - 3:37
    Biegung die Kurve hat. Wir können mal ein
    Beispiel machen: Hier rechts gibt's die
  • 3:37 - 3:42
    ganzen Parameter, die ich an so einem
    Käfer einstellen kann. Zum Beispiel gibt
  • 3:42 - 3:48
    es hier für den Flügel vier Kurven oder
    auch die Flügelgröße. Die können wir
  • 3:48 - 3:53
    einfach mal verändern. Das heißt, der
    Punkt - hm, der wackelt immer lacht - am unteren
  • 3:53 - 4:04
    Ende des Flügels, den kann ich eben einfach
    versetzen. Und wenn ich einen neuen Käfer
  • 4:04 - 4:08
    generiere, dann kann ich eben einfach
    diese zufälligen Werte auswürfeln und hab
  • 4:08 - 4:12
    einen komplett neuen Käfer. Das sind
    einfach alle Parameter, die ich einstellen
  • 4:12 - 4:16
    kann. Ein anderes Projekt, das vielleicht
    noch nicht so viele gesehen haben, ist sehr
  • 4:16 - 4:22
    ähnlich. Das ist so ein floraler
    Blumengenerator. Der kann hier auf dieser
  • 4:22 - 4:26
    Webseite noch nicht so viel, wir können
    die Farben shufflen, das heißt, die
  • 4:26 - 4:31
    Farbanordnung ändert sich. Wenn es
    funktioniert... Genau, das dauert einen Moment.
  • 4:31 - 4:35
    Ich kann mir neue Farben zufällig
    generieren lassen. In dem Fall werden die
  • 4:35 - 4:40
    nach keiner Regel ausgesucht, da werden
    einfach vier zufällige Farben ausgesucht
  • 4:40 - 4:44
    und ein Farbverlauf dazwischen benutzt.
    Oder ich kann auch die Blätter neu
  • 4:44 - 4:50
    erstellen lassen. Das wär eine Variante,
    was man auch machen kann. Und den letzten
  • 4:50 - 5:00
    Generator, den habt ihr vielleicht schon
    gesehen. Hm, den hab ich nicht offen.
  • 5:00 - 5:08
    Moment. Dann machen wir den hier schnell
    auf. Das ist der – den habt ihr vielleicht
  • 5:08 - 5:13
    schon gesehen. Das diesjährige 35c3-Motto
    hat ja so ein schönes Circuit-Board-Design
  • 5:13 - 5:17
    und das hat mich direkt dazu animiert,
    dass man da ja auch einen Generator
  • 5:17 - 5:20
    schreiben könnte, damit sich Leute ihre
    eigenen Poster oder Sticker machen können.
  • 5:20 - 5:25
    Und das wäre auch ein schönes generatives
    Projekt, das man machen kann. In dem Fall
  • 5:25 - 5:32
    auch gar nicht so viele Parameter. Man
    könnte eigenen Text eingeben und den damit
  • 5:32 - 5:36
    generieren – und kann noch ein bisschen
    die Schriftgröße ver ändern und ansonsten wird
  • 5:36 - 5:47
    sehr viel zufällig gewürfelt. So viel zu
    meinen Projekten. Jetzt ist die Frage –
  • 5:47 - 5:50
    okay, jetzt habt ihr vielleicht was
    Schönes programmiert oder wir programmieren
  • 5:50 - 5:53
    nachher zusammen im Workshopteil noch was
    Schönes – aber was mach ich dann damit?
  • 5:53 - 5:57
    Dann hab ich jetzt irgendwie ein digitales
    Bild und deswegen hab ich noch ein paar
  • 5:57 - 6:01
    kleine Ideen mitgebracht, was man da so
    anstellen kann. Das erste, was ich finde,
  • 6:01 - 6:05
    was man tun sollte, ist das irgendwie im
    Netz zu veröffentlichen. Da haben sich
  • 6:05 - 6:09
    gerade auf Twitter zwei Hashtags
    etabliert, wo sehr viel aktive Menschen
  • 6:09 - 6:12
    drin sind. Das eine ist #plottertwitter,
    zu Plottern komme ich nachher noch, aber
  • 6:12 - 6:20
    da findet ihr total spannende kreative und
    generative Kunst. Und der Hashtag
  • 6:20 - 6:22
    #generative hat sich auch noch
    eingebürgert, Sachen darunter zu
  • 6:22 - 6:25
    veröffentlichen. Das würde ich euch
    empfehlen, euch einfach da mal
  • 6:25 - 6:29
    durchzuscrollen durch den Twitterfeed und
    eure Sachen da auch zu posten und ein
  • 6:29 - 6:34
    bisschen Feedback von anderen Leuten zu
    bekommen. Ansonsten, man kann es natürlich
  • 6:34 - 6:37
    drucken. Wie jeder, ihr könnt einen
    Posterabzug machen, es gibt
  • 6:37 - 6:41
    hochqualitative Museumsdrucke auf ganz
    tolles Papier, oder wie hier im
  • 6:41 - 6:44
    Hintergrund, ihr könnt auch Sticker
    drucken und Leuten in die Hand drücken,
  • 6:44 - 6:48
    wenn sie euch treffen. Das finde ich immer
    sehr schön, außerdem mag jeder Sticker.
  • 6:48 - 6:54
    Die Alternative wäre auch noch, das zu
    plotten. Stiftplotter haben gerade so ein
  • 6:54 - 6:57
    bisschen ein Revival in der Generative-
    Art-Szene. Stiftplotter wurden eigentlich
  • 6:57 - 7:02
    verwendet früher zum technischen Zeichnen,
    um da Dinge zu plotten. Zum Beispiel in
  • 7:02 - 7:05
    der Architektur. Das ist praktisch, man
    könnte sagen, der Vorgänger zum
  • 7:05 - 7:10
    klassischen Ink-Jet-Drucker. Es ist
    einfach ein Gerät mit einer X und Y-Achse
  • 7:10 - 7:14
    und kann auch noch den Stift anheben und
    absetzen - also eine mini-Z-Achse - und
  • 7:14 - 7:19
    kann eben computergesteuert diesen Stift
    über ein Blatt Papier bewegen. Und das
  • 7:19 - 7:23
    bietet sich natürlich auch sehr an, um
    seine Kunst damit nicht auszudrucken
  • 7:23 - 7:28
    sondern auszuplotten. Auch ein sehr
    schönes Projekt, was man machen kann, ist
  • 7:28 - 7:33
    ein Bot draus zu schreiben. Auf Twitter,
    auf Mastodon, das geht ziemlich zügig und
  • 7:33 - 7:36
    man erfreut sich dann selber etwas mehr an
    seiner Kunst, finde ich. Weil man kann den Bot
  • 7:36 - 7:40
    ja so schreiben, dass er alle sechs Stunden,
    alle vier Stunden einfach ein neues Bild
  • 7:40 - 7:43
    generiert und postet und so muss man
    selber nicht dauernd auf den
  • 7:43 - 7:46
    "Neu-generieren"-Button klicken, sondern wird
    immer selber ein bisschen von seinem
  • 7:46 - 7:50
    Projekt überrascht. Das ist sehr nett und
    andere Leute können auch daran teilhaben.
  • 7:50 - 7:56
    Ihr könnt es natürlich auch animieren.
    Gerade bei so Projekten die sehr viel
  • 7:56 - 8:00
    Zufallsvariablen oder Parameter haben,
    funktioniert es ziemlich einfach, das seht
  • 8:00 - 8:05
    ihr jetzt hier im Hintergrund für den
    Käfergenerator laufen. Denn der in dem
  • 8:05 - 8:09
    Fall besteht ja, wie gesagt, aus knapp über
    fünfzig Parametern und ich kann jeden Parameter
  • 8:09 - 8:13
    einfach leicht verändern. Das ist ja
    praktisch ein Vektor, ich zähle zu jedem
  • 8:13 - 8:17
    Vektorwert ein bisschen was dazu, ziehe
    ein bisschen was ab, zeichne das wieder
  • 8:17 - 8:21
    und iteriere da einfach drüber. Und dann
    habe ich wie so eine Art Morph-Animation,
  • 8:21 - 8:25
    die in diesem Vektorraum einfach
    entlangläuft. Und damit hat man super
  • 8:25 - 8:32
    schnell eine Animation gebaut mit super
    wenig Aufwand. Wir können auch noch etwas
  • 8:32 - 8:35
    Abgefahreneres machen. Wir können
    natürlich nicht nur auf Papier drucken,
  • 8:35 - 8:38
    wir können natürlich auch auf Stoff
    drucken. Und im Hintergrund seht ihr zum
  • 8:38 - 8:41
    Beispiel ein Kissen mit diesem
    Blumengenerator. Alternativen sind, man
  • 8:41 - 8:46
    kann natürlich sich auch irgendwie diese
    Mäntel bedrucken und selbst nähen, oder
  • 8:46 - 8:50
    sich sonst irgendwie kreativ auch mit anderen
    Materialien austoben. Ich glaube, man kann
  • 8:50 - 8:56
    mittlerweile mit Online-Diensten so
    ziemlich alles bedrucken lassen. Oder ihr
  • 8:56 - 9:00
    geht in den nächsten Makerspace bei euch
    und schmeißt mal die
  • 9:00 - 9:05
    Holzverarbeitungsmaschinen an. Man kann
    generative Kunst auch sehr schön fräsen,
  • 9:05 - 9:09
    wie ich finde. Das sind – ohje, fällt mir
    der Name ein – ich glaube, die Platten
  • 9:09 - 9:15
    heißen HPL in dem Fall, die haben innen
    eine schwarze Schicht und außen auf den
  • 9:15 - 9:19
    beiden äußeren Seiten eine weiße
    Plastikbeschichtung und die lässt sich
  • 9:19 - 9:23
    halt hervorragend abfräsen und dann tritt
    die schwarze Schicht, der schwarze Kern in
  • 9:23 - 9:27
    der Mitte raus in dem Fall. Das geht auch
    sehr zügig und so eine CNC-Maschine zu
  • 9:27 - 9:35
    bedienen macht ja auch sehr viel Spaß. So
    und jetzt kommen wir zum kurzen
  • 9:35 - 9:40
    Praxisteil, den ich euch noch zeigen würde.
    Der Talk heißt ja "Generative Art with
  • 9:40 - 9:45
    paper.js", das ist momentan mein Tool der
    Wahl, um irgendwie generative Kunst zu
  • 9:45 - 9:52
    erstellen, das ist ein Javascript-
    Framework, das einem sehr dabei
  • 9:52 - 9:55
    unterstützt, Vektorgrafiken zu erstellen.
    Man kann sich das ein bisschen vorstellen,
  • 9:55 - 9:59
    als würde man in Inkscape so richtig
    ordentlich skripten können. Und um da
  • 9:59 - 10:02
    einfach so einen Mini-Einblick zu geben,
    zeig ich euch jetzt ein paar Zeilen Code
  • 10:02 - 10:05
    und danach machen wir einen kleinen
    Workshopteil, wo wir uns einfach ein
  • 10:05 - 10:18
    bisschen zusammensetzen können, jeder kann
    mal herumprobieren. Das ist der Plan. So,
  • 10:18 - 10:23
    hier oben seht ihr schon paperjs.org, das
    ist die Webseite und die bietet auch
  • 10:23 - 10:26
    direkt so einen Editor, das heißt ihr
    müsst eigentlich gar nichts herunterladen.
  • 10:26 - 10:31
    Die Webseite könnt ihr direkt öffnen und
    loslegen mit paper.js. Das ist, was ich
  • 10:31 - 10:36
    jetzt mal mache. Und mein Plan ist: Zuerst
    möchte ich mal kurz ein Rechteck zeichnen.
  • 10:36 - 10:40
    Das heißt, ich lege mir eine Variable an,
    damit ich später dieses Rechteck auch
  • 10:40 - 10:47
    weiter manipulieren kann. Es gibt die
    Überklasse "Path", die beinhaltet auch
  • 10:47 - 10:54
    diverse Formen, eben zum Beispiel
    Rechtecke. Und jetzt muss ich angeben, wie
  • 10:54 - 11:05
    dieses Rechteck aussehen soll. In dem Fall
    die Größe. So ein Rechteck definiert sich
  • 11:05 - 11:09
    erstmal durch die Position, wo es liegt.
    Das heißt, wir erstellen einen neuen
  • 11:09 - 11:14
    Punkt. In dem Fall vielleicht in der
    linken oberen Ecke, und wir brauchen noch
  • 11:14 - 11:20
    eine Größe. Und die Größe, in dem Fall
    Rechteck, hat ja zwei Dimensionen, in die es
  • 11:20 - 11:24
    eine Größe haben kann. Wir sagen mal, das
    wird vielleicht ein Quadrat und das ist 40
  • 11:24 - 11:31
    mal 40 groß. Jetzt kann ich hier oben
    direkt auf Play drücken. Wenn ich das tue
  • 11:31 - 11:35
    passiert erstmal gar nichts, weil ich habe
    diesem Rechteck noch kein Styling gegeben.
  • 11:35 - 11:39
    Das Rechteck hat noch keine Farben und
    noch keine Strichstärke und weiß gar nicht,
  • 11:39 - 11:43
    wie das aussehen soll. Deswegen müssen wir
    das dem Rechteck auch noch kurz
  • 11:43 - 11:55
    beibringen. Es gibt zum Beispiel das
    Attribut "strokeColor" für die Strichfarbe
  • 11:55 - 11:59
    und da lassen sich auch direkt Strings
    angeben für so Basis-Farben, die kennt ihr
  • 11:59 - 12:06
    aus CSS vielleicht. Das heißt, ich kann
    einfach mal sagen: Die Strichfarbe soll
  • 12:06 - 12:09
    schwarz sein und wenn ich jetzt auf Play
    drücke und es ausführe, sehe ich oben links
  • 12:09 - 12:14
    auch schon mein Rechteck. Ein Rechteck
    alleine ist jetzt vielleicht so ein
  • 12:14 - 12:18
    bisschen langweilig, deswegen wollen wir
    ein paar mehr Rechtecke haben. Deswegen
  • 12:18 - 12:22
    würde ich sagen, wir bauen uns kurz eine
    for-Schleife mit der wir einfach mal zehn
  • 12:22 - 12:40
    Stück erstellen können. Nennen wir das
    vielleicht mal x. Und jetzt müssen wir nur
  • 12:40 - 12:43
    sagen, wenn ich jetzt auf Play drücke dann
    landen die natürlich alle auf der gleichen
  • 12:43 - 12:50
    Stelle, das ist doof. Wir wollen das ja
    verschieben. Deswegen sagen wir mal, dass
  • 12:50 - 12:54
    die alle nebeneinander liegen sollen, das
    sieht dann so aus. Jetzt haben wir schon
  • 12:54 - 12:59
    eine ganze Reihe. Das ist schonmal nicht
    schlecht. So, jetzt können wir mal
  • 12:59 - 13:05
    anfangen, die zu manipulieren. Vielleicht
    wollen wir die von links nach rechts
  • 13:05 - 13:14
    rotieren lassen. Dafür gibt es auch direkt
    einen Befehl. Wir sagen einfach "rotate",
  • 13:14 - 13:20
    das ist so das Naheliegendste. Können wir
    ja mal kurz ausprobieren, was für ein Wert
  • 13:20 - 13:28
    da sinnvoll ist. Okay, 30 ist schon mal
    ganz cool. Lassen wir es doch einfach mal
  • 13:28 - 13:31
    um x rotieren, das ist vielleicht ein
    bisschen krass. Ne, das ist sogar ein
  • 13:31 - 13:34
    bisschen langweilig - also wir sehen
    schon, der fängt jetzt praktisch bei 0 an
  • 13:34 - 13:37
    und geht bis zur Rotation 10, das ist ein
    bisschen wenig, können wir mal ein
  • 13:37 - 13:41
    bisschen mehr machen, dass es stärker
    rotiert. Oh – das ist vielleicht ein
  • 13:41 - 13:48
    bisschen arg schlimm. Hm. 3 finde ich ganz
    gut. Jetzt haben wir schonmal ein bisschen
  • 13:48 - 13:53
    irgendwie Bewegung in dem Bild. Was es
    auch oft noch ganz spannend macht, ist, wenn
  • 13:53 - 13:58
    wir Sachen manipulieren an einem Objekt,
    und zwar in unterschiedliche Dimensionen.
  • 13:58 - 14:01
    Jetzt haben wir ja eine Reihe Rechtecke,
    jetzt können wir praktisch ein ganzes Grid
  • 14:01 - 14:05
    Rechtecke machen und nach unten was
    anderes manipulieren. Wir können sie zum
  • 14:05 - 14:09
    Beispiel wachsen lassen. Das heißt, ich
    mache mir noch eine for-Schleife für die
  • 14:09 - 14:29
    Y-Richtung nach unten. Genau, jetzt müssen
    wir nur noch sagen, dass sie sich auch
  • 14:29 - 14:37
    verschieben sollen. Und schon haben wir
    ein Grid nach unten. Das sieht jetzt noch
  • 14:37 - 14:42
    sehr wüst und durcheinander aus. Genau -
    lassen wir die doch mal wachsen. Dafür
  • 14:42 - 14:46
    sagen wir doch einfach mal "rect.scale",
    also es ist bei paper.js eigentlich immer
  • 14:46 - 14:49
    sehr naheliegend, was man vermutet, was
    an Methoden da ist, dann sind die eigentlich
  • 14:49 - 14:53
    auch da. Ich hatte selten den Fall, dass
    mal irgendwas total zu vermissen, was
  • 14:53 - 15:05
    überhaupt nicht existiert. Wir wollen bei
    0 anfangen, machen wir das mal so. Genau.
  • 15:05 - 15:09
    Jetzt skalieren wir praktisch von 0 weg,
    das heißt die oberste Zeile ist ganz
  • 15:09 - 15:14
    verschwunden und wir lassen die von oben
    nach unten wachsen. Jetzt hat das schon
  • 15:14 - 15:17
    irgendwie eine ganz nette Dynamik, es ist
    noch sehr farblos. Schauen wir uns mal an,
  • 15:17 - 15:29
    wie wir bei paper.js noch mit Farbe umgehen
    können. Es gibt das Attribut "fillColor".
  • 15:29 - 15:41
    Füllen wir mal mit rot, erstmal. Genau,
    das passt. Was man auch noch verändern
  • 15:41 - 15:45
    kann, was man öfter braucht, ist die
    Strichdicke. Das sind praktisch die drei
  • 15:45 - 15:48
    Farbparameter die man in der gängigen
    Vektorgrafik hat. Die Füllfarbe, die
  • 15:48 - 15:56
    Strichfarbe und die Strichdicke. Das ist
    bei paper.js in dem Fall die "strokeWidth".
  • 15:56 - 16:03
    Die könnte ich jetzt auf 3 setzen, dann
    ist die schwarze Umrandung noch viel
  • 16:03 - 16:08
    fetter. 3 finde ich jetzt vielleicht arg
    schlimm, machen wir mal 2. So jetzt
  • 16:08 - 16:11
    könnten wir noch zum Schluss die Farbe
    verändern, da muss ich jetzt mal gucken,
  • 16:11 - 16:14
    ob ich das noch auswendig kann. Das heißt,
    wir sagen hier bei der Farbe vielleicht
  • 16:14 - 16:24
    nicht gängigerweise rot, sondern sagen "new
    Color". Und ich glaube, der nimmt hier
  • 16:24 - 16:31
    Werte zwischen 0 und 1. Probieren wir das
    mal. Ja, das passt. Okay, wir wollen hier
  • 16:31 - 16:36
    also Werte zwischen 0 und 1 haben. Das
    heißt, wir könnten jetzt auch so eine Art
  • 16:36 - 16:40
    Farbverlauf bauen und wir haben ja wieder
    hier oben unsere X- und Y-Variable, die wir
  • 16:40 - 16:47
    dafür benutzen können. Das heißt, wir
    nehmen mal hier, das ist der rote, also
  • 16:47 - 16:52
    RGB-Rot, Grün, Blau-Anteil, wir können zum
    Beispiel den mal verändern und abhängig
  • 16:52 - 17:02
    machen von unserem Y. Jetzt wird das von
    oben dunkler. Das Blau nimmt nach unten
  • 17:02 - 17:08
    zu. Und vielleicht machen wir das hier
    noch vom X abhängig. Das heißt nach rechts
  • 17:08 - 17:12
    nehmen wir jetzt mehr grün dazu. Jetzt
    haben wir schon einen schönen Farbverlauf.
  • 17:12 - 17:16
    Jetzt hab ich vorhin noch gesagt, oft wird
    irgendwie was Zufälliges benutzt, so ein
  • 17:16 - 17:20
    Zufallsfaktor könnten wir jetzt natürlich
    auch noch mit reinbringen. Wir könnten zum
  • 17:20 - 17:28
    Beispiel hier nicht immer um den Faktor 3
    rotieren, sondern da einen zufälligen Wert
  • 17:28 - 17:35
    wählen. Das macht man in Javascript
    gängigerweise mit "Math.random". Oder man
  • 17:35 - 17:37
    schreibt sich dann noch eine kleine
    Funktion, die noch ein Minimum und ein
  • 17:37 - 17:40
    Maximum übernehmen kann. Ist in dem Fall
    jetzt nicht so wichtig. Aber wenn ich
  • 17:40 - 17:46
    jetzt das mehrfach ausführe, dann seht ihr
    schon, dass die Rotation einfach immer ein
  • 17:46 - 17:51
    bisschen anders ist. Und schon haben wir
    eigentlich ein nettes, kleines erstes
  • 17:51 - 17:56
    Kunstwerk und mein Vorschlag wäre jetzt
    bei paper.js kann man hier oben den Link
  • 17:56 - 17:59
    nehmen, den poste ich jetzt auf Twitter
    und hänge ihn auch hinten an die Slides
  • 17:59 - 18:03
    dran, die sind auch online, dann könnt ihr
    direkt hierdran weiterschreiben, habt ihr
  • 18:03 - 18:06
    praktisch jetzt den gleichen Code bei euch
    vorliegen und wir können uns gerne jetzt
  • 18:06 - 18:12
    noch zusammensetzen und ein bisschen uns
    unterhalten oder was zusammen hacken und
  • 18:12 - 18:15
    Kunst machen und an dieser Stelle würde
    ich mich dann auch vom Stream
  • 18:15 - 18:18
    verabschieden, weil ich glaube der
    Workshopteil ist dann nicht mehr so
  • 18:18 - 18:21
    spannend anzugucken. Vielen Dank fürs
    zuschauen und ich freu mich, wenn wir uns
  • 18:21 - 18:24
    jetzt noch zusammensetzen.
  • 18:24 - 18:28
    Applaus
  • 18:28 - 18:33
    Abspannmusik
  • 18:33 - 18:51
    Untertitel erstellt von c3subtitles.de
    im Jahr 2019. Mach mit und hilf uns!
Title:
https:/.../35c3-wikipakawg-1-deu-Generative_Art_with_Paperjs_hd.mp4
Video Language:
German
Duration:
18:51

German subtitles

Revisions Compare revisions