[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.00,0:00:15.64,Default,,0000,0000,0000,,{\i1}35c3-Vorspannmusik{\i0} Dialogue: 0,0:00:15.64,0:00:21.90,Default,,0000,0000,0000,,Herald-Engel: Also dann nochmal guten\NMorgen alle Anwesenden, guten Morgen an Dialogue: 0,0:00:21.90,0:00:26.41,Default,,0000,0000,0000,,alle Streamzuschauer und alle, die sich das\Nim Nachhinein angucken. Wir werden jetzt Dialogue: 0,0:00:26.41,0:00:31.74,Default,,0000,0000,0000,,von bleeptrack etwas über generative Kunst\Nhören. Wir werden mit einem Vortragsteil Dialogue: 0,0:00:31.74,0:00:34.22,Default,,0000,0000,0000,,anfangen und dann wird es einen\NWorkshopteil geben und in dem könnt ihr Dialogue: 0,0:00:34.22,0:00:36.85,Default,,0000,0000,0000,,dann auch Fragen stellen. Dialogue: 0,0:00:36.85,0:00:40.12,Default,,0000,0000,0000,,bleeptrack: Perfekt. So, hallo auch\Nnochmal von mir. Freut mich, dass sich so Dialogue: 0,0:00:40.12,0:00:43.66,Default,,0000,0000,0000,,viele noch zu dieser noch recht frühen\NStunde hier eingefunden haben, um sich was Dialogue: 0,0:00:43.66,0:00:49.42,Default,,0000,0000,0000,,über Kunst anzuhören. Ihr findet mich im\NNetz unter bleeptrack, und so seit ein bis Dialogue: 0,0:00:49.42,0:00:54.30,Default,,0000,0000,0000,,zwei Jahren beschäftige ich mich etwas\Nmehr mit generativer Kunst. Jetzt müssen Dialogue: 0,0:00:54.30,0:00:58.45,Default,,0000,0000,0000,,wir vielleicht erstmal klären, was das\Nüberhaupt ist - Generative Art. Und ich Dialogue: 0,0:00:58.45,0:01:02.69,Default,,0000,0000,0000,,würde das so zusammenfassen: Da gibt es\Neigentlich drei Punkte. Das ist Kunst, die Dialogue: 0,0:01:02.69,0:01:06.78,Default,,0000,0000,0000,,wird irgendwie durch Code erzeugt. Und das\Nmuss nicht unbedingt ein Bild sein, das Dialogue: 0,0:01:06.78,0:01:11.51,Default,,0000,0000,0000,,könnte genauso Musik sein oder eine\NInteraktive Kunstinstallation sein. Dialogue: 0,0:01:11.51,0:01:19.06,Default,,0000,0000,0000,,Generative Art hat oft auch noch zufällige\NInhalte, das heißt, manche Parameter, Dialogue: 0,0:01:19.06,0:01:23.36,Default,,0000,0000,0000,,manche Einstellungen an dem Bild werden\Nzufällig generiert. Das können wir uns Dialogue: 0,0:01:23.36,0:01:27.73,Default,,0000,0000,0000,,nachher nochmal anschauen. Und oft haben\NKunstwerke ein bestimmten Input, das Dialogue: 0,0:01:27.73,0:01:31.51,Default,,0000,0000,0000,,könnte ein Foto sein, wenn es ein\NInteraktives Kunstwerk ist, kann es die Dialogue: 0,0:01:31.51,0:01:35.27,Default,,0000,0000,0000,,Bewegung von Personen sein. Ihr kennt zum\NBeispiel vielleicht Leap Motions oder Dialogue: 0,0:01:35.27,0:01:40.12,Default,,0000,0000,0000,,sowas. Da kann man die Hände tracken und\Ndamit virtuelle Sachen anfassen, sowas wär Dialogue: 0,0:01:40.12,0:01:48.83,Default,,0000,0000,0000,,ganz gängig. Ich hab mal ein Beispiel\Nmitgebracht - von einem Twitteruser der Dialogue: 0,0:01:48.83,0:01:55.66,Default,,0000,0000,0000,,heißt @manoloide und der postet sehr viel\NGenerative Art und ich finde, die sind immer Dialogue: 0,0:01:55.66,0:02:02.13,Default,,0000,0000,0000,,sehr repräsentativ. Das ist ein Foto\Nbeziehungsweise eine ganze Bilderreihe, Dialogue: 0,0:02:02.13,0:02:06.14,Default,,0000,0000,0000,,die er hier veröffentlicht hat. Wir können\Neinmal durchschalten und ihr seht schon, Dialogue: 0,0:02:06.14,0:02:11.89,Default,,0000,0000,0000,,es besteht hauptsächlich aus grundlegenden\Ngeometischen Figuren – Linien, Dialogue: 0,0:02:11.89,0:02:17.51,Default,,0000,0000,0000,,Wellenformen, Kreisen. Und die Bilder sind\Nalle aus einem Algorithmus entstanden, Dialogue: 0,0:02:17.51,0:02:24.00,Default,,0000,0000,0000,,sehen aber doch recht unterschiedlich aus.\NDadurch, dass halt in dem Fall eine Dialogue: 0,0:02:24.00,0:02:27.31,Default,,0000,0000,0000,,bestimmte Farbpalette gewählt wird, passt\Nnatürlich die Reihe noch sehr gut Dialogue: 0,0:02:27.31,0:02:30.55,Default,,0000,0000,0000,,zusammen. Das nochmal, damit ihr so einen\Nersten Eindruck habt, wie so was aussehen Dialogue: 0,0:02:30.55,0:02:38.82,Default,,0000,0000,0000,,könnte. Jetzt zeig ich euch nochmal kurz\Nein paar Sachen, die ich eher so mache. Dialogue: 0,0:02:38.82,0:02:43.36,Default,,0000,0000,0000,,Mir gefallen Generatoren sehr gut, die gar\Nnicht so super abstrakt sind, sondern ein Dialogue: 0,0:02:43.36,0:02:47.97,Default,,0000,0000,0000,,bisschen mehr Sachen zeigen, die man auch\Nirgendwie wiedererkennt. Mein erstes Dialogue: 0,0:02:47.97,0:02:54.26,Default,,0000,0000,0000,,Projekt, an dem ich gearbeitet hab, das war\Nder Beetlesbot. Den haben wir hier zum Dialogue: 0,0:02:54.26,0:02:59.47,Default,,0000,0000,0000,,Beispiel. Das ist ein Generator, der kann\Nsich Käfer ausdenken. Und wir können hier Dialogue: 0,0:02:59.47,0:03:04.20,Default,,0000,0000,0000,,zum Beispiel auf "New" klicken und uns mal\Nein paar neue anzeigen lassen. Wenn ihr Dialogue: 0,0:03:04.20,0:03:07.37,Default,,0000,0000,0000,,mich jetzt fragt – warum Käfer? – das kann\Nich nicht mehr so genau sagen, das war so Dialogue: 0,0:03:07.37,0:03:10.59,Default,,0000,0000,0000,,ein wilder Einfall, der nachts um drei\Nentstanden ist. Aber was ich euch jetzt Dialogue: 0,0:03:10.59,0:03:15.68,Default,,0000,0000,0000,,hier ganz gut zeigen kann, ist, der Käfer\Nbesteht eigentlich auch aus grundlegenden Dialogue: 0,0:03:15.68,0:03:20.53,Default,,0000,0000,0000,,Geometrischen Formen. Wir haben hier die\NFüße sind Rechtecke, die Fußenden sind Dialogue: 0,0:03:20.53,0:03:25.25,Default,,0000,0000,0000,,Dreiecke – ich hoffe man erkennt es. Der\NRest sind alles Kurven, die sich auch sehr Dialogue: 0,0:03:25.25,0:03:29.79,Default,,0000,0000,0000,,einfach beschreiben lassen. So eine Kurve\Nläuft immer durch Punkte und ich kann die Dialogue: 0,0:03:29.79,0:03:33.06,Default,,0000,0000,0000,,Punkte bestimmen, wo sie liegen und wie\Ndie Kurve aussehen soll – also welche Dialogue: 0,0:03:33.06,0:03:37.16,Default,,0000,0000,0000,,Biegung die Kurve hat. Wir können mal ein\NBeispiel machen: Hier rechts gibt's die Dialogue: 0,0:03:37.16,0:03:42.04,Default,,0000,0000,0000,,ganzen Parameter, die ich an so einem\NKäfer einstellen kann. Zum Beispiel gibt Dialogue: 0,0:03:42.04,0:03:48.04,Default,,0000,0000,0000,,es hier für den Flügel vier Kurven oder\Nauch die Flügelgröße. Die können wir Dialogue: 0,0:03:48.04,0:03:53.06,Default,,0000,0000,0000,,einfach mal verändern. Das heißt, der\NPunkt - hm, der wackelt immer {\i1}lacht{\i0} - am unteren Dialogue: 0,0:03:53.06,0:04:04.47,Default,,0000,0000,0000,,Ende des Flügels, den kann ich eben einfach\Nversetzen. Und wenn ich einen neuen Käfer Dialogue: 0,0:04:04.47,0:04:08.03,Default,,0000,0000,0000,,generiere, dann kann ich eben einfach\Ndiese zufälligen Werte auswürfeln und hab Dialogue: 0,0:04:08.03,0:04:12.01,Default,,0000,0000,0000,,einen komplett neuen Käfer. Das sind\Neinfach alle Parameter, die ich einstellen Dialogue: 0,0:04:12.01,0:04:16.17,Default,,0000,0000,0000,,kann. Ein anderes Projekt, das vielleicht\Nnoch nicht so viele gesehen haben, ist sehr Dialogue: 0,0:04:16.17,0:04:22.01,Default,,0000,0000,0000,,ähnlich. Das ist so ein floraler\NBlumengenerator. Der kann hier auf dieser Dialogue: 0,0:04:22.01,0:04:25.58,Default,,0000,0000,0000,,Webseite noch nicht so viel, wir können\Ndie Farben shufflen, das heißt, die Dialogue: 0,0:04:25.58,0:04:30.72,Default,,0000,0000,0000,,Farbanordnung ändert sich. Wenn es\Nfunktioniert... Genau, das dauert einen Moment. Dialogue: 0,0:04:30.72,0:04:34.51,Default,,0000,0000,0000,,Ich kann mir neue Farben zufällig\Ngenerieren lassen. In dem Fall werden die Dialogue: 0,0:04:34.51,0:04:40.19,Default,,0000,0000,0000,,nach keiner Regel ausgesucht, da werden\Neinfach vier zufällige Farben ausgesucht Dialogue: 0,0:04:40.19,0:04:44.07,Default,,0000,0000,0000,,und ein Farbverlauf dazwischen benutzt.\NOder ich kann auch die Blätter neu Dialogue: 0,0:04:44.07,0:04:49.84,Default,,0000,0000,0000,,erstellen lassen. Das wär eine Variante,\Nwas man auch machen kann. Und den letzten Dialogue: 0,0:04:49.84,0:05:00.36,Default,,0000,0000,0000,,Generator, den habt ihr vielleicht schon\Ngesehen. Hm, den hab ich nicht offen. Dialogue: 0,0:05:00.36,0:05:07.93,Default,,0000,0000,0000,,Moment. Dann machen wir den hier schnell\Nauf. Das ist der – den habt ihr vielleicht Dialogue: 0,0:05:07.93,0:05:13.49,Default,,0000,0000,0000,,schon gesehen. Das diesjährige 35c3-Motto\Nhat ja so ein schönes Circuit-Board-Design Dialogue: 0,0:05:13.49,0:05:16.52,Default,,0000,0000,0000,,und das hat mich direkt dazu animiert,\Ndass man da ja auch einen Generator Dialogue: 0,0:05:16.52,0:05:19.69,Default,,0000,0000,0000,,schreiben könnte, damit sich Leute ihre\Neigenen Poster oder Sticker machen können. Dialogue: 0,0:05:19.69,0:05:25.46,Default,,0000,0000,0000,,Und das wäre auch ein schönes generatives\NProjekt, das man machen kann. In dem Fall Dialogue: 0,0:05:25.46,0:05:32.18,Default,,0000,0000,0000,,auch gar nicht so viele Parameter. Man\Nkönnte eigenen Text eingeben und den damit Dialogue: 0,0:05:32.18,0:05:35.55,Default,,0000,0000,0000,,generieren – und kann noch ein bisschen\Ndie Schriftgröße ver ändern und ansonsten wird Dialogue: 0,0:05:35.55,0:05:46.75,Default,,0000,0000,0000,,sehr viel zufällig gewürfelt. So viel zu\Nmeinen Projekten. Jetzt ist die Frage – Dialogue: 0,0:05:46.75,0:05:49.68,Default,,0000,0000,0000,,okay, jetzt habt ihr vielleicht was\NSchönes programmiert oder wir programmieren Dialogue: 0,0:05:49.68,0:05:53.06,Default,,0000,0000,0000,,nachher zusammen im Workshopteil noch was\NSchönes – aber was mach ich dann damit? Dialogue: 0,0:05:53.06,0:05:56.87,Default,,0000,0000,0000,,Dann hab ich jetzt irgendwie ein digitales\NBild und deswegen hab ich noch ein paar Dialogue: 0,0:05:56.87,0:06:01.06,Default,,0000,0000,0000,,kleine Ideen mitgebracht, was man da so\Nanstellen kann. Das erste, was ich finde, Dialogue: 0,0:06:01.06,0:06:05.15,Default,,0000,0000,0000,,was man tun sollte, ist das irgendwie im\NNetz zu veröffentlichen. Da haben sich Dialogue: 0,0:06:05.15,0:06:08.72,Default,,0000,0000,0000,,gerade auf Twitter zwei Hashtags\Netabliert, wo sehr viel aktive Menschen Dialogue: 0,0:06:08.72,0:06:12.25,Default,,0000,0000,0000,,drin sind. Das eine ist #plottertwitter,\Nzu Plottern komme ich nachher noch, aber Dialogue: 0,0:06:12.25,0:06:19.55,Default,,0000,0000,0000,,da findet ihr total spannende kreative und\Ngenerative Kunst. Und der Hashtag Dialogue: 0,0:06:19.55,0:06:21.90,Default,,0000,0000,0000,,#generative hat sich auch noch\Neingebürgert, Sachen darunter zu Dialogue: 0,0:06:21.90,0:06:25.34,Default,,0000,0000,0000,,veröffentlichen. Das würde ich euch\Nempfehlen, euch einfach da mal Dialogue: 0,0:06:25.34,0:06:29.24,Default,,0000,0000,0000,,durchzuscrollen durch den Twitterfeed und\Neure Sachen da auch zu posten und ein Dialogue: 0,0:06:29.24,0:06:33.93,Default,,0000,0000,0000,,bisschen Feedback von anderen Leuten zu\Nbekommen. Ansonsten, man kann es natürlich Dialogue: 0,0:06:33.93,0:06:37.02,Default,,0000,0000,0000,,drucken. Wie jeder, ihr könnt einen\NPosterabzug machen, es gibt Dialogue: 0,0:06:37.02,0:06:41.17,Default,,0000,0000,0000,,hochqualitative Museumsdrucke auf ganz\Ntolles Papier, oder wie hier im Dialogue: 0,0:06:41.17,0:06:43.94,Default,,0000,0000,0000,,Hintergrund, ihr könnt auch Sticker\Ndrucken und Leuten in die Hand drücken, Dialogue: 0,0:06:43.94,0:06:48.31,Default,,0000,0000,0000,,wenn sie euch treffen. Das finde ich immer\Nsehr schön, außerdem mag jeder Sticker. Dialogue: 0,0:06:48.31,0:06:53.85,Default,,0000,0000,0000,,Die Alternative wäre auch noch, das zu\Nplotten. Stiftplotter haben gerade so ein Dialogue: 0,0:06:53.85,0:06:57.29,Default,,0000,0000,0000,,bisschen ein Revival in der Generative-\NArt-Szene. Stiftplotter wurden eigentlich Dialogue: 0,0:06:57.29,0:07:02.04,Default,,0000,0000,0000,,verwendet früher zum technischen Zeichnen,\Num da Dinge zu plotten. Zum Beispiel in Dialogue: 0,0:07:02.04,0:07:05.35,Default,,0000,0000,0000,,der Architektur. Das ist praktisch, man\Nkönnte sagen, der Vorgänger zum Dialogue: 0,0:07:05.35,0:07:09.78,Default,,0000,0000,0000,,klassischen Ink-Jet-Drucker. Es ist\Neinfach ein Gerät mit einer X und Y-Achse Dialogue: 0,0:07:09.78,0:07:13.58,Default,,0000,0000,0000,,und kann auch noch den Stift anheben und\Nabsetzen - also eine mini-Z-Achse - und Dialogue: 0,0:07:13.58,0:07:18.55,Default,,0000,0000,0000,,kann eben computergesteuert diesen Stift\Nüber ein Blatt Papier bewegen. Und das Dialogue: 0,0:07:18.55,0:07:22.95,Default,,0000,0000,0000,,bietet sich natürlich auch sehr an, um\Nseine Kunst damit nicht auszudrucken Dialogue: 0,0:07:22.95,0:07:28.12,Default,,0000,0000,0000,,sondern auszuplotten. Auch ein sehr\Nschönes Projekt, was man machen kann, ist Dialogue: 0,0:07:28.12,0:07:32.66,Default,,0000,0000,0000,,ein Bot draus zu schreiben. Auf Twitter,\Nauf Mastodon, das geht ziemlich zügig und Dialogue: 0,0:07:32.66,0:07:36.35,Default,,0000,0000,0000,,man erfreut sich dann selber etwas mehr an\Nseiner Kunst, finde ich. Weil man kann den Bot Dialogue: 0,0:07:36.35,0:07:40.24,Default,,0000,0000,0000,,ja so schreiben, dass er alle sechs Stunden,\Nalle vier Stunden einfach ein neues Bild Dialogue: 0,0:07:40.24,0:07:43.35,Default,,0000,0000,0000,,generiert und postet und so muss man\Nselber nicht dauernd auf den Dialogue: 0,0:07:43.35,0:07:46.11,Default,,0000,0000,0000,,"Neu-generieren"-Button klicken, sondern wird\Nimmer selber ein bisschen von seinem Dialogue: 0,0:07:46.11,0:07:50.02,Default,,0000,0000,0000,,Projekt überrascht. Das ist sehr nett und\Nandere Leute können auch daran teilhaben. Dialogue: 0,0:07:50.02,0:07:55.84,Default,,0000,0000,0000,,Ihr könnt es natürlich auch animieren.\NGerade bei so Projekten die sehr viel Dialogue: 0,0:07:55.84,0:07:59.87,Default,,0000,0000,0000,,Zufallsvariablen oder Parameter haben,\Nfunktioniert es ziemlich einfach, das seht Dialogue: 0,0:07:59.87,0:08:05.04,Default,,0000,0000,0000,,ihr jetzt hier im Hintergrund für den\NKäfergenerator laufen. Denn der in dem Dialogue: 0,0:08:05.04,0:08:09.49,Default,,0000,0000,0000,,Fall besteht ja, wie gesagt, aus knapp über\Nfünfzig Parametern und ich kann jeden Parameter Dialogue: 0,0:08:09.49,0:08:12.99,Default,,0000,0000,0000,,einfach leicht verändern. Das ist ja\Npraktisch ein Vektor, ich zähle zu jedem Dialogue: 0,0:08:12.99,0:08:17.03,Default,,0000,0000,0000,,Vektorwert ein bisschen was dazu, ziehe\Nein bisschen was ab, zeichne das wieder Dialogue: 0,0:08:17.03,0:08:21.38,Default,,0000,0000,0000,,und iteriere da einfach drüber. Und dann\Nhabe ich wie so eine Art Morph-Animation, Dialogue: 0,0:08:21.38,0:08:24.84,Default,,0000,0000,0000,,die in diesem Vektorraum einfach\Nentlangläuft. Und damit hat man super Dialogue: 0,0:08:24.84,0:08:31.98,Default,,0000,0000,0000,,schnell eine Animation gebaut mit super\Nwenig Aufwand. Wir können auch noch etwas Dialogue: 0,0:08:31.98,0:08:34.54,Default,,0000,0000,0000,,Abgefahreneres machen. Wir können\Nnatürlich nicht nur auf Papier drucken, Dialogue: 0,0:08:34.54,0:08:37.80,Default,,0000,0000,0000,,wir können natürlich auch auf Stoff\Ndrucken. Und im Hintergrund seht ihr zum Dialogue: 0,0:08:37.80,0:08:41.41,Default,,0000,0000,0000,,Beispiel ein Kissen mit diesem\NBlumengenerator. Alternativen sind, man Dialogue: 0,0:08:41.41,0:08:46.16,Default,,0000,0000,0000,,kann natürlich sich auch irgendwie diese\NMäntel bedrucken und selbst nähen, oder Dialogue: 0,0:08:46.16,0:08:50.45,Default,,0000,0000,0000,,sich sonst irgendwie kreativ auch mit anderen\NMaterialien austoben. Ich glaube, man kann Dialogue: 0,0:08:50.45,0:08:56.25,Default,,0000,0000,0000,,mittlerweile mit Online-Diensten so\Nziemlich alles bedrucken lassen. Oder ihr Dialogue: 0,0:08:56.25,0:08:59.85,Default,,0000,0000,0000,,geht in den nächsten Makerspace bei euch\Nund schmeißt mal die Dialogue: 0,0:08:59.85,0:09:05.45,Default,,0000,0000,0000,,Holzverarbeitungsmaschinen an. Man kann\Ngenerative Kunst auch sehr schön fräsen, Dialogue: 0,0:09:05.45,0:09:08.52,Default,,0000,0000,0000,,wie ich finde. Das sind – ohje, fällt mir\Nder Name ein – ich glaube, die Platten Dialogue: 0,0:09:08.52,0:09:15.31,Default,,0000,0000,0000,,heißen HPL in dem Fall, die haben innen\Neine schwarze Schicht und außen auf den Dialogue: 0,0:09:15.31,0:09:18.99,Default,,0000,0000,0000,,beiden äußeren Seiten eine weiße\NPlastikbeschichtung und die lässt sich Dialogue: 0,0:09:18.99,0:09:22.62,Default,,0000,0000,0000,,halt hervorragend abfräsen und dann tritt\Ndie schwarze Schicht, der schwarze Kern in Dialogue: 0,0:09:22.62,0:09:27.40,Default,,0000,0000,0000,,der Mitte raus in dem Fall. Das geht auch\Nsehr zügig und so eine CNC-Maschine zu Dialogue: 0,0:09:27.40,0:09:35.20,Default,,0000,0000,0000,,bedienen macht ja auch sehr viel Spaß. So\Nund jetzt kommen wir zum kurzen Dialogue: 0,0:09:35.20,0:09:40.24,Default,,0000,0000,0000,,Praxisteil, den ich euch noch zeigen würde. \NDer Talk heißt ja "Generative Art with Dialogue: 0,0:09:40.24,0:09:44.96,Default,,0000,0000,0000,,paper.js", das ist momentan mein Tool der\NWahl, um irgendwie generative Kunst zu Dialogue: 0,0:09:44.96,0:09:51.62,Default,,0000,0000,0000,,erstellen, das ist ein Javascript-\NFramework, das einem sehr dabei Dialogue: 0,0:09:51.62,0:09:54.68,Default,,0000,0000,0000,,unterstützt, Vektorgrafiken zu erstellen.\NMan kann sich das ein bisschen vorstellen, Dialogue: 0,0:09:54.68,0:09:58.99,Default,,0000,0000,0000,,als würde man in Inkscape so richtig\Nordentlich skripten können. Und um da Dialogue: 0,0:09:58.99,0:10:02.15,Default,,0000,0000,0000,,einfach so einen Mini-Einblick zu geben,\Nzeig ich euch jetzt ein paar Zeilen Code Dialogue: 0,0:10:02.15,0:10:04.60,Default,,0000,0000,0000,,und danach machen wir einen kleinen\NWorkshopteil, wo wir uns einfach ein Dialogue: 0,0:10:04.60,0:10:18.24,Default,,0000,0000,0000,,bisschen zusammensetzen können, jeder kann\Nmal herumprobieren. Das ist der Plan. So, Dialogue: 0,0:10:18.24,0:10:22.60,Default,,0000,0000,0000,,hier oben seht ihr schon paperjs.org, das\Nist die Webseite und die bietet auch Dialogue: 0,0:10:22.60,0:10:25.59,Default,,0000,0000,0000,,direkt so einen Editor, das heißt ihr\Nmüsst eigentlich gar nichts herunterladen. Dialogue: 0,0:10:25.59,0:10:30.56,Default,,0000,0000,0000,,Die Webseite könnt ihr direkt öffnen und\Nloslegen mit paper.js. Das ist, was ich Dialogue: 0,0:10:30.56,0:10:36.38,Default,,0000,0000,0000,,jetzt mal mache. Und mein Plan ist: Zuerst\Nmöchte ich mal kurz ein Rechteck zeichnen. Dialogue: 0,0:10:36.38,0:10:40.31,Default,,0000,0000,0000,,Das heißt, ich lege mir eine Variable an,\Ndamit ich später dieses Rechteck auch Dialogue: 0,0:10:40.31,0:10:47.49,Default,,0000,0000,0000,,weiter manipulieren kann. Es gibt die\NÜberklasse "Path", die beinhaltet auch Dialogue: 0,0:10:47.49,0:10:53.59,Default,,0000,0000,0000,,diverse Formen, eben zum Beispiel\NRechtecke. Und jetzt muss ich angeben, wie Dialogue: 0,0:10:53.59,0:11:05.16,Default,,0000,0000,0000,,dieses Rechteck aussehen soll. In dem Fall\Ndie Größe. So ein Rechteck definiert sich Dialogue: 0,0:11:05.16,0:11:08.67,Default,,0000,0000,0000,,erstmal durch die Position, wo es liegt.\NDas heißt, wir erstellen einen neuen Dialogue: 0,0:11:08.67,0:11:14.19,Default,,0000,0000,0000,,Punkt. In dem Fall vielleicht in der\Nlinken oberen Ecke, und wir brauchen noch Dialogue: 0,0:11:14.19,0:11:20.20,Default,,0000,0000,0000,,eine Größe. Und die Größe, in dem Fall\NRechteck, hat ja zwei Dimensionen, in die es Dialogue: 0,0:11:20.20,0:11:24.39,Default,,0000,0000,0000,,eine Größe haben kann. Wir sagen mal, das\Nwird vielleicht ein Quadrat und das ist 40 Dialogue: 0,0:11:24.39,0:11:30.92,Default,,0000,0000,0000,,mal 40 groß. Jetzt kann ich hier oben\Ndirekt auf Play drücken. Wenn ich das tue Dialogue: 0,0:11:30.92,0:11:35.34,Default,,0000,0000,0000,,passiert erstmal gar nichts, weil ich habe\Ndiesem Rechteck noch kein Styling gegeben. Dialogue: 0,0:11:35.34,0:11:38.73,Default,,0000,0000,0000,,Das Rechteck hat noch keine Farben und\Nnoch keine Strichstärke und weiß gar nicht, Dialogue: 0,0:11:38.73,0:11:42.56,Default,,0000,0000,0000,,wie das aussehen soll. Deswegen müssen wir\Ndas dem Rechteck auch noch kurz Dialogue: 0,0:11:42.56,0:11:55.22,Default,,0000,0000,0000,,beibringen. Es gibt zum Beispiel das\NAttribut "strokeColor" für die Strichfarbe Dialogue: 0,0:11:55.22,0:11:58.89,Default,,0000,0000,0000,,und da lassen sich auch direkt Strings\Nangeben für so Basis-Farben, die kennt ihr Dialogue: 0,0:11:58.89,0:12:05.63,Default,,0000,0000,0000,,aus CSS vielleicht. Das heißt, ich kann\Neinfach mal sagen: Die Strichfarbe soll Dialogue: 0,0:12:05.63,0:12:09.32,Default,,0000,0000,0000,,schwarz sein und wenn ich jetzt auf Play\Ndrücke und es ausführe, sehe ich oben links Dialogue: 0,0:12:09.32,0:12:13.86,Default,,0000,0000,0000,,auch schon mein Rechteck. Ein Rechteck\Nalleine ist jetzt vielleicht so ein Dialogue: 0,0:12:13.86,0:12:18.42,Default,,0000,0000,0000,,bisschen langweilig, deswegen wollen wir\Nein paar mehr Rechtecke haben. Deswegen Dialogue: 0,0:12:18.42,0:12:22.00,Default,,0000,0000,0000,,würde ich sagen, wir bauen uns kurz eine\Nfor-Schleife mit der wir einfach mal zehn Dialogue: 0,0:12:22.00,0:12:40.31,Default,,0000,0000,0000,,Stück erstellen können. Nennen wir das\Nvielleicht mal x. Und jetzt müssen wir nur Dialogue: 0,0:12:40.31,0:12:43.14,Default,,0000,0000,0000,,sagen, wenn ich jetzt auf Play drücke dann\Nlanden die natürlich alle auf der gleichen Dialogue: 0,0:12:43.14,0:12:49.83,Default,,0000,0000,0000,,Stelle, das ist doof. Wir wollen das ja\Nverschieben. Deswegen sagen wir mal, dass Dialogue: 0,0:12:49.83,0:12:53.53,Default,,0000,0000,0000,,die alle nebeneinander liegen sollen, das\Nsieht dann so aus. Jetzt haben wir schon Dialogue: 0,0:12:53.53,0:12:58.51,Default,,0000,0000,0000,,eine ganze Reihe. Das ist schonmal nicht\Nschlecht. So, jetzt können wir mal Dialogue: 0,0:12:58.51,0:13:05.27,Default,,0000,0000,0000,,anfangen, die zu manipulieren. Vielleicht\Nwollen wir die von links nach rechts Dialogue: 0,0:13:05.27,0:13:13.70,Default,,0000,0000,0000,,rotieren lassen. Dafür gibt es auch direkt\Neinen Befehl. Wir sagen einfach "rotate", Dialogue: 0,0:13:13.70,0:13:20.07,Default,,0000,0000,0000,,das ist so das Naheliegendste. Können wir\Nja mal kurz ausprobieren, was für ein Wert Dialogue: 0,0:13:20.07,0:13:28.08,Default,,0000,0000,0000,,da sinnvoll ist. Okay, 30 ist schon mal\Nganz cool. Lassen wir es doch einfach mal Dialogue: 0,0:13:28.08,0:13:31.47,Default,,0000,0000,0000,,um x rotieren, das ist vielleicht ein\Nbisschen krass. Ne, das ist sogar ein Dialogue: 0,0:13:31.47,0:13:34.12,Default,,0000,0000,0000,,bisschen langweilig - also wir sehen\Nschon, der fängt jetzt praktisch bei 0 an Dialogue: 0,0:13:34.12,0:13:37.03,Default,,0000,0000,0000,,und geht bis zur Rotation 10, das ist ein\Nbisschen wenig, können wir mal ein Dialogue: 0,0:13:37.03,0:13:41.28,Default,,0000,0000,0000,,bisschen mehr machen, dass es stärker\Nrotiert. Oh – das ist vielleicht ein Dialogue: 0,0:13:41.28,0:13:48.26,Default,,0000,0000,0000,,bisschen arg schlimm. Hm. 3 finde ich ganz\Ngut. Jetzt haben wir schonmal ein bisschen Dialogue: 0,0:13:48.26,0:13:52.65,Default,,0000,0000,0000,,irgendwie Bewegung in dem Bild. Was es\Nauch oft noch ganz spannend macht, ist, wenn Dialogue: 0,0:13:52.65,0:13:57.88,Default,,0000,0000,0000,,wir Sachen manipulieren an einem Objekt,\Nund zwar in unterschiedliche Dimensionen. Dialogue: 0,0:13:57.88,0:14:00.66,Default,,0000,0000,0000,,Jetzt haben wir ja eine Reihe Rechtecke,\Njetzt können wir praktisch ein ganzes Grid Dialogue: 0,0:14:00.66,0:14:04.66,Default,,0000,0000,0000,,Rechtecke machen und nach unten was\Nanderes manipulieren. Wir können sie zum Dialogue: 0,0:14:04.66,0:14:09.13,Default,,0000,0000,0000,,Beispiel wachsen lassen. Das heißt, ich\Nmache mir noch eine for-Schleife für die Dialogue: 0,0:14:09.13,0:14:28.98,Default,,0000,0000,0000,,Y-Richtung nach unten. Genau, jetzt müssen\Nwir nur noch sagen, dass sie sich auch Dialogue: 0,0:14:28.98,0:14:37.07,Default,,0000,0000,0000,,verschieben sollen. Und schon haben wir\Nein Grid nach unten. Das sieht jetzt noch Dialogue: 0,0:14:37.07,0:14:42.21,Default,,0000,0000,0000,,sehr wüst und durcheinander aus. Genau -\Nlassen wir die doch mal wachsen. Dafür Dialogue: 0,0:14:42.21,0:14:45.94,Default,,0000,0000,0000,,sagen wir doch einfach mal "rect.scale",\Nalso es ist bei paper.js eigentlich immer Dialogue: 0,0:14:45.94,0:14:49.43,Default,,0000,0000,0000,,sehr naheliegend, was man vermutet, was \Nan Methoden da ist, dann sind die eigentlich Dialogue: 0,0:14:49.43,0:14:52.74,Default,,0000,0000,0000,,auch da. Ich hatte selten den Fall, dass\Nmal irgendwas total zu vermissen, was Dialogue: 0,0:14:52.74,0:15:05.22,Default,,0000,0000,0000,,überhaupt nicht existiert. Wir wollen bei\N0 anfangen, machen wir das mal so. Genau. Dialogue: 0,0:15:05.22,0:15:09.30,Default,,0000,0000,0000,,Jetzt skalieren wir praktisch von 0 weg,\Ndas heißt die oberste Zeile ist ganz Dialogue: 0,0:15:09.30,0:15:13.73,Default,,0000,0000,0000,,verschwunden und wir lassen die von oben\Nnach unten wachsen. Jetzt hat das schon Dialogue: 0,0:15:13.73,0:15:16.82,Default,,0000,0000,0000,,irgendwie eine ganz nette Dynamik, es ist\Nnoch sehr farblos. Schauen wir uns mal an, Dialogue: 0,0:15:16.82,0:15:28.74,Default,,0000,0000,0000,,wie wir bei paper.js noch mit Farbe umgehen\Nkönnen. Es gibt das Attribut "fillColor". Dialogue: 0,0:15:28.74,0:15:40.99,Default,,0000,0000,0000,,Füllen wir mal mit rot, erstmal. Genau,\Ndas passt. Was man auch noch verändern Dialogue: 0,0:15:40.99,0:15:44.79,Default,,0000,0000,0000,,kann, was man öfter braucht, ist die\NStrichdicke. Das sind praktisch die drei Dialogue: 0,0:15:44.79,0:15:48.25,Default,,0000,0000,0000,,Farbparameter die man in der gängigen\NVektorgrafik hat. Die Füllfarbe, die Dialogue: 0,0:15:48.25,0:15:56.08,Default,,0000,0000,0000,,Strichfarbe und die Strichdicke. Das ist\Nbei paper.js in dem Fall die "strokeWidth". Dialogue: 0,0:15:56.08,0:16:02.57,Default,,0000,0000,0000,,Die könnte ich jetzt auf 3 setzen, dann\Nist die schwarze Umrandung noch viel Dialogue: 0,0:16:02.57,0:16:08.10,Default,,0000,0000,0000,,fetter. 3 finde ich jetzt vielleicht arg\Nschlimm, machen wir mal 2. So jetzt Dialogue: 0,0:16:08.10,0:16:11.01,Default,,0000,0000,0000,,könnten wir noch zum Schluss die Farbe\Nverändern, da muss ich jetzt mal gucken, Dialogue: 0,0:16:11.01,0:16:14.49,Default,,0000,0000,0000,,ob ich das noch auswendig kann. Das heißt,\Nwir sagen hier bei der Farbe vielleicht Dialogue: 0,0:16:14.49,0:16:23.93,Default,,0000,0000,0000,,nicht gängigerweise rot, sondern sagen "new\NColor". Und ich glaube, der nimmt hier Dialogue: 0,0:16:23.93,0:16:31.46,Default,,0000,0000,0000,,Werte zwischen 0 und 1. Probieren wir das\Nmal. Ja, das passt. Okay, wir wollen hier Dialogue: 0,0:16:31.46,0:16:35.87,Default,,0000,0000,0000,,also Werte zwischen 0 und 1 haben. Das\Nheißt, wir könnten jetzt auch so eine Art Dialogue: 0,0:16:35.87,0:16:40.50,Default,,0000,0000,0000,,Farbverlauf bauen und wir haben ja wieder\Nhier oben unsere X- und Y-Variable, die wir Dialogue: 0,0:16:40.50,0:16:47.22,Default,,0000,0000,0000,,dafür benutzen können. Das heißt, wir\Nnehmen mal hier, das ist der rote, also Dialogue: 0,0:16:47.22,0:16:52.19,Default,,0000,0000,0000,,RGB-Rot, Grün, Blau-Anteil, wir können zum\NBeispiel den mal verändern und abhängig Dialogue: 0,0:16:52.19,0:17:01.96,Default,,0000,0000,0000,,machen von unserem Y. Jetzt wird das von\Noben dunkler. Das Blau nimmt nach unten Dialogue: 0,0:17:01.96,0:17:08.46,Default,,0000,0000,0000,,zu. Und vielleicht machen wir das hier\Nnoch vom X abhängig. Das heißt nach rechts Dialogue: 0,0:17:08.46,0:17:12.33,Default,,0000,0000,0000,,nehmen wir jetzt mehr grün dazu. Jetzt\Nhaben wir schon einen schönen Farbverlauf. Dialogue: 0,0:17:12.33,0:17:16.40,Default,,0000,0000,0000,,Jetzt hab ich vorhin noch gesagt, oft wird\Nirgendwie was Zufälliges benutzt, so ein Dialogue: 0,0:17:16.40,0:17:20.25,Default,,0000,0000,0000,,Zufallsfaktor könnten wir jetzt natürlich\Nauch noch mit reinbringen. Wir könnten zum Dialogue: 0,0:17:20.25,0:17:27.60,Default,,0000,0000,0000,,Beispiel hier nicht immer um den Faktor 3\Nrotieren, sondern da einen zufälligen Wert Dialogue: 0,0:17:27.60,0:17:34.54,Default,,0000,0000,0000,,wählen. Das macht man in Javascript\Ngängigerweise mit "Math.random". Oder man Dialogue: 0,0:17:34.54,0:17:36.77,Default,,0000,0000,0000,,schreibt sich dann noch eine kleine\NFunktion, die noch ein Minimum und ein Dialogue: 0,0:17:36.77,0:17:40.47,Default,,0000,0000,0000,,Maximum übernehmen kann. Ist in dem Fall\Njetzt nicht so wichtig. Aber wenn ich Dialogue: 0,0:17:40.47,0:17:45.57,Default,,0000,0000,0000,,jetzt das mehrfach ausführe, dann seht ihr\Nschon, dass die Rotation einfach immer ein Dialogue: 0,0:17:45.57,0:17:50.68,Default,,0000,0000,0000,,bisschen anders ist. Und schon haben wir\Neigentlich ein nettes, kleines erstes Dialogue: 0,0:17:50.68,0:17:56.32,Default,,0000,0000,0000,,Kunstwerk und mein Vorschlag wäre jetzt\Nbei paper.js kann man hier oben den Link Dialogue: 0,0:17:56.32,0:17:59.05,Default,,0000,0000,0000,,nehmen, den poste ich jetzt auf Twitter\Nund hänge ihn auch hinten an die Slides Dialogue: 0,0:17:59.05,0:18:03.35,Default,,0000,0000,0000,,dran, die sind auch online, dann könnt ihr\Ndirekt hierdran weiterschreiben, habt ihr Dialogue: 0,0:18:03.35,0:18:06.45,Default,,0000,0000,0000,,praktisch jetzt den gleichen Code bei euch\Nvorliegen und wir können uns gerne jetzt Dialogue: 0,0:18:06.45,0:18:12.38,Default,,0000,0000,0000,,noch zusammensetzen und ein bisschen uns\Nunterhalten oder was zusammen hacken und Dialogue: 0,0:18:12.38,0:18:14.97,Default,,0000,0000,0000,,Kunst machen und an dieser Stelle würde\Nich mich dann auch vom Stream Dialogue: 0,0:18:14.97,0:18:18.31,Default,,0000,0000,0000,,verabschieden, weil ich glaube der\NWorkshopteil ist dann nicht mehr so Dialogue: 0,0:18:18.31,0:18:21.21,Default,,0000,0000,0000,,spannend anzugucken. Vielen Dank fürs\Nzuschauen und ich freu mich, wenn wir uns Dialogue: 0,0:18:21.21,0:18:23.85,Default,,0000,0000,0000,,jetzt noch zusammensetzen. Dialogue: 0,0:18:23.85,0:18:28.15,Default,,0000,0000,0000,,{\i1}Applaus{\i0} Dialogue: 0,0:18:28.15,0:18:32.97,Default,,0000,0000,0000,,{\i1}Abspannmusik{\i0} Dialogue: 0,0:18:32.97,0:18:51.10,Default,,0000,0000,0000,,Untertitel erstellt von c3subtitles.de\Nim Jahr 2019. Mach mit und hilf uns!