PDF: Generative Gestaltung

4 191528 90780612

WebdesignDer Computer als Gestalter, der Gestalter als ProgrammiererGenerative GestaltungDie gewohnte Trennung zwischen Gestaltern und Technikernwurde spätestens durch den Internet-Boom zum Thema in derKreativbranche. Der dabei entstandene Konflikt wird meist durchSpezialisierung gelöst: die Kreativen geben den ProgrammierernDesigns vor und daraus werden dann Webseiten programmiert.Wenn Gestalter beginnen, ihre Designs zu programmieren, verschwimmtdiese Trennung und neue Möglichkeiten eröffnen sich.Ein Thema, mit dem sich einige Gestalter schon länger auseinandersetzen,welches es aber erst vor kurzer Zeit ins Bewusstseineiner breiteren Masse geschafft hat, ist das generative oder programmierteDesign. Wie bei vielen Designtrends war auch hierdie Kunst der Vorreiter, und spätestens seit Jackson Pollocks DripPaintings aus den 1950er Jahren kann von generativer Kunst gesprochenwerden. Der entscheidende Aspekt dabei ist die Abgabeeines gewissen Maßes von Kontrolle an eine Maschine, die vomKünstler gebaut oder zumindest bedient wird. So ist es möglich,dass die Maschine, oft mithilfe des Zufalles, ein Werk kreiert, dasder Künstler allein nie hätte schaffen können.In der Welt der Gestalter verhält es sich normalerweise so, dassdie üblichen Werkzeuge, Adobe Illustrator zum Beispiel, sehr direktdem Willen des Benutzers unterworfen sind. Ein Kreis wirddort gezeichnet, wo das Kreiswerkzeug mit der Maus angesetztwird, und die Größe des Kreises wird von der Handbewegungbestimmt. Diese Herangehensweise funktioniert in den allermeis-ten Fällen sehr gut, und der Gestalter hat die absolute Kontrolleüber das Aussehen der erstellten Elemente. Müssen Sie jedochtausend unterschiedlich große Kreise zeichnen und nach einembestimmten Muster verteilen, wird das manuelle Zeichnen sofortsehr zeitintensiv. Für solche Aufgaben sollten Sie Werkzeugekennen, die automatisierbar sind und sich an vorgegebene Regelnhalten. Sie erklären dem Computer, was gemacht werden soll,der Computer führt Ihre Handlungsanweisungen aus und generierteine Grafik. Die Erklärung müssen Sie allerdings in einer formalenSprache verfassen, d. h. meistens in einer textbasierten Programmier-bzw. Scriptsprache. Dies ist für viele Kreative die größteHürde, um Generatives Design erzeugen zu können, obwohl esviele Möglichkeiten gibt, wie Handlungsanweisungen an Computerübergegeben werden können. Dabei ist es nicht immer notwendig,ein komplett neues Programm zu schreiben. So gibt es z. B. fürAdobe Illustrator das Scriptographer Plug-In Q, mit dem Sie übereine JavaScript basierte Sprache Ihre gewohnten Werkzeuge automatisierenkönnen. Welche Regeln befolgt werden, um zumBeispiel tausend Kreise anzuordnen, ist dann Ihrer Phantasie überlassen.Oft dient auch die Natur als Vorbild für generative Grafiken.Wie das Beispiel zeigt, können Sie in Scriptographer Einstellungen(Variablen) in einem extra Fenster anpassen. Für ein effizientesArbeiten ist es praktisch, wenn Sie diese Variablen schnell undeinfach in einem übersichtlichen Interface ändern können. In derRegel haben Sie die Auswahl zwischen den unterschiedlichstenEingabe-Elementen wie Schieberegler, Checkboxen, Auswahllisten,Mausinteraktionen und vielen mehr. Ohne Interface müsstenSie Variablen direkt im Quelltext ändern. Um eine intuitive Be-048 Klicken statt Tippen mit dem Link-Code unter

