Willi Krappen

Drone Show Designer

In Arbeit

Browser-basierter, node-basierter Editor für Drohnen-Lichtshows: Graph-Modell als Single Source of Truth, Live-3D-Viewport, deterministische Bake-Pipeline, KI-Agent mit 30+ Tools direkt am Graphen. Work in Progress — aktuell live und funktional. Derzeit noch in Entwicklung.

Drone Show Designer

Schlüsselentscheidung

Der ShowGraph ist die einzige kanonische Zustandsquelle — React-Flow-Canvas, Three.js-Viewport, Inspector, Validator und Exporter sind sämtlich abgeleitete Sichten. Kein doppelter State, keine Drift. Preis: Live-Preview darf approximieren, Bake darf nicht — die Trennung ist explizit und getestet.

Die meisten Drohnen-Show-Tools sind Blender-Plugins oder proprietäre Desktop-Programme. Hier entsteht ein von Grund auf neu geschriebener, web-nativer Editor: ein typisierter ShowGraph (launch → formation → transition → idle → land) ist die kanonische Zustandsquelle; React-Flow-Canvas, Three.js-Viewport, Inspector, Validator und Exporter sind allesamt abgeleitete Sichten. Ein Claude-Tool-Calling-Agent kann den Graphen direkt schreiben — jeder Schreibvorgang macht vorher einen Snapshot, sodass sich jede KI-Änderung mit Ctrl+Z rückgängig machen lässt. Eine Standalone-Variante daneben nimmt einen Text-Prompt und liefert ein Formation-JSON plus Blender-Import-Script.

Aktiv in Entwicklung. Das Live-Deployment auf drones.prototyp.ms läuft und der Kern (Graph-Engine, Preview, Bake, KI-Agent) steht — aber neue Tools, Music-Sync und Polish landen laufend.

Architektur-Gesetze

Vier Regeln, die im Code (und in Tests) durchgesetzt werden. Sie machen den Editor erweiterbar, ohne den Kern aufzuweichen.

  1. 1

    ShowGraph ist kanonisch. Alles andere ist eine abgeleitete Sicht.

  2. 2

    Live-Preview darf approximieren; Bake nicht.

  3. 3

    Transitionen besitzen Point-Mapping, Entry/Exit und Motion-Interpolation — aber niemals Timing oder Drohnen-Allokation.

  4. 4

    Registries sind die einzige Erweiterungs-Oberfläche. Eine neue Transition, ein Generator, ein Farbprogramm ist ein einzelner register…()-Aufruf.

Im Editor enthalten

Die Bibliotheken hinter den Knoten. Alles registrierbar, alles vom KI-Agenten erreichbar.

Formation-Generatoren

ring · grid · sphere · spiral · line · heart · star

7 prozedurale Generatoren — Parameter-getrieben, direkt aus dem Inspector editierbar.

firework-burst · apple-tree-shake · breathing-sphere

3 animierte Formationen mit eigenem internem Timing.

create_formation_from_text

Frei-Text zu Punktwolke — generiert vom KI-Agenten direkt im Graphen.

Transition-Strategien

stagger · spiral · explosion · implosion · cascade · morph · color-sweep · bounce

8 Strategien. Jede besitzt ihr eigenes Point-Mapping und einen Minimum-Dauer-Schätzer — Timing und Drohnen-Allokation gehören aber nicht dazu (siehe Architektur-Gesetz Nr. 3).

Idle-Verhalten

hover · orbit · breathe · random-walk · figure-8 · swarm · sparkle · pulse · wave · spin · drift

11 Idle-Verhalten für Drohnen, die an Formation-Knoten attached sind — mit per-Achse-Inheritance-Flags.

Farbprogramme

solid · gradient · rainbow · pulse · chase (10 Programme)

10 Farbprogramme — Konstanten, Gradients, Regenbogen, Pulse, Chase-Pattern.

Schlüsselentscheidungen

Graph als Single Source of Truth

