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
1Generative Gestaltung von Lutz Lungershausen
4Jsfeat – Sammlung von Algorithmen
5 devmag.org.za "Poisson Disk Sampling", Herman Tulleken vom 3.05.2009
Heiß auf Insider-Infos?
Immer up to date: Unser Newsletter versorgt dich einmal monatlich mit brandneuen Trends und Innovationen aus der Kommunikationswelt.