Webdesigndienbarkeit eines selbstentwickelten generativen Werkzeuges zuermöglichen, sind Interfaces, wie das des Scriptographer Plug-Ins,unverzichtbar – vor allem wenn der Anwender Ihres Scripts keinProgrammierer ist.Generative ErscheinungsbilderEin sehr schönes Beispiel für ein generatives Erscheinungsbild liefertdie Diplomarbeit von Florian Gläser aus dem Jahr 2008. Für dieösterreichische Zentralanstalt für Meteorologie und Geodynamik(ZAMG) hat er eine (fiktive) visuelle Identität entwickelt, die Wetterdatenals Eingabewerte verwendet. Zu Demonstrationszweckenhat er ein Interface geschaffen, mit dem sich die unterschiedlichstenWettersituationen simulieren lassen, das entsprechende Logowird in Echtzeit generiert.Generatives Design für alle?Nach dem kleinen Umweg, der die Einsatzmöglichkeiten von generativemDesign verdeutlichen sollte, stellen wir Ihnen nun einigeProgrammierumgebungen vor, die mächtiger sind als Plug-Ins wieScriptographer, aber auch um einiges mehr an Einarbeitungszeiterfordern. In den letzten Jahren sind zahlreiche Tools entstanden,die im Vergleich zu ausgewachsenen Programmiersprachen wieC++ oder Java wesentlich schneller zu Erfolgserlebnissen führen.Entwicklungsumgebungen, die speziell auf die Bedürfnisse von gestaltungsorientiertenMenschen zugeschnitten sind, bieten auchohne Expertenwissen schnell Erfolgserlebnisse und machen Lustauf mehr. Das prominenteste Beispiel ist sicherlich Processing W,das am Massachusetts Institute of Technology in Boston von BenFry und Casey Reas entwickelt wurde und seitdem mithilfe voneiner großen Community von Open-Source-Entwicklern erweitertwird.Das Processing-Quellcode-Fenster und links daneben ein Ausgabefenster.Processing eignet sich speziell für die Programmierung von Grafiken,Texten und Animationen, erlaubt aber auch die Einbindungvon Bildern, Videos, 3D-Objekten und Sound. Datenaustausch mitanderen Applikationen, Benutzern, Datenbanken, Sensoren etc.ist ebenso möglich. Durch den einfachen Aufbau der Sprache undder Entwicklungsumgebung mit einem einzigen Editierfenster führtes sehr schnell zu visuell ansprechenden Ergebnissen. Processingbasiert auf Java, was die Einbindung von Scripten in Webseitendeutlich vereinfacht.Corporate Design: Das Logo bildet immer das aktuelle Wetter ab und ist somitgleichzeitig eine Datenvisualisierung. Auch wenn die gewählte Darstellungsformsehr abstrakt ist, lässt sich z. B. durch die Farbe des Logos auf die Temperaturschließen, was für wiederkehrende Besucher der Webseite eine essenzielle Informationsein kann.Flash und HTML5Für Webentwickler eine nahe liegende Wahl ist mit Sicherheit Flash. Interessanterweisewar Flash vor der Einführung des objektorientiertenEin Script, das Punkt so setzt, dass sie ein Muster bilden wie die Kerne in einerSonnenblume. Durch die Anpassung der Werte im Interface verändert sich auchdas erzeugte Muster.www.Webstandards-magazin.de049

