Prozessheft

01 Einführung

Inspiration für das Projekt ist die algorithmische Denkweise von Manfred Mohr: Bilder entstehen aus Regeln, nicht aus direkter Zeichnung. Diese Haltung habe ich in meinem eigenen visuellen System weiterentwickelt.

Technische Basis war p5.js, weil sich damit generative Grafiken direkt im Browser reproduzierbar aufbauen und präsentieren lassen.

Referenzbild: P3010-8.

02 Generierte Erweiterung vom Originalbild

Die Erweiterung übernimmt grundlegende algorithmische Eigenschaften der Vorlage und führt sie mit eigener Formlogik weiter.

03 Generiertes Gegenteil vom Originalbild

Ansatz: visuelle Polarität erzeugen (z. B. Farbe zu Schwarz-Weiss, Fläche zu Linie, organisch zu streng geometrisch).

04 Generierte Zerstörung vom Originalbild

Die Zerstörung versteht sich als Transformation: Ordnung wird aufgebrochen, um Bewegung, Energie und neue Bildspannung freizusetzen.

05 Mini-Projekt

Im Mini-Projekt wurden Position, Rotation, Farbwahl und Formtypen vollständig seedbasiert erzeugt. Damit war das Bild reproduzierbar und technisch kontrollierbar. Diese Seed-Logik war die Grundlage für das Endprodukt.

Link zum Skript

06 Lichtershow

Experiment mit seedgesteuerter Loop-Animation: Grid, Drift-Vektoren, individuelle Lichtparameter und zeitbasierte Modulation pro Frame.

07 Text -> Seed

Text wurde über ein Hash-Verfahren in einen stabilen 32-Bit-Seed umgerechnet. Das zeigte, wie sich semantische Eingaben in reproduzierbare Generationsparameter übersetzen lassen.

08 Neue Idee für das Endprodukt: Ton -> Key

Die zentrale Erweiterung war, den Key nicht mehr manuell einzugeben, sondern aus dem Mikrofon-Ton zu berechnen. So reagiert das generative System auf die akustische Umgebung.

Eigene Testseite für diese Stufe: Ton -> Key Test.

09 Wie der Key aus Ton berechnet wird

1) Mikrofonzugriff über getUserMedia.
2) Analyse mit WebAudio (AnalyserNode).
3) Frames aus Spektrum und Zeitbereich sammeln.
4) Features berechnen: 8 Frequenzbänder, Spektral-Centroid, Roll-off, RMS, Zero-Crossing.
5) Features quantisieren für Stabilität.
6) Ergebnis als Base36-String ausgeben (Key).

Die Quantisierung ist entscheidend: kleine Störgeräusche sollen den Key nicht bei jedem Frame komplett wechseln lassen.

10 Endprodukt Kurzerklärung

Im Endprojekt wird alle 10 Sekunden ein Ton-Key erzeugt. Der Key wird per Hash in einen numerischen Seed umgewandelt. Dieser Seed steuert anschliessend die komplette p5.js-Komposition.

Die Renderlogik erzeugt mehrere Layer. Bei jedem neuen Key entsteht eine neue, aber weiterhin regelbasierte Bildvariante.

Im Interface wird Key zum vorherigen Key und Zeitstempel angezeigt, damit der Zusammenhang zwischen Ton und visueller Ausgabe direkt sichtbar bleibt.

11 Endprodukt Technik

Erklärung wie das Bild generiert wird:

Zuerst wird die gesamte Fläche mit einer dunklen Hintergrundfarbe gefüllt. Damit entsteht eine ruhige, einheitliche Basis, auf der alles Weitere aufgebaut wird.

Danach werden mehrere grosse, transparente Farbflächen eingefügt. Jede Fläche erhält einen eigenen Farbton, wird relativ gross gewählt, frei im Bild positioniert und leicht gedreht. Die Ecken sind abgerundet. Durch die Transparenz überlagern sich die Flächen und erzeugen weiche Farbmischungen.

