cc-toolbox Documentation
My personal creative coding library for generative art, animations, and pen plotters, in development since around 2023. Built with:
- Typescript 5.4
- Tweakpane
- npm
- Webpack 5
- Electron, React
- IDE VS-Code
Contents
What's here to see:
| No | Chapter | Description |
|---|---|---|
| 001 | Overview | Architecture, Concepts, Modules |
| 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 | Movement Patterns, Boundary Behaviors |
| 007 | Physics | Verlet, Behaviors, Constraints, Springs |
| 008 | Agents | Brush, Particles, Grid, Entities |
| 009 | Colors | ColorSet, ColorUtils, Dithering |
| 010 | StudioLink | Sockets, Parameter-Sync, Realtime |
| 011 | Export | SVG, Video, Snapshots, Exhibition |
| 012 | Tools | CLI Scripts, Project Creation |
| 013 | Fractals | Fractals, L-Systems, IFS |
| 014 | ParameterSources | Multi-Source Parameter (MIDI, OSC, JSON) |
Quick Start
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
- Author: Carsten Nichte
- License: MIT
What is Creative Coding?
In short: Creative coding is programming as an artistic medium. Instead of writing software that solves a problem, you write code that creates something visual – animations, patterns, interactive graphics. The code defines the rules, but the result is often surprising, organic, alive. Common genres include:
- Generative Art (Emergence, Chaos)
- Algorithmic/Systematic Drawing
- Plotter/Pen Art
- Data Visualization
- Particle Systems
- Physics Simulation
- Fractal/L-System Art
- Shader/Fragment Art
Why This Library?
I'm a lazy person. I don't particularly enjoy doing things over and over again. I love reusable components. I try to bring some order to all the chaos around me and within me. I keep running into these problems:
- How do I want to output: Canvas2D? WebGL? SVG for the plotter?
- How do I animate smoothly?: Timing, easing, loops?
- How do I control temporal sequences: Can I have a script?
- How do I save my settings? After hours of tweaking?
- How do I organize and structure my artworks
- How do I show results in an exhibition? Without IT support on site?
- How do I get real-time data into the system
- How do my artworks communicate with each other?
The cc-toolbox solves these problems, and many more, with a hopefully well-thought-out, modular concept. You write your sketch code once, and it works with different renderers, has Tweakpane UI, can compile snapshots of an artwork into playlists, save them and run in kiosk mode, and so on and so forth.
I can assemble artworks into exhibitions.
System Hierarchy
The cc-toolbox organizes creative work in a clear hierarchy:
┌──────────────────────────────────────────────────────┐
│ EXHIBITION (Presentation) │
│ ═══════════════════════════════════════════════════ │
│ │
│ Artworks-Playlist: [ A1 ] → [ A2 ] → [ A3 ] → ... │
│ ↓ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ ARTWORK (A1) │ │
│ │ ─────────────────────────────────────────────── │ │
│ │ │ │
│ │ Sketches: ┌──────────┐ ┌──────────┐ │ │
│ │ │ Sketch 1 │ │ Sketch 2 │ ... │ │
│ │ └────┬─────┘ └────┬─────┘ │ │
│ │ │ │ │ │
│ │ ▼ ▼ │ │
│ │ Snapshots: ┌─┐ ┌─┐ ┌─┐ ┌─┐ ┌─┐ │ │
│ │ │1│ │2│ │3│ │1│ │2│ ... │ │
│ │ └─┘ └─┘ └─┘ └─┘ └─┘ │ │
│ │ │ │ │
│ │ Sequence │ │ │
│ │ Playlist: ▼ │ │
│ │ [5]→[1]→[3] → ... │ │
│ │ (plays snapshots in any order) │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────┘
Hierarchy: Exhibition → Artwork → Sketch → Snapshot
│ │ │ │
Playlist Settings Code State
of Works + Meta + Logic + ParametersArchitecture
┌─────────────────────────────────────────────────────────────────────┐
│ 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 Overview
| Module | Path | Function |
|---|---|---|
| core/ | src/core/ |
Artwork, SceneGraph, Parameter, IO |
| rendering/ | src/rendering/ |
Unified Renderer System |
| shapes/ | src/shapes/ |
Shape Registry with Physics Support |
| animation/ | src/animation/ |
Time-based Animations (0-1) |
| motion/ | src/motion/ |
Continuous Movement (deltaTime) |
| physics/ | src/physics/ |
Verlet-based Physics Simulation |
| agents/ | src/agents/ |
Reusable Drawing Components |
| colors/ | src/colors/ |
Color Palettes and Utilities |
| grid/ | src/grid/ |
Dual-View Grid System |
| vector-drawing/ | src/vector-drawing/ |
Multi-Layer for Pen Plotters |
| node-system/ | src/node-system/ |
Visual Programming (experimental) |
| utils/ | src/utils/ |
Noise, Random, Math, SVGParser |
Design Principles
- Renderer-agnostic - Code works with Canvas2D, WebGL, or SVG
- Parameter-driven - All values controllable via
ParameterObject - Tweakpane-ready - UI integration for live manipulation
- Composable Agents - Agents combinable in SceneGraph
- Modular - Each system usable independently
Data Flow
┌─────────────────────────────────────────────────────────────────┐
│ SKETCH CODE │
│ └── Defines: configure(), prepare(), draw() │
└───────────────────────────┬─────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────┐
│ ARTWORK │
│ ├── Initializes Canvas, Tweakpane, Timer │
│ ├── Initializes Canvas, Tweakpane, Timer │
│ ├── Manages SceneGraph │
│ └── Orchestrates Render-Loop │
└───────────────────────────┬─────────────────────────────────────┘
│
┌───────────────────┼───────────────────┐
▼ ▼ ▼
┌───────────────┐ ┌───────────────┐ ┌───────────────┐
│ IOManager │ │ Parameter │ │ SceneGraph │
│ │ │ Object │ │ │
│ Events & │ │ │ │ Agents & │
│ Channels │◄──┤ State Store │──►│ Drawables │
└───────────────┘ └───────────────┘ └───────┬───────┘
▲ │
│ onChange ▼
┌───────┴───────┐ ┌───────────────┐
│ Tweakpane │ │ RenderContext │
│ Manager │ │ │
│ │ │ → Canvas2D │
│ UI Controls │ │ → WebGL │
└───────────────┘ │ → SVG │
└───────────────┘Directory Structure
apps/cc-toolbox/
├── src/
│ ├── index.ts # Main Exports
│ ├── core/ # Core Components
│ ├── agents/ # Drawing Agents
│ ├── animation/ # Animation System
│ ├── motion/ # Motion Patterns
│ ├── physics/ # Verlet Physics
│ ├── shapes/ # Shape Registry
│ ├── colors/ # ColorSet System
│ ├── rendering/ # Renderers
│ ├── grid/ # Grid System
│ ├── vector-drawing/ # Plotter Export
│ ├── node-system/ # Visual Programming
│ └── utils/ # Utilities
├── docs/ # Internal Documentation
├── shell-scripte/ # CLI Tools
└── dist/ # Build OutputProject Structure
project-name/
├── src/
│ ├── index.ts # Artwork Entry
│ └── sketches/
│ └── sketch-01.ts # First Sketch
├── css/
│ └── styles.css # Dev Layout
├── webpack.config.js
├── tsconfig.json
├── package.json
└── exhibition.ts # Kiosk Mode Entry