Creative-Code Library | Anleitung

Vorbemerkung#

Hier entsteht die technische Dokumentation zu meiner Creative-Code Bibliothek. Das ist also eine Baustelle.

• Projektseite
• Portfolio
• Recherche | Artikel
• Den Code gibt es demnächst in meinem Gitlab  .

Ein Artwork besteht aus einer Scene, die wiederum aus verschieden Shapes besteht, die gezeichnet werden.

Die Javascript Bibliothek cc-toolbox 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