cc-toolbox Dokumentation
Meine ganz persönliche Creative-Coding Bibliothek für generative Kunst, Animationen und Pen-Plotter, in Arbeit seit ca. 2023. Gemacht mit:
- Typescript 5.4
- Tweakpane
- npm
- Webpack 5
- Electron, React
- IDE VS-Code
Inhalt
Was gibt es hier zu sehen:
| Nr | Kapitel | Beschreibung |
|---|---|---|
| 001 | Überblick | Architektur, Konzepte, Module |
| 002 | Core System | Artwork, SceneGraph, Parameter, IO |
| 003 | Rendering | Canvas2D, WebGL, SVG Renderer |
| 004 | Shapes | Shape Registry, Basic & Soft Shapes |
| 005 | Animation | Clock, Composer, Easing |
| 006 | Motion | Bewegungsmuster, Boundary Behaviors |
| 007 | Physics | Verlet, Behaviors, Constraints, Springs |
| 008 | Agents | Brush, Particles, Grid, Entities |
| 009 | Colors | ColorSet, ColorUtils, Dithering |
| 010 | StudioLink | Sockets, Parameter-Sync, Echtzeit |
| 011 | Export | SVG, Video, Snapshots, Exhibition |
| 012 | Tools | CLI Scripts, Projekt-Erstellung |
| 013 | Fractals | Fraktale, L-Systems, IFS |
| 014 | ParameterSources | Multi-Source Parameter (MIDI, OSC, JSON) |
Schnellstart
import { Artwork, SketchRunner, Background, Brush, ColorSet } from '@carstennichte/cc-toolbox';
const mySketch: Sketch = {
configure: (props) => { /* Setup */ },
draw: (props) => { /* Render Loop */ }
};
SketchRunner.run(mySketch);Links
- Repository: github.com/cnichte/creative-coding
- Autor: Carsten Nichte
- Lizenz: MIT
Was ist Creative Coding?
Kurz gesagt: Creative Coding ist Programmieren als künstlerisches Medium. Statt Software zu schreiben, die ein Problem löst, schreibt man Code, der etwas Visuelles erzeugt – Animationen, Muster, interaktive Grafiken. Die Regeln definiert der Code, aber das Ergebnis ist oft überraschend, organisch, lebendig. Gängige Genres sind_
- Generative Art (Emergence, Chaos)
- Algorithmic/Systematic Drawing
- Plotter/Pen Art
- Data Visualization
- Particle Systems
- Physics Simulation
- Fractal/L-System Art
- Shader/Fragment Art
Warum diese Bibliothek?
Ich bin ein fauler Mensch. Ich mag es nicht besonders dinge immer wieder machen zu müssen. Ich liebe wieder verwendbare Komponenten. Ich versuche das ganze Chaos das mich umgibt, und das in mir ist in eine gewisse Ordnung zu bringen. Folgende Probleme hab ich immer wieder:
- Wie will ich etwas ausgeben: Canvas2D? WebGL? SVG für den Plotter?
- Wie animiere ich sanft?: Timing, Easing, Loops?
- Wie steuere ich zeitliche Äbläufe: Kann ich ein Drehbuch haben?
- Wie speichere ich meine Einstellungen? Nach stundenlangem Tweaken?
- Wie organisiere und strukturiere ich meine Artworks
- Wie zeige ich die Ergebnisse in einer Ausstellung? Ohne IT-Support vor Ort?
- Wie bekomme ich Echtzeitdaten ins System
- Wie kommunizieren meine Artworks untereinander?
Die cc-toolbox löst diese Probleme, und noch ne Menge mehr mit einem hoffentlich durchdachten, modularen Konzept. Du schreibst deinen Sketch-Code einmal, und er funktioniert mit verschiedenen Renderern, hat Tweakpane-UI, kann Snapshots eines Artworks zu Playlisten zusammenstellen. speichern und läuft im Kiosk-Modus, und so weiter und so fort.
Ich kann Ich kann Artworks zu Ausstellungen zusammenstellen.
System-Hierarchie
Die cc-toolbox organisiert kreative Arbeiten in einer klaren Hierarchie:
┌──────────────────────────────────────────────────────┐
│ EXHIBITION (Präsentation) │
│ ═══════════════════════════════════════════════════ │
│ │
│ Artworks-Playlist: [ A1 ] → [ A2 ] → [ A3 ] → ... │
│ ↓ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ ARTWORK (A1) │ │
│ │ ─────────────────────────────────────────────── │ │
│ │ │ │
│ │ Sketches: ┌──────────┐ ┌──────────┐ │ │
│ │ │ Sketch 1 │ │ Sketch 2 │ ... │ │
│ │ └────┬─────┘ └────┬─────┘ │ │
│ │ │ │ │ │
│ │ ▼ ▼ │ │
│ │ Snapshots: ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐ │ │
│ │ │1│ │2│ │3│ │1│ │2│ ... │ │
│ │ └─┘ └─┘ └─┘ └─┘ └─┘ │ │
│ │ │ │ │
│ │ Sequenz- │ │ │
│ │ Playlist: ▼ │ │
│ │ [5]→[1]→[3] → ... │ │
│ │ (spielt Snapshots in beliebiger Reihenfolge) │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────┘
Hierarchie: Exhibition → Artwork → Sketch → Snapshot
│ │ │ │
Playlist Settings Code Zustand
von Works + Meta + Logic + ParameterArchitektur
┌─────────────────────────────────────────────────────────────────────┐
│ Artwork Layer │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Sketch Code │──>│ SceneGraph │──>│ Agents │ │
│ └──────────────┘ └──────────────┘ └──────┬───────┘ │
└─────────────────────────────────────────────────┼───────────────────┘
│
┌───────────────────────────────────────────┼───────────────────┐
│ Core │ │
│ ┌─────────────┐ ┌────────────────┐ │ │
│ │ Artwork │──>│ ParameterObject│<───>│ IOManager │
│ └─────────────┘ └────────────────┘ │ │ │
│ │ │ │
│ │ v │
│ │ TweakpaneManager │
└───────────────────────────────────────────┼───────────────────┘
│
┌─────────────────────────────────────────────────┼───────────────────┐
│ Rendering │ │
│ ┌─────────────────────┘ │
│ v │
│ ┌──────────────┐ │
│ │ RenderContext│ │
│ └──────┬───────┘ │
│ ┌───────────────┼───────────────┐ │
│ v v v │
│ ┌──────────────┐ ┌─────────────┐ ┌────────────┐ │
│ │Canvas2DRender│ │WebGLRenderer│ │ SVGRenderer│ │
│ └──────────────┘ └─────────────┘ └────────────┘ │
└─────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ Systems │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │Animation │ │ Motion │ │ Physics │ │ Shapes │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
└─────────────────────────────────────────────────────────────────────┘Module-Übersicht
| Modul | Pfad | Funktion |
|---|---|---|
| core/ | src/core/ |
Artwork, SceneGraph, Parameter, IO |
| rendering/ | src/rendering/ |
Unified Renderer System |
| shapes/ | src/shapes/ |
Shape Registry mit Physics-Support |
| animation/ | src/animation/ |
Zeitbasierte Animationen (0-1) |
| motion/ | src/motion/ |
Kontinuierliche Bewegung (deltaTime) |
| physics/ | src/physics/ |
Verlet-basierte Physik-Simulation |
| agents/ | src/agents/ |
Wiederverwendbare Zeichen-Komponenten |
| colors/ | src/colors/ |
Farbpaletten und -utilities |
| grid/ | src/grid/ |
Dual-View Grid System |
| vector-drawing/ | src/vector-drawing/ |
Multi-Layer für Pen-Plotter |
| node-system/ | src/node-system/ |
Visual Programming (experimental) |
| utils/ | src/utils/ |
Noise, Random, Math, SVGParser |
Design-Prinzipien
- Renderer-agnostisch - Code funktioniert mit Canvas2D, WebGL oder SVG
- Parameter-gesteuert - Alle Werte über
ParameterObjectsteuerbar - Tweakpane-ready - UI-Integration für Live-Manipulation
- Composable Agents - Agenten im SceneGraph kombinierbar
- Modular - Jedes System unabhängig nutzbar
Datenfluss
┌─────────────────────────────────────────────────────────────────┐
│ SKETCH CODE │
│ └── Definiert: configure(), prepare(), draw() │
└───────────────────────────┬─────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ ARTWORK │
│ ├── Initialisiert Canvas, Tweakpane, Timer │
│ ├── Verwaltet SceneGraph │
│ └── Orchestriert Render-Loop │
└───────────────────────────┬─────────────────────────────────────┘
│
┌───────────────────┼───────────────────┐
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ IOManager │ │ Parameter │ │ SceneGraph │
│ │ │ Object │ │ │
│ Events & │ │ │ │ Agents & │
│ Channels │◄──┤ State Store │──►│ Drawables │
└───────────────┘ └───────────────┘ └───────┬───────┘
▲ │
│ onChange ▼
┌───────┴───────┐ ┌───────────────┐
│ Tweakpane │ │ RenderContext │
│ Manager │ │ │
│ │ │ → Canvas2D │
│ UI Controls │ │ → WebGL │
└───────────────┘ │ → SVG │
└───────────────┘Verzeichnisstruktur
apps/cc-toolbox/
├── src/
│ ├── index.ts # Haupt-Exports
│ ├── core/ # Kern-Komponenten
│ ├── agents/ # Zeichen-Agenten
│ ├── animation/ # Animation System
│ ├── motion/ # Motion Patterns
│ ├── physics/ # Verlet Physics
│ ├── shapes/ # Shape Registry
│ ├── colors/ # ColorSet System
│ ├── rendering/ # Renderer
│ ├── grid/ # Grid System
│ ├── vector-drawing/ # Plotter-Export
│ ├── node-system/ # Visual Programming
│ └── utils/ # Utilities
├── docs/ # Interne Dokumentation
├── shell-scripte/ # CLI-Tools
└── dist/ # Build-OutputProjektstruktur
project-name/
├── src/
│ ├── index.ts # Artwork Entry
│ └── sketches/
│ └── sketch-01.ts # Erster Sketch
├── css/
│ └── styles.css # Dev-Layout
├── webpack.config.js
├── tsconfig.json
├── package.json
└── exhibition.ts # Kiosk-Mode Entry