| |

3D-Würfel x Orphische Überlagerung — Creative Coding in p5.js

Dieser Beitrag behandelt eine Creative-Coding-Studie in p5.js, in der ich zwei visuelle Sprachen in einem Bildkörper zusammenführe: eine strenge 3D-Struktur aus ineinander geschachtelten Drahtgitter-Würfeln und eine flache 2D-Schicht, inspiriert von Sonia Delaunay und dem Orphismus. Das Ergebnis habe ich speziell für VJ-Projektion und Ambient-Musik-Performances entworfen.





Zwei Systeme in einem Bild

Die Grundlage bildeten vier ineinander geschachtelte Drahtgitter-Würfel. Zuerst ließ ich jeden Würfel mit leicht unterschiedlicher Geschwindigkeit rotieren, wodurch ein ruhiger, mechanischer Rhythmus entsteht. Zusätzlich platzierte ich kleine Punkte, die Kanten umkreisen und entlang ihnen gleiten — sie bleiben der Geometrie treu, fügen aber einen lebendigen Puls hinzu, wie Energie, die durch die Struktur fließt.

Darüber legte ich eine orphische Überlagerung: konzentrische Ringe und Bögen, die sich überlappen, sich durchschneiden und eine Collage aus Bewegung erzeugen. Diese Ebene hielt ich bewusst flach und grafisch — als Gegenpol zur Tiefe der Würfel. Zusammen erzeugen diese beiden Systeme eine stille visuelle Spannung, die sich bei langen Projektionen gut behauptet.


Farbe als Bewegung

Ich wählte eine Palette, die mit Delaunays simultanen Kontrasten übereinstimmt: Rot, Gelb, Blau, Orange, Grün, Weiß und Schwarz. Farbe ist hier keine Dekoration — sie treibt die wahrgenommene Bewegung an. Dadurch verändert sich das Bild ständig, selbst wenn die Animation zurückhaltend bleibt, weil die langsamen Rotationen und starken Kontraste kontinuierlich neue Kombinationen erzeugen.

Ein wichtiges Detail: Ich behandle Weiß eher als Raum denn als Farbe. Ich lasse Segmente, die normalerweise weiß wären, transparent, sodass der schwarze Hintergrund durchscheint. Dadurch wirken die Ringe, als seien sie aus der Dunkelheit herausgeschnitten — heller und architektonischer.


Warum es zu Ambient-Musik passt

Ambient-Musik braucht keinen schnellen Schnitt. Stattdessen benötigt sie visuelle Inhalte, die atmen können. Deshalb hielt ich die Animation langsam und geschichtet. Die Würfel liefern die Struktur. Die Kreise und Bögen bringen Rhythmus und Farbbewegung. Außerdem bilden die umkreisenden Punkte einen gleichmäßigen Puls. Dadurch erzeugen sie zusammen eine stille Spannung, die sich in Projektionen gut macht — man kann lange zusehen und dennoch immer wieder neue Kombinationen entdecken.

Ich verknüpfe diese Creative-Coding-Studie direkt mit meiner Live-VJ-Projektion in Resolume.


Technische Hinweise — p5.js WEBGL

Ich erstellte die Visualisierung in p5.js im WEBGL-Modus in 1920×1080. Ich baute alles aus einfachen Formen und wiederholten Mustern auf: Ringe als segmentierte Geometrie, Bögen als schneidende Ebenen, Würfel als Drahtgitter. Den kompletten Code schrieb ich von Grund auf neu, ohne Shader oder externe Abhängigkeiten — nur Komposition und Bewegung.

Schließlich: Wenn Sie mehr von dieser Arbeit erkunden möchten, besuchen Sie den Überblick zu Creative Coding oder die FDR-Sound-Musikseite.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *