Visuelle StudieV03 / 2026
KI-generierte Animation
Paper Garden
Blüten und Bewegung, vollständig aus Code.
Erwachen
Technische Studie / KI & Canvas 2D / 2026
Geschichten in Druckfarbe.
Die KI hat den Code für diese beiden Animationen geschrieben, einschließlich aller Formen, Texturen und Bewegungen. Der Browser zeichnet daraus die Bilder. Diese Studie untersucht, wie das ohne vorgefertigte Illustrationen oder Videoclips funktioniert.
Die beiden Animationen
Visuelle StudieV04 / 2026
KI-generierte Animation
Milky Way
Planeten und Sterne, vollständig aus Code.
Zwischen den Ringen
Paper Garden: 20 Sekunden. Milky Way: 24 Sekunden. Mit der Zeitleiste lässt sich jedes Bild einzeln ansehen.
Das Prinzip
Die KI schreibt ein Zeichenprogramm.
Die Technik heißt prozedurale Animation: Formen und Bewegungen werden durch Regeln im Code beschrieben. Ein KI-Coding-Agent hat dafür TypeScript-Code erzeugt, der mit der Canvas-2D-API des Browsers zeichnet. Auch Papierkörnung, Blüten und Sterne entstehen auf diesem Weg. Beim Abspielen ist kein KI-Modell mehr beteiligt.
Ich habe die Themen und Änderungswünsche vorgegeben: einen Papiergarten und eine Reise vom Sonnensystem zur Milchstraße. Der Agent hat die Zeichen- und Bewegungslogik erzeugt, das Ergebnis im Browser geprüft und den Code überarbeitet. Die Animationen entstanden in mehreren Iterationen.
01 / Briefing
Motive, Bildsprache und Ablauf festlegen.
02 / Generierung
Die KI erzeugt den Code für Zeichnung und Bewegung.
03 / Rendering
Der Browser zeichnet konkrete Zeitpunkte als Bilder.
04 / Prüfung
Bilder und Übergänge prüfen, dann den Code korrigieren.
Ohne vorgefertigte Assets
Auch die Drucktextur ist Code.
Formen aus Pfaden
Blätter und Blütenblätter bestehen aus Bézierkurven, Planeten aus Kreisen und Ellipsen. Der Code wiederholt, dreht und skaliert diese Grundformen. Ein Blütenblatt kann so eine ganze Blüte bilden; kleine Parameteränderungen erzeugen unterschiedliche Pflanzen.
Papier aus Zufallswerten
24.000 kleine Flecken bilden die Papierkörnung. Ein fester Startwert erzeugt immer dieselben Zufallswerte. Die Textur wird einmal gezeichnet und wiederverwendet. Dadurch bleibt das Papier ruhig, während sich die Motive bewegen.
Farbe aus Punktmustern
Wiederholte Punktmuster füllen ausgewählte Formen. Der Mischmodus Multiply verdunkelt überlappende Farben. Eine leicht versetzte Kontur deutet ungenauen Druck an. Diese einfache Kombination erzeugt hier den Riso-Look.
Bewegung und Konsistenz
Jedes Bild lässt sich erneut berechnen.
Die Funktion render(t) berechnet das Bild für einen Zeitpunkt. Stängelhöhe, Blütenöffnung und Kameramaßstab hängen von dieser Zeit ab. Ein Sprung zu Sekunde 7,5 ergibt im selben Renderer dasselbe Bild, auch nach einem Sprung zu Sekunde 12. Die vorherigen Bilder müssen dafür nicht abgespielt werden.
const scene = createStoryScene(canvas, "garden")
scene.render(7.5)
scene.render(12)
scene.render(7.5)So werden Pause, Zeitleiste und gezielte Bildprüfung möglich. Die Wiederholbarkeit kommt aus der Zeitberechnung und den festen Zufallswerten. In den Browser-Prüfungen lieferten beide Geschichten bei wiederholtem Aufruf desselben Zeitpunkts identische Pixel.
Beobachtungen aus dem Versuch
Was die Iterationen gezeigt haben.
Das Konzept braucht konkrete Vorgaben. Die erste Variante blieb beim Punkt-und-Wellen-Motiv der Referenz. Erst die Entscheidung für Garten und Weltraum führte zu anderen Szenen und Bewegungsabläufen. Eine neue Farbpalette allein hätte diese Änderung nicht beschrieben.
Lauffähiger Code kann trotzdem unnötig viel zeichnen. Die Galaxie bestand bereits aus 12.000 festen Sternen, wurde aber zunächst in jedem Bild neu gezeichnet. Eine einmal erzeugte Zeichenfläche speichert nun die Galaxie; danach werden nur noch ihre Position, Drehung und Größe verändert.
Die Ergebnisse sprechen für diese Technik bei stilisierten Motiven mit wiederholbaren Formen. Farbe und Timing lassen sich gezielt im Code ändern. Die räumliche Wirkung entsteht hier aus 2D-Transformationen; Größen und Entfernungen im Weltraum sind frei gestaltet. Physikalisch genaue Umlaufbahnen würden ein anderes Bewegungsmodell erfordern.