Creative-Code | Library

Zuletzt aktualisiert am 16. Januar 2024 6 Minuten

Vorbemerkung

Hier entsteht die technische Dokumentation. Das ist also eine Baustelle

Ein Artwork besteht aus einer Scene, die wiederum aus verschieden Shapes besteht, die gezeichnet werden. Als Basis dient Canvas-Sketch.

Die Javascript Bibliothek cc-utils umfasst Module/Klassen/Objekte, die ich in meinem Creative-Code Projekt verwende. Sie befinden sich in den folgenden Modulen:

  • Animation — bietet einen Timer, um eine Animation zu drosseln, eine Zeitleiste und einige grundlegende Animationen.
  • Background — Unterstützt eine zentrierte Hintergrundform.
  • Brush — Ein Pinsel zum malen…
  • ColorSet — zum Einfärben von etwas, aus einer Sammlung von Farben.
  • Coordinate — bündelt Zeilen und Spalten-Nummer für etwas Komfort für das Grid.
  • Format — Ein beschnittenes Format innerhalb eines quadratischen Canvas.
  • Grid — Ein Raster. Eine Sammlung von Miniatur-Leinwänden.
  • SceneGraph — Alle zu zeichnenden Agenten werden in einem SceneGraph zusammengefasst.
  • Shape — Eine Sammlung von grundlegenden Formen zum Zeichnen.
  • Size — Eine Klasse, um Breite und Höhe in einem Objekt zu bündeln.
  • Vector — Unterstützt einige 2D- und 3D-Vektoroperationen.

Die Module werden weiter unten ausführlicher beschrieben. So schaut das ganze Paket im Moment aus:

Vier Elemente

Ich hab vier Elemente mit denen ich arbeite:

  1. Drawable — Dinge die gezeichnet, und schnell animiert werden.
  2. Animable — Dinge die (langsam) animiert werden.
  3. Observable — Dinge die beobachtet werden.
  4. Observer — Dinge, die andere Dinge beobachten.

anders ausgedrückt:

  1. Einen SceneGraph mit seiner draw() Methode.
  2. Den langsamen Timer mit seiner animate_slow() Methode.
  3. Das Observer-Pattern das auf Veränderungen von Eigenschaften in einem Observable-Object reagiert, und alle registrierten Observer-Objekte informiert — was bedeutet deren update() Methode auf zu rufen.

Was brauche ich sonst noch?

  • Ich brauche eine Effekt-Pipeline…
  • Zeit…

Parameter

Jedes Element des Artworks verfügt über eine ganze Menge an Parametern.

  • Sie können über eine Tweakpane eingestellt werden,
  • oder sie sind als konstant festgelegt,
  • oder sie werden über Zuffallsgeneratoren verstellt.

Dabei hat sich folgendes Vorgehen bewährt:

Das Parameter-Objekt

  • Alle Parameter werden in einem Parameter-Objekt gespeichert.
  • Im Parameter-Objekt stecken viele ParameterSet-Objekte.
  • Alle Tweakpane-Parameter in das Parameter-Objekt übertragen.

dazu gilt:

  • Der Name des ParameterSet-Objekts spiegelt den Namen des Objekts wieder, das damit versorgt wird. Das schafft hoffentlich Übersicht.
  • Das Parameter-Objekt wird immer komplett übergeben, und jedes Objekt nimmt sich daraus das, was es braucht.
  • Das Parameter-Objekt hat die Form:

let parameter = {
    parameterSet_1:{
        eigenschaft_1a:"wert A"
    },
    parameterSet_2:{
        eigenschaft_2a:"wert B"
    },
    tweakpane:{

    }
}

Das State-Objekt

Parameter — bzw. Veränderungen an Parametern — werden auch über Statusveränderungen (state) von Observable-Objekten an die Observer-Objekte weiter gereicht, in dem deren update Methode aufgerufen, und die Quelle als Klasse / Objekt übergeben wird.


let state = {
  parameterSet_1:{
    eigenschaft_1a:"wert A"
  },
  parameterSet_2:{
    eigenschaft_2a:"wert B"
  }
}

Anwendung des State-Objektes:

Property Changes und das Observer Pattern

Am Beispiel ColorSet und Quadrate:

SceneGraph und Timer gesteuerte Animationen

Wie wird der SceneGraph abgearbeitet, und die vom Timer gesteuerten Animationen?

Die cc-utils Module

Die cc-utils Module sind Software-Bausteine die mich beim erstellen eines Creative Code Artworks unterstützen.

Animation

Das Modul stellt einen AnimationTimer, eine Animation Timeline sowie Animationen bereit.

AnimationTimer

Eine Klasse, um langsame Animationen durchzuführen.

AnimationTimeline

Eine Zeitleiste die zu gegebenen Zeitpunkten Animationen startet und stoppt.

Animations

Verschiedene einfache Animationen die auf Formen angewendet werden können.

Breathe

Rotate

Shake

Move

Artwork

Die Basisklasse und Grundlage aller Artworks. Von Artwork wird abgeleitet.

Das Modul unterstützt:

  • Tweakpane: ja
  • ParameterSet: ja
  • Observable: nein

Background

Stellt einen eingefärbten Hintergrund zur Verfügung. Der Hintergrund ist in allen meinen Artworks vorhanden.

Das Modul unterstützt:

  • Tweakpane: ja
  • ParameterSet: ja
  • Observable: nein

BackgroundShape

Erweiterung des Hintergrundes um ein Shape. Es stellt also einen eingefärbten Hintergrund zur Verfügung, und eine zentrierte Form.