Ein einziges typisiertes Modell — launch / formation / transition / idle / land plus flow- und attachment-Kanten — ist die kanonische Zustandsquelle. React-Flow-Canvas, Three.js-Viewport, Inspector-Panels, Validator und Exporter sind allesamt derived views. Kein doppelter State, keine Drift.

Preview vs. Bake — zwei klare Pfade

evaluateAtTime() läuft im Main-Thread, unter 16ms pro Frame für 60-fps-Scrubbing, mit bewussten Approximationen. bakeShow() läuft in einem Web-Worker mit voller Physik-Enforcement und ist als einziges berechtigt, Export-Trajektorien zu produzieren. Der Vertrag zwischen beiden ist explizit und getestet.

KI-Agent als vollwertiger Editor

Ein Claude-Tool-Calling-Agent hat Zugriff auf 30+ typisierte Tools — create_formation_from_text, add_transition_node, set_color_program, generate_music_synced_show, analyze_image_for_formation, fix_all_violations. Jedes Write-Tool schreibt vorher einen History-Snapshot — jede KI-Änderung lässt sich mit Ctrl+Z rückgängig machen.

Registries als einzige Erweiterungs-Oberfläche

Eine neue Transition, ein Formation-Generator, ein Farbprogramm: ein einziger register…()-Call. Das macht das System für mich selbst und für KI-Tooling gleichermaßen erweiterbar — die Engine kennt nur Strategien, nicht die spezifischen Implementierungen.

Physik-Validierung getrennt vom Editor

Per-Segment-Geschwindigkeit (horizontal + vertikal), Beschleunigung, Drohnen-Paar-Abstand, Höhen-Floor und Geofence werden gegen das gebakte Resultat geprüft. Auto-Fix-Patches existieren für die häufigen Verstöße; Auto-Timing weist Dauern so zu, dass Constraints erfüllt sind.

Crash-Recovery via IndexedDB

Autosave landet in IndexedDB. Reload nach einem Crash bietet an, die zuletzt in Bearbeitung befindliche Show wiederherzustellen — kein verlorener Stand bei Browser-Crash oder versehentlich geschlossenem Tab.

Projekt-Größe (Stand jetzt)

Eckdaten aus dem aktuellen Stand. Test-LOC wird nicht zur 'Größe' gezählt, ist aber relevant für die Qualität der harten Teile.

KennzahlWert
Quelldateien (ohne Tests)110
Quell-LOC (ohne Tests)~22.700
Testdateien41
Test-LOC~7.900
Registrierte KI-Tools30+
Transition-Strategien8
Idle-Verhalten11
Formation-Generatoren7 + 3 animiert

Status — was steht, was in Arbeit ist

Was steht

stable

Graph-Engine, Preview-Pfad, deterministisches Bake im Worker, 8 Transitions / 11 Idles / 10 Color-Programme, IndexedDB-Autosave, CSV-Export. 41 Testdateien decken die harten Teile ab — Topology, Timing, Round-Trip-Serialisierung, Split/Merge-Flow.

Was in Arbeit ist

in arbeit

KI-Agent ist live aber neue Tools landen laufend; Music-Sync-Pipeline wird noch ausgebaut; MP4-Render-Export ist optional und nicht produktionsfest. Standalone-Companion ist ein eigener kleiner App-Slot, der noch nicht voll mit dem Haupt-Editor verheiratet ist.

Was bewusst draußen ist

non-goals

Multi-User-Collaboration, Cloud-Storage, eigenes Hardware-Protokoll. Der Editor ist single-user, browser-first, exportiert in offene Formate (CSV-Waypoints + JSON-Projekt). Das soll auch so bleiben.

Deployment

Statisches Vite-Build, ausgeliefert über nginx auf der gleichen VPS wie meine anderen .prototyp.ms-Apps. Keine Server-Komponente: alle KI-Aufrufe laufen mit einem benutzer-bereitgestellten Claude-API-Key direkt aus dem Browser. Ohne Key arbeitet der Editor vollständig — nur das Chat-Panel ist dann deaktiviert.