WebdesignAction Script viel beliebter unter Nicht-Entwicklern, da es noch spielerischererlernbar war. Durch die (unbestritten dringend notwendige)Verwandlung in eine ausgewachsene Entwicklungsumgebung wurdeder Bedarf für das „HYPE-Framework“ geschaffen E, das 2010 vonBranden Hall und Joshua Davis vorgestellt wurde. Dieses setzt aufAS3 auf und verlangt nur grundlegende Programmierkenntnisse. Fürdie Entwickler des Frameworks war es das Wichtigste, den Spaß amSpielen zurückzubringen. Das ist ihnen definitiv gelungen, auch wennder Nutzer schnell an Grenzen stößt und dann wieder auf AS3 zurückgreifenmuss. Den Einstieg in die Programmierung von generativenGrafiken unter Flash erleichtert es allemal. Einen ähnlichen Zugangzu generativem Design im Web bietet Paper.js R, ein Open-Source-Vektorgrafik-Framework, das auf dem Canvas-Element von HTML5aufsetzt. Die Entwickler haben dafür eine JavaScript ähnliche Sprachenamens Paperscript definiert, die Vektoren und Bilder anhand von freidefinierbaren Algorithmen transformiert. Eingebunden wird Paper.jsCode wie gewohnt über den -Tag; das Zeichnen vonFormen, die Erstellung von Animationen und das Verarbeiten vonMaus- und Tastatureingaben sind mit wenigen Zeilen Code möglich.Grafische EntwicklungsumgebungenDie bisher erwähnten Programmiersprachen und Frameworks unterscheidensich wesentlich in ihrem Funktionsumfang. Von sehruniversellen und mächtigen Sprachen wie C++ bis hin zu sehrspeziellen Anwendungen wie Scriptographer. Das wirkt sich natürlichauch auf die Ansprüche aus, die an den Entwickler gestelltwerden. Je stärker eine Programmiersprache auf ein Einsatzgebietspezialisiert ist, desto bequemer und leichter ist es, sie dort anzuwenden.Gleichzeitig wird sie dadurch ungeeigneter für andereAnwendungen. Allen gemeinsam ist, dass sie auf dem klassischenParadigma des Programmcodes basieren. Für alle diese Tools müssenSie eine textuelle Syntax erlernen und die Algorithmen Zeilefür Zeile eingeben. Dies ist aber nicht die einzige Möglichkeit, wieSie Handlungsanweisungen an Computer übergegeben können.Mithilfe von grafischen Programmiersprachen können Sie Programmanweisungenin Form von visuellen Elementen miteinanderverknüpfen, ähnlich wie in Blockdiagrammen, die oft als Grundlagefür die Entwicklung von Programmcode dienen. Nur in diesem Fallist das Blockdiagramm der Programmcode.Eine derartige Programmierumgebung ist beispielsweise vvvv T.Die zentralen Elemente in einem damit erstellten Programm (genanntPatch) sind die sogenannten „Nodes“, welche bestimmteFunktionen bereitstellen, und „Links“, die Informationen zwischenden Nodes übermitteln. Dabei kommen die Eingabewerte immervon oben und werden nach der Verarbeitung unten ausgegeben.Von dort können die Ergebnisse an andere Nodes weitergegebenwerden, um komplexere Berechnungen auszuführen. Im Fall vonvvvv wird beim Verknüpfen von zwei Nodes, oder beim Änderneines Eingabewertes, sofort auch der resultierende Ausgabewertangepasst. Es gibt keine Unterscheidung zwischen Programmiermodusund der Ausführung des Programmes. Es handelt sich alsoum eine Echtzeit- bzw. Runtime-Programmierumgebung. Dies hatden Vorteil, dass Sie Fehler oder unerwünschte Ergebnisse soforterkennen können und dass Sie auf eine sehr intuitive und spielerischeArt und Weise entwickeln können. Insbesondere wenn esum die Programmierung von generativer Grafik geht, ist dieser Ansatzvorteilhaft, da im gestalterischen Prozess ein experimentellerAnsatz sehr inspirierend sein kann. So können durch Fehler beimVerbinden von Nodes unerwartete, aber grafisch ansprechendeErgebnisse auftreten, die Sie wiederum als Basis für weitere Entwicklungenverwenden können. Eine Besonderheit von vvvv ist derUmgang mit einer großen Anzahl von Objekten. So gibt es z. B.ein „Quad“ Node, der ein Quadrat zeichnet, das über einen Linkzum „Transform“ Node skaliert, verschoben und rotiert werdenkann. Wenn nun 100 Quadrate gezeichnet werden sollen, ist esnicht nötig, 100 Node-Paare zu erstellen. Stattdessen kann eineListe (genannt „Spread“) aus 100 Werten in die Transform Nodegeschickt werden. Für jeden Wert wird dann ein Quad gezeichnetund entsprechend transformiert. Die 100 Werte müssen dafürnicht unbedingt manuell eingetragen werden, es gibt Nodes, dieSpreads nach gewissen Mustern (kreisförmig, zufällig, gekacheltusw.) erzeugen. Natürlich können Sie auch eigene Berechnungenkonstruieren, die dann die gewünschte Anordnung erzeugen.Jetzt kostenlos Demozuganganfordern: www.xovi.de*Mtl., zzgl. MwSt.050 Klicken statt Tippen mit dem Link-Code unter

Webdesigngenerative Grafiken zu zeichnen. Das Projekt ist aber noch weitdavon entfernt, den vollen Funktionsumfang von vvvv zu bieten.Durch Crowdsourcing wird jedoch versucht, eine größere Anzahlvon Entwicklern dazu zu bringen, Nodes zu portieren und so denFunktionsumfang stetig zu erweitern.FazitGenerative Gestaltung ist mit Sicherheit ein Thema, das einiges an Einarbeitungszeiterfordert und von Gestaltern ein Umdenken verlangt.Programmieren ist nicht Jedermanns Sache. Zusätzlich sind logischesDenken und ein gewisses mathematisches Grundverständnis zwingenderforderlich, um produktiv arbeiten zu können. Die Möglichkeiten,die programmiertes Design bietet, stehen jedoch in einemsehr vernünftigen Zusammenhang, da Automatismen sehr viel ZeitDie grafische Programmierumgebung „vvvv“ das zeigt wie zwei Zahlen oder Gruppenvon Zahlen über die + Node addiert werden können. Um viele Objekte zuzeichnen werden nur wenige Nodes benötigt. Trotzdem kann jedes einzelne Objektindividuell beeinflusst werden.Wenn Sie viele Nodes in einem Patch über Links verknüpfen,Links sich kreuzen und Nodes mehr Platz beanspruchen, als derBildschirm bietet, geht schnell die anfängliche Übersichtlichkeitverloren – und damit auch der große Vorteil von grafischen Programmiersprachen.Deswegen kann eine Gruppe an Nodes mitihren Links gruppiert werden, um als „Subpatch“ in einem anderenPatch eingesetzt zu werden. Ein Patch wird zu einer Node mit freidefinierbaren Ein- und Ausgängen. Dieses Konzept ist analog zuFunktionen in einer textbasierten Programmiersprache und schafftÜbersichtlichkeit.sparen können; ganz abgesehen von den neuen Möglichkeiten, diesich Gestaltern bietet. Um die psychologische Hürde zu verringern,empfiehlt es sich, mit einem einfachen Tool wie Scriptographer odereiner grafischen Programmiersprache wie vvvv zu beginnen. WennSie im Bereich Generative Gestaltung noch unerfahren sind, solltenSie in jedem Fall mehrere Ansätze ausprobieren, bis ein Tool dabei ist,das am besten zu Ihren persönlichen Präferenzen passt. So könnenSie die Grundlagen der generativen Gestaltung durch freies Experimentierenerlernen. Mit dem erworbenen Wissen sollten Sie dannauch schneller in der Lage sein, mächtigere Programmiersprachen zuerlernen oder das gewohnte Tool durch selbst entwickelte Plug-Inszu erweitern. Halten Sie auf jeden Fall die Augen offen, der Boom beigenerativen Tools hat gerade erst begonnen, und die nahe Zukunftwird mit Sicherheit neue spannende Entwicklungen hervorbringen.vvvv.jsBis vor kurzem war vvvv ein reines Windows Tool, das nicht fürden Einsatz im Web gedacht war. Entwickelt wurde es für interaktiveMedieninstallationen für Events, Ausstellungen, Messen undMuseen. Es ermöglicht die Synchronisation von beliebig vielen Videoprojektoren,die Steuerung von Lichtequipment, das Auslesenvon Sensoren, Kamera-Tracking und vieles mehr. Der Datenaustauschmit Webanwendungen war dabei immer wichtig, um z. B.User Generated Content aus dem Web auf Gebäudefassadenprojizieren zu können oder Twitter Feeds auf gekrümmten Leinwändendarstellen zu können. Um aber generative Grafiken direktim Browser zu erzeugen und anzuzeigen, müssen Sie nach wievor einige Stolpersteine überwinden. Das neue Projekt „vvvv.js“versucht dem Abhilfe zu schaffen, indem es die Ausführung vonvvvv Patches im Browser erlaubt. Ähnlich wie paper.js und processing.jsY wird das Canvas-Element von HTML5 verwendet, umAutor >> Links >> Bild- und QuellennachweisCode-LinkTwitter-HashtagThomas HitthalerDer Geschäftsführer und Mitgründer des Wiener DesignstudiosStrukt (strukt.com) befasst sich schon seitseiner Diplomarbeit aus dem Jahr 2005 regelmäßig mitgenerativem Design und setzt es bei Projekten für kulturelleund kommerzielle Kunden ein.bcc914#wsm1211-48www.Webstandards-magazin.de051