Develop – Creative Coding IDE

Das Develop-Modul ist deine kreative Werkbank. Hier schreibst du Code, siehst Live-Previews und kontrollierst Parameter in Echtzeit.

Übersicht

Feature Beschreibung
Monaco Editor VS Code Editor im Browser
Grid View Multi-Artwork Preview
Parameter Panel Tweakpane Integration
Sockets. Echtzeit-Kommunikation

Editor

Der integrierte Monaco Editor bietet:

  • Syntax Highlighting für TypeScript/JavaScript
  • IntelliSense mit cc-toolbox Types
  • Fehler-Markierungen
  • Multi-Cursor Editing

Tastenkürzel

Kürzel Aktion
Cmd+S Speichern & Hot Reload
Cmd+P Quick Open
Cmd+Shift+F Suchen & Ersetzen
Cmd+/ Kommentar Toggle

Grid View

Die Grid View zeigt mehrere Artworks gleichzeitig:

┌─────────┬─────────┬─────────┐
│ Artwork │ Artwork │ Artwork │
│   1     │   2     │   3     │
├─────────┼─────────┼─────────┤
│ Artwork │ Artwork │ Artwork │
│   4     │   5     │   6     │
└─────────┴─────────┴─────────┘

Konfiguration

{
  "grid": {
    "columns": 3,
    "rows": 2,
    "gap": 8
  }
}

Grid starten

  1. Wähle Artworks im Catalog
  2. Klicke Grid View oder F5
  3. Artworks werden in separaten Webviews geladen

Sockets Kommunikation

Artworks kommunizieren über Sockets mit dem Studio:

┌──────────┐     Sockets.      ┌──────────┐
│  Studio  │◄─────────────────►│ Artwork  │
│ (Port    │                   │ (Port    │
│  3090)   │                   │  3001+)  │
└──────────┘                   └──────────┘

Room-Struktur

Room Zweck
studio Studio UI
artwork:{id} Spezifisches Artwork
logs Zentrales Logging

Messages

// Parameter-Dump anfordern
socket.emit('request-parameter-dump', { 
  targetRoom: 'artwork:item-001' 
});

// Parameter empfangen
socket.on('parameter-dump', (data) => {
  console.log(data.payload);
});

Parameter Panel

Das Tweakpane-Panel zeigt alle Artwork-Parameter:

  • Slider für numerische Werte
  • Color Picker für Farben
  • Folders für Gruppierung
  • Buttons für Actions

Sync-Modus

Modus Verhalten
Live Änderungen sofort übertragen
Manual Änderungen erst bei Klick senden

Hot Reload

Bei Code-Änderungen:

  1. Studio erkennt Dateiänderung
  2. Artwork wird neu gebaut (Webpack)
  3. Webview wird refreshed
  4. Parameter bleiben erhalten (wenn möglich)

Debugging

DevTools öffnen

  • Cmd+Option+I – Webview DevTools
  • Cmd+Shift+I – Main Window DevTools

Log-Ausgaben

Alle console.log aus Artworks werden im Studio Log-Panel angezeigt:

// Im Artwork
console.log('Frame:', frameCount);

// Erscheint im Studio Log Panel
[artwork:item-001] Frame: 42