012 - CLI Tools

Shell-Scripts für Projekt-Erstellung und Utilities.

Übersicht

Script Pfad Funktion
create-cc-project.mjs shell-scripte/ Neues Projekt erstellen
exhibition-package-builder.mjs shell-scripte/ Exhibition Package bauen
validate-sketch-pattern.mjs shell-scripte/ Sketches validieren

create-cc-project.mjs

Erstellt ein vollständiges Creative Coding Projekt.

Generierte Struktur:

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

Verwendung:

node shell-scripte/create-cc-project.mjs <project-name> [options]

Optionen:

Option Default Beschreibung
--width 1200 Canvas-Breite
--height 1200 Canvas-Höhe
--title project-name Projekt-Titel
--author "Carsten Nichte" Autor
--output workspaces/default/catalog/items/ Ausgabe-Verzeichnis

Beispiele:

# Standard
node shell-scripte/create-cc-project.mjs my-artwork

# Mit Optionen
node shell-scripte/create-cc-project.mjs generative-001 \
  --width 1000 \
  --height 1000 \
  --title "Generative Art"

exhibition-package-builder.mjs

Erstellt Exhibition Packages mit Kiosk-Oberfläche.

Verwendung:

# Interaktiver Modus
node shell-scripte/exhibition-package-builder.mjs

# Mit Config-Datei
node shell-scripte/exhibition-package-builder.mjs --config config.json

# Schnellmodus
node shell-scripte/exhibition-package-builder.mjs --quick <name> <ids>

Interaktiver Modus:

  1. Zeigt verfügbare Artworks
  2. Auswahl per Nummer (komma-separiert)
  3. Package-Name eingeben
  4. Baut automatisch

Config-Datei:

{
  "name": "meine-ausstellung",
  "artworks": ["item-001", "item-002", "item-003"],
  "options": {
    "cycleDuration": 60000,
    "showControls": false
  }
}

Output:

exhibition-packages/
└── meine-ausstellung/
    ├── index.html
    ├── artworks/
    ├── assets/
    └── config.json

validate-sketch-pattern.mjs

Prüft Sketches auf korrektes Parameter-Pattern.

Problem: ensureParameterSet() muss VOR dem Tweakpane-Check aufgerufen werden, sonst crasht der Exhibition Mode.

Falsch:

if (tweakpane_items?.manager) {
  Background.ensureParameterSet(parameter);  // ❌ Crash ohne Tweakpane!
}

Richtig:

Background.ensureParameterSet(parameter);    // ✅ Immer ausführen

if (tweakpane_items?.manager) {
  // Nur UI-Setup
}

Verwendung:

# Nur prüfen
node shell-scripte/validate-sketch-pattern.mjs

# Auto-Fix (TODO)
node shell-scripte/validate-sketch-pattern.mjs --fix

Output:

Scanning sketches...
✓ item-001/src/sketches/sketch-01.ts
✗ item-002/src/sketches/sketch-01.ts
  - BackgroundShape.ensureBackgroundShapeParameterSet inside Tweakpane block
  - ColorSet.ensureParameterSet inside Tweakpane block

Found 2 issues in 1 file.

Workspace-Scripts (Monorepo Root)

Script Pfad Funktion
create-develop-configs.mjs shell-scripts/ Develop-Configs erstellen
migrate-sketches-config.mjs shell-scripts/ Sketch-Configs migrieren
transport.mjs shell-scripts/ Dateien transportieren

create-develop-configs.mjs

Erstellt Entwicklungs-Konfigurationen für Items.

migrate-sketches-config.mjs

Migriert alte Sketch-Konfigurationen zum neuen Format.

transport.mjs

Transportiert Dateien nach transport.conf.json.

Config:

{
  "operations": [
    {
      "source": "workspaces/default/catalog/items/item-001",
      "destination": "/external/path/",
      "include": ["**/*.ts", "**/*.json"],
      "exclude": ["node_modules"]
    }
  ]
}

npm Scripts (cc-toolbox)

Script Beschreibung
npm run build:dev Development Build
npm run build:prod Production Build
npm run watch Watch Mode

npm Scripts (Monorepo Root)

Script Beschreibung
npm run build:toolbox cc-toolbox bauen
npm run studio:dev Studio starten (Dev)
npm run rebuild:all:start Clean Build + Start
npm run clean:all Alles löschen

Tipps

  1. Nach Änderungen: npm run build:toolbox ausführen
  2. Bei Problemen: npm run clean:all && npm install
  3. Neue Projekte: Immer create-cc-project.mjs nutzen
  4. Vor Exhibition: validate-sketch-pattern.mjs ausführen