Das Modul unterstützt:

  • Tweakpane: ja
  • ParameterSet: ja
  • Observable: nein

Brush

Ein Pinsel zum malen. Macht, was ein Pinsel halt so macht.

Das Modul unterstützt:

  • Tweakpane: ja
  • ParameterSet: ja
  • Observable: nein

Characters

  • Ein Tool zur Organisation einiger Zeichen.

Das Modul unterstützt:

  • Tweakpane: noch nicht
  • ParameterSet: nein
  • Observable: nein

Coordinate

Speichert eine Koordinate.

  • Das ist ein 1d-Index im SceneGraph.
  • Das ist ein 2d Zeilen- und Spalten-Index im SceneGraph / Grid.
  • Das ist ein 3d Zeilen- und Spalten-Index und Tiefen-Index im SceneGraph.
  • Das ist noch nicht sauber durchdacht.

Das Modul unterstützt:

  • Tweakpane: noch nicht
  • ParameterSet:
  • Observable:

ColorSet

Ein Tool zur Organisation von Farben in Sets und Sammlungen. Stark inspiriert von …

https://github.com/kgolid/chromotome https://kgolid.github.io/chromotome-site/

Das Modul unterstützt:

  • Tweakpane: ja
  • ParameterSet: ja
  • Observable: ja

Format

Ein beschnittenes Format, zentriert innerhalb einer quadratischen Leinwand. Unterstützt Hoch- und Querformat Definierte AspectRatio-Werte von 1.0 bis 3.555555555 Ich teile sie durch 1/n, damit ich später multiplizieren kann, anstatt sie zu teilen, um sie besser nutzen zu können. Verfügt über Methoden zur Neuberechnung von Position und Größe von Shapes.

Unterstützte Formate sind:

  • “1:1 — Square”: 1.0,
  • “4:3 — Monitor”: 1.333333333 -> 0.75
  • “3:2 — Phone”: 1.5 -> 0.66666666666
  • “16:10 — Widesceeen WXGA”: 1.6 -> 0.625
  • “5:3 — 16mm Film”: 1.666666666 -> 0.6
  • “16:9 — Widescreen TV”: 1.777777777 -> 0.5625
  • “2:1 — Dominoes”: 2.0 -> 0.5
  • “64:27 — Ultra Widescreen”: 2.370370370 -> 0.421875
  • “32:9 — Super Ultra Widescreen”: 3.555555555 -> 0.28125

Es sind auch andere Formate möglich.

Das Modul unterstützt:

  • Tweakpane: ja
  • ParameterSet: ja
  • Observable: ja

Grid

Das sind kleine Leinwände, die in einem Raster angeordnet sind. Alle Formen können auf diesem Raster gezeichnet werden. Alle grundlegenden Operationen wie Skalieren und Drehen können durchgeführt werden. Wir haben hier drei Klassen:

  • Manager — Verwaltet das Grid.

  • Cell — Stellt die Zellen im Grid dar.

  • GridPainter — Zeichnet etwas auf das Grid.

  • Das Modul unterstützt:

  • Tweakpane: ja

  • ParameterSet: ja

  • Observable: ja

  • JsonManagerTo top

  • Object Serializion — Speichern und laden aller Parameter in und aus Json.

Das sollte helfen, ein Artwork aus den Parametern exakt zu rekonstruieren.

Parameter

Erledigt den ganzen Parameter-Kram (u.a. für die Tweakpane) wie Import und Export, verpacken in Archive.

Pattern

Eine Sammlung von Code Design Patterns. Ich verwende momentan nur eins:

Observer Pattern

  • class Observer
  • class ObserverSubject
  • Observer and Observed_Subject can always be both: Observer and Observed_Subject.

SceneGraph

  • Der SceneGraph ist (mindesten) eine Art Gruppe, oder Speicher, oder Puffer.
  • Es ist ein eindimensionaler Speicher basierend auf int,
  • oder ein zweidimensionaler Speicher basierend auf Coordinate.col und Coordinate.row
  • Er enthält alle Objekte in der Szene zur Persistenz während der Laufzeit.
  • SceneGraph zeichnet alles, was zeichenbar ist — was bedeutet, dass es eine Methode hat: draw(context, parameter)

Shape

Eine Klasse zum Zeichnen all der netten kleinen Grundformen auf der Leinwand. Das ist eine gut organisierte Sammlung von Formen. Die folgenden Parameter werden in allen (den meisten) Fällen verwendet:

  • context — Der Kontext in den gezeichnet wird.
  • position — Ein Vektor mit den x- und y‑Koordinaten im Canvas.
  • size — Die Größe der Form als mit und Höhe, oder Radius.
  • brush — Ein Pinsel mit zusätzlichen Optionen.

Das Modul unterstützt:

  • Tweakpane:
  • ParameterSet:
  • Observable:

Shapes

BezierCurveOne

BezierCurveTwo

Character

Circle

Elipse

Image

Line

Polygon

Rect

Rhombus

Star

Trapez

TriangleOne

TriangleTwo

Size

Speichert die Größe von etwas auf dem Canvas. Kann eine Breite und Höhe oder einen Radius haben.

Das Modul unterstützt:

  • Tweakpane: nein
  • ParameterSet: nein
  • Observable: nein

Vector

Ein Vektor ist ein Punkt in unserer 2D-Leinwand. Er speichert die Position von etwas, das eine Größe hat — oder nicht, wenn es nur ein Pixel ist. Wir können all möglichen Berechnungen mit Vektoren durchführen.

Das Modul unterstützt:

  • Tweakpane: nein
  • ParameterSet: nein
  • Observable: nein