Anschliessend werden mehrere dünne, weisse Linien im zentralen Bereich des Bildes gezeichnet. Diese Linien verlaufen nicht gerade, sondern leicht wellig. Jede Linie wird minimal unterschiedlich ausgerichtet, sodass eine dynamische, aber dennoch harmonische Struktur entsteht.

Danach werden zahlreiche kleine Kreise über die gesamte Fläche verteilt. Die meisten sind sehr klein, einige etwas grösser. Ihre Farben variieren leicht, und durch eine gewisse Transparenz wirken sie wie Partikel oder feine Sprenkel, die dem Bild zusätzliche Tiefe und Textur verleihen.

12 Reflexion

Für mich war das Projekt eine sehr wertvolle und interessante Erfahrung. Durch die Arbeit an meinem Projekt, welches unter anderem auf meiner Website bg.florlix.com dokumentiert ist, konnte ich eine andere Seite der Kunst entdecken und neue Arbeitsweisen ausprobieren. Besonders bereichernd fand ich es, mit einem Computer arbeiten zu können, anstatt ausschliesslich traditionelle Techniken wie das Zeichnen von Hand zu verwenden. Diese Kombination aus Technologie, Design und Kreativität ermöglichte es mir, mein kreatives Potenzial voll auszuschöpfen und gleichzeitig meine technischen Fähigkeiten weiterzuentwickeln. Es war eine neue und andere Art für mich zu arbeiten. Ausserdem ist das Projekt auf meine eigenen Interessen zugeschnitten.

Während des gesamten Projekts gelang es mir, meine Planung und mein Zeitmanagement gut zu strukturieren. Zu Beginn setzte ich mir grobe Zwischenziele, die ich dann im Laufe der Zeit genauer adressiert habe. Diese Struktur half mir, den Arbeitsprozess überschaubar zu halten und konzentriert zu bleiben. Ich plante bewusst kleinere Arbeitsblöcke und überprüfte regelmässig meinen Fortschritt, sodass ich nie unter starkem Zeitdruck stand. Rückblickend bin ich mit meinem Zeitmanagement sehr zufrieden, da ich genügend Spielraum für Überarbeitungen und kreative Anpassungen hatte. Ich denke ich hatte genügend Zeit für das Projekt und ich habe die Zeit gut eingesetzt.

Es gab auch Herausforderungen während des Arbeitsprozesses, insbesondere wenn technische Aspekte oder Designentscheidungen nicht sofort so funktionierten, wie ich es mir vorgestellt hatte. In solchen Momenten probierte ich verschiedene Lösungen aus und suchte manchmal nach zusätzlichen Informationen, um technische Probleme zu lösen. Zum Beispiel das Aufnehmen des Tons über den Browsers. Ich musste mehrmals den Ansatz bisschen abändern und erstmal genauer verstehen, was die Logik dahinter ist. Diese Phasen haben mir gezeigt, wie wichtig es ist, flexibel und reflektiert zu arbeiten, und dass Dinge die nicht funktionieren keine Fehler sind, sondern Bereich mit Verbesserungspotenzial.

Insgesamt bin ich mit dem Endergebnis sehr zufrieden. Ich möchte gerne das Endprodukt auf einem Laptop so ausstellen. Die Leute sollen damit interagieren können und sehen wie der Computer seine Arbeit macht. Ich habe nicht nur ein Ergebnis erzielt, das meinen Erwartungen entspricht, sondern auch viel über meinen eigenen Arbeitsstil gelernt. Für zukünftige Projekte möchte ich weiterhin an einer klaren Struktur arbeiten und Feedback frühzeitig einfliessen lassen, um den Prozess noch effizienter zu gestalten. Ich denke, dass ich in Zukunft noch mehr kreative Freiheit und technische Kontrolle in meine Projekte einbringen kann. Ausserdem habe ich gelernt, dass die digitale Welt für mich die richtigen Freiheiten bietet.