QuietFrames | App

QuietFrames wird ein Framework für präzise, meditative Animationen – gebaut mit Code, gesteuert durch Parameter und Nodes. QuietFrames wird eine offene, kostenlose Creative-Coding Engine mit Entwicklungumgebung.

• Realtime, aber langsam im Ausdruck
• Expressiv, aber strukturiert
• Minimalistisch, aber tief
• Technisch, aber kontemplativ
• Albers-inspiriert, aber (hoffentlich ) eigenständig

QuietFrames entsteht aus dem Bedürfnis heraus, digitale Kunst zu entschleunigen. In einer Welt, in der alles flackert, springt und pulsiert, schafft QuietFrames Raum für:

• Langsamkeit
• Form
• Farbe
• Zeit

Klar inspiriert von Josef Albers’ Idee, dass kleine Farbveränderungen große emotionale Wirkung erzeugen können, führt QuietFrames diese Logik in Animation weiter:

Ein Frame ist nicht nur ein Moment – er ist ein Ort des Atems.

QuietFrames wird ein Werkzeug für:

• generative Künstler
• Designer
• Motion Artists
• Creative Coders
• Installationskünstler
• Menschen, die auch mal ein bisschen Ruhe im Digitalen suchen

QuietFrames Creative-Coding Studio#

Ein blick auf die IDE, die sich gerade schwerstens in der Entwicklung befindet:

Wie es begann#

An diesem Projekt arbeite ich seit Anfang 2022. Ja, ich weiß vollkommen bekloppt, denn schließlich habe auf dem Gebiet schon unzählige Leute Pionierarbeit geleistet. Es gibt mittlerweile haufenweise tolle, ausgereifte Werkzeuge . Wir sind aktuell bei AI und Machinelearning angelangt. Trotzdem fange ich ganz unten an. Will die Grundlagen lernen und die Basics verstehen und meine ganz eigene diffuse Idee von generativen Kunstwerken umsetzen.

“Generative Art / Creative-Coding ist der Versuch, durch Programmierung etwas Ausdrucksstarkes statt etwas Funktionales zu erschaffen”, sagt wikipedia

Spannendes Thema, das den Softwareentwickler in mir natürlich herausfordert.

Wie es geht#

Weitere erste Arbeiten gibt es hier .

Ziele des Projekts#

• Erforschung der technischen und künstlerischen Möglichkeiten.
• Künstlerische Ziele
  • Abstraktion
  • Bewegung
  • Chaos
  • Form – geometrisch
  • Minimalismus
  • Ordnung
  • Raum
  • Schichtung
  • Wahrnehmung
  • Josef Albers feiern

Es geht erst mal um die Ordnung, der sich alles unterordnet und in die sich alles – und jeder – einordnet. Alles ist Ausdruck dieser Ordnung: Die sauber angeordneten geometrischen abstrakten Figuren, die Herstellung durch Mathematik und Maschinencode bis hin zum Druck durch einen Roboter. Alles arbeitet zuverlässig nach Regeln, konstant und gleichförmig im Takt wie ein niemals ermüdendes Uhrwerk. Das steht gleichsam für die gewollte, beruhigende Konstanz in unseren Leben, das konservative, das sich nur widerwillig ändern mag. Dem gegenüber steht die Störung dieser Ordnung, die Zerstörung. Das Spannungsfeld zwischen Ordnung und Chaos, dem Perfekten und Unperfekten, ist für mich besonders spannend, und dort versuche ich zu wandeln.

Die CC-Toolbox#

Der Fokus liegt momentan auf der Codestruktur und Designpatterns, weniger auf der Optimierung nach Geschwindigkeit. Der Aufwand für Anpassungen soll minimiert werden. Das erreiche ich durch wieder verwendbare Module.

• Farben bzw. Palette
• Grundformen
• Animationen

Ich erzeuge mit meinem Code letztlich drei Arten von Artworks:

• Statics - Statische Bilder, die auch geplottet werden können.
• Dynamics - Das sind im Grunde Filme.
• Modifiables - Dynamische Bilder, mit Tweakpane oder aus der Umwelt in Echtzeit beeinflusst.

Eingebaut wird:

• ein Scene-Graph
• ein AnimationTimer
• eine Animation-Timline
• ein Oberserver-Pattern
• und Tweakpane-Support

Die grundlegende Anatomie des Frameworks schaut momentan so aus - Draufklicken öffnet die Skizze in der Lightbox, dann kann man auch zoomen:

High-Level Architektur#

Datenfluss Tweakpane → Parameter → Agent#

Das Backbone meiner Architektur ist das Parameter-Objekt, in das Daten in Echtzeit eingespeist werden können. Momentan hängt daran nur eine Tweakpane, aber das können ebenso Sensordaten aus der echten Welt sein.

gemacht mit#

• YARN 2
• Webpack 5
• Typescript 5.4
• Tweakpane 
• Electron, React
• IDE VS-Code  .

Weiterführende Links#

• Portfolio
• Recherche | Artikel
• quiet-frames Bibliothek | Anleitung
• Den Code gibt es demnächst in meinem Github  .