# URFORMEN Ein interaktives, visuelles Experimentierfeld für architektonisch-visuelles Denken. Entwickelt als p5.js-Anwendung von Theodor (Doc) Yemenis in Zusammenarbeit mit Gemini. ![[ARCH-TOOL-101.jpeg]] --- ## 🔹 Die Idee **"ARCH TOOL"** alias **"DIE URFORMEN"** ist ein Werkzeug, das an der Schnittstelle von digitaler Kunst, Architektur und generativem Design angesiedelt ist. Es dient dazu, visuelle Informationen – repräsentiert durch ein Bild – zu dekonstruieren und in einem dynamischen System neu zu interpretieren. Die Kernidee ist, ein statisches Bild in seine "visuelle DNA" zu zerlegen. Diese fundamentalen Bausteine, hier **"Ur-Formen"** genannt, werden zu autonomen Agenten, die in einem virtuellen Raum agieren. Durch die Beobachtung ihrer Interaktionen entstehen neue, unvorhersehbare Kompositionen, die die ursprüngliche Ästhetik des Bildes auf eine fließende, meditative Weise transformieren. Das Werkzeug soll nicht nur ein Generator für Animationen sein, sondern auch eine Einladung zum Experimentieren: Wie verändern sich bekannte Strukturen, wenn ihre Bestandteile nach neuen Regeln interagieren? Welche verborgenen Muster und Harmonien treten zutage? --- ## 🎯 Ziele des Projekts * **Dekonstruktion:** Ein Bild wird nicht nur betrachtet, sondern aktiv in seine strukturellen Bestandteile zerlegt. * **Emergenz:** Aus einfachen Regeln (dem Boids-Modell) entstehen komplexe, ästhetisch ansprechende Schwarmverhalten. * **Interaktion:** Der Benutzer ist kein passiver Zuschauer, sondern ein aktiver Kurator, der durch die Manipulation von Parametern die Dynamik der Simulation in Echtzeit steuert. * **Kreativer Output:** Die generierten Animationen sind nicht flüchtig, sondern können als hochauflösende Videodateien exportiert und für weitere kreative Projekte verwendet werden. --- ## ✨ Funktionalität & Bedienung Das ARCH TOOL ist vollständig browserbasiert und wird über eine grafische Benutzeroberfläche (GUI) gesteuert, die neben dem visuellen Canvas platziert ist. ### 1. Bild laden - Beim Start wird ein Standardbild geladen (`assets/example01.jpg`). - Du kannst ein beliebiges Bild von deinem Computer per **Drag & Drop** direkt auf den Canvas ziehen, um es zu laden. ### 2. Segmentierung Die Segmentierung zerlegt das geladene Bild in seine Ur-Formen. Die Methode ist so konzipiert, dass die Fragmente immer ein **quasi-quadratisches Seitenverhältnis** beibehalten, was zu einer visuell harmonischen Zerlegung führt. - **Number of Agents:** Steuert, in wie viele Fragmente das Bild zerlegt wird (10-100). Änderungen werden nach dem Loslassen des Reglers aktiv. - **Regenerate:** Wendet die aktuellen Segmentierungsparameter erneut auf das Bild an und startet die Simulation neu. ### 3. Boids-Verhalten (Bewegungslogik) Jedes Fragment wird zu einem Agenten, der drei Grundregeln folgt: - **Separation:** Vermeide Überlappung mit nahen Nachbarn. - **Alignment:** Passe deine Bewegungsrichtung an die deiner Nachbarn an. - **Cohesion:** Bewege dich auf das Zentrum deiner wahrgenommenen Gruppe zu. Über die GUI können alle Aspekte dieses Verhaltens gesteuert werden: - **Max Speed:** Die maximale Geschwindigkeit der Agenten. - **Max Steer Force:** Die Agilität, mit der Agenten ihre Richtung ändern können. - **Perception Radius:** Der "Sichtradius", innerhalb dessen ein Agent seine Nachbarn wahrnimmt. - **Force Weights:** Schieberegler, um die Stärke von Separation, Alignment und Cohesion individuell zu gewichten und so das Schwarmverhalten dramatisch zu verändern. ### 4. Vollbildmodus - **Toggle Fullscreen:** Schaltet in einen immersiven Vollbildmodus um. Der Canvas wird dabei auf ein 16:9-Seitenverhältnis skaliert und zentriert, wobei bei Bedarf schwarze Balken ("Letterboxing") hinzugefügt werden. - Die GUI wird im Vollbildmodus automatisch ausgeblendet. - Mit der **ESC-Taste** kann der Vollbildmodus jederzeit beendet werden. ### 5. Video-Export Das Werkzeug ermöglicht es, die generierte Animation als Videodatei zu speichern. - **Start Recording:** Beginnt die Aufnahme der Animation. In der Statusleiste am unteren Rand des Canvas erscheint die Meldung "RECORDING...". - **Stop & Save Video:** Beendet die Aufnahme. Die Statusleiste zeigt "PROCESSING VIDEO...". Dieser Prozess kann je nach Videolänge und Rechenleistung einen Moment dauern. **Bitte habe Geduld!** Sobald das Video fertig ist, öffnet dein Browser automatisch einen **"Speichern unter..."-Dialog**, um die `.webm`-Datei auf deinem Computer zu sichern. --- ## 🛠️ Technische Umsetzung - **Sprache:** JavaScript - **Bibliothek:** [p5.js](https://p5js.org/) für die visuelle Darstellung und Interaktion. - **GUI:** [dat.GUI](https://github.com/dataarts/dat.gui) zur Erstellung der interaktiven Steuerungselemente. - **Video-Export:** [CCapture.js](https://github.com/spite/ccapture.js/) zur Aufnahme des Canvas und zum Rendern als `.webm`-Videodatei. --- *Dieses Projekt ist ein laufendes Experiment. Zukünftige Erweiterungen könnten alternative Segmentierungs- oder Anzeigemodi (z.B. Kaleidoskop) umfassen.*