Werbeagentur für Corporate Design, Online Marketing, Kommunikation, Employer Branding

Generative Gestaltung – jetzt auch im Web!

In kreativen Insiderkreisen ist die generative Gestaltung schon seit längerem ein heißes Thema. Bereits vor drei Jahren hat unser Chief Creative Agent Lutz Lungershausen über diesen Trend berichtet.1 Der Begriff generative Gestaltung beschreibt visuelle Werke, die ohne herkömmliche Grafikprogramme nur durch den Einsatz von Algorithmen erzeugt werden. Formen, Farben, Typografie und Bildelemente werden ausschließlich über numerische Parameter angelegt und gesteuert. Der Designer wird zum Programmierer – die Grenzen zwischen Screendesign und Web-Entwicklung verschwimmen.

JavaScript auf Wachstumskurs

Dank der leistungsstärkeren Browser sprießen immer mehr JavaScript-Bibliotheken mit Algorithmen zur generativen Gestaltung aus dem Onlineboden. Auch Processing ist mit dem Projekt Processingjs2 bereits auf JavaScript portiert worden. Processing ist eine der bekanntesten Programmiersprachen im Bereich der generativen Gestaltung mit eigener Entwicklungsumgebung und einer großen Community. So werden bestehende Processing-Projekte nun auch im Browser ausgeführt und die von Processing verwendeten Algorithmen genutzt.

Werkzeuge zur Gesichtserkennung

Paper.js3 ist ein weiteres Framework zur generativen Gestaltung in JavaScript. Dieses Open Source Framework versteht sich als universelles Werkzeug zur Visualisierung im Browser. Es vereinfacht die Handhabung mit dem HTML-Canvas-Element enorm. Gestaltungsalgorithmen sind in dem Framework jedoch nicht zu finden. Dafür eignet sich aber jsfeat4. Diese JavaScript-Bibliothek enthält verschiedene Algorithmen mit einem besonderen Fokus auf der Bildbearbeitung. Mit den Algorithmen von jsfeat können unter anderem Objekte auf Bildern erkannt werden. So wäre es möglich, mit der Webcam das Gesicht einer Person in Echtzeit zu erkennen.

Visuelle Punktlandung

Das Bild zu diesem Artikel habe ich mit einer eigenen Implementation des Poisson Disk Sampler umgesetzt5. Dieser Algorithmus setzt per Zufall einen initialen Punkt mit einem definierten Radius. Anhand des ersten Punktes wird ein zweiter Punkt im Umfeld neben dem vorherigen Punkt berechnet. Dieses Verfahren kann dann nach Belieben wiederholt werden. Die gesammelten Koordinaten und die zugehörigen Radien bieten eine interessante Basis für eine Visualisierung.

Den Quellcode meines Poisson Disk Samplers habe ich beim Open-Source-Hostingdienst github zur freien Verfügung gestellt6. Somit trage ich hoffentlich ein wenig dazu bei, die generative Gestaltung im Web weiter voranzutreiben.

Links

1 Generative Gestaltung von Lutz Lungershausen

2 Processingjs

3 Paper.js

4 Jsfeat – Sammlung von Algorithmen

5 Artikel über Poisson Disk Sampler

6 Poisson Disk Sampler JS