mono / poly

Für die Präsentation im Modul Kuration sollte das Prinzip Mono → Poly nicht erklärt, sondern erlebt werden: keine Labels, keine Anmerkungen, nur eine visuelle Transformation, die im Moment des Zuschauens entsteht. Die Herausforderung war, aus einem einzigen Punkt im leeren Raum durch reine Interaktion – Klick für Klick – ein Netz aus Beziehungen wachsen zu lassen, das sofort verständlich ist, ohne ein Wort zu sagen.

Der Rahmen war bewusst schlank gesetzt: eine einzelne index.html, kein Build-Prozess, kein npm – Three.js kommt per CDN. Die Szene sollte als Fullscreen-Experience für den Beamer funktionieren, nicht als responsive Website; mobile Optimierung und Touch-Support waren bewusst kein Ziel.

Der Kern der Szene ist die Verbindungslogik: Nach jedem Klick werden alle Punktpaare neu berechnet, und liegt die Distanz zwischen zwei Punkten unter einem Schwellenwert, zieht sich automatisch eine Linie zwischen ihnen. Punkte verändern sich mit wachsender Vernetzung – wenig Verbindungen bedeuten klein und hellblau, viele Verbindungen groß und dunkelblau. Diese Farb- und Größenlogik habe ich bewusst kontinuierlich statt gestuft aufgebaut, damit der Übergang von Mono zu Poly auch bei einzelnen Punkten nachvollziehbar bleibt. Bewusst weggelassen habe ich alles, was von der reinen Struktur ablenkt: kein Hover-Effekt, keine Text-Labels, kein OrbitControls, kein Reset – nur eine langsame, ambiente Rotation der Kamera, damit die Szene auch ohne Klicks in Bewegung bleibt.

Entstanden ist eine reduzierte Three.js-Szene auf weißem Grund: Jeder Klick setzt einen neuen Punkt an einer zufälligen Position im Raum, und das Netz aus Linien baut sich in Echtzeit neu auf. Punktgröße und -farbe skalieren linear mit der Anzahl ihrer Verbindungen – von hellblauen 4px-Punkten bis zu dunkelblauen 14px-Knoten –, die Linien selbst werden nach Distanz eingefärbt. Die Kamera rotiert die ganze Zeit sanft um die Szene, sodass auch ein einzelner, unverbundener Punkt am Anfang schon in Bewegung wirkt.

Als Fullscreen-Projektion in der Präsentation hat die Szene genau das transportiert, worum es ging: Das Publikum sieht dem Wachstum eines Netzwerks aus einem einzigen Punkt buchstäblich zu, ganz ohne dass ein Wort fallen musste. Für mich persönlich war es ein gutes Stück Creative Coding – die Verbindungslogik und die kontinuierliche Farb- und Größenberechnung mit Three.js so klar und performant wie möglich umzusetzen, ohne auf Frameworks oder Build-Tools zurückzugreifen.