Gallery System

Das Gallery-System präsentiert Artworks, Examples und Exhibitions auf der Website.

Übersicht

Bereich Route Beschreibung
Artworks /artworks Fertige Kunstwerke
Examples /examples Code-Beispiele zum Lernen
Exhibitions /exhibitions Kuratierte Ausstellungen

3-Tier Konzept

Tier Tweakpane Verwendung
Artwork ✅ Sichtbar Interaktive Präsentation
Example ✅ Sichtbar Lernen & Experimentieren
Exhibition ❌ Versteckt Kuratierte Präsentation

Artworks

Gallery-Definition

content/galleries/
└── artworks.json
{
  "title": "Artworks",
  "description": "Generative Kunstwerke",
  "items": [
    {
      "slug": "entities",
      "name": "Entities",
      "description": "Agent-basiertes Partikelsystem",
      "path": "/item-cc-entities",
      "sketch": "sketch-entities-001",
      "thumbnail": "/assets/thumbs/entities.jpg",
      "tags": ["particles", "agents", "interactive"]
    }
  ]
}

Detail-Seite

/artworks/entities

Features:

  • Artwork im iframe
  • Tweakpane sichtbar
  • Overlay-Controls (Fullscreen, Reload, Live View)
  • Navigation (Previous/Next)
  • Tastenkürzel (←/→, F, R, L)

Examples

Gallery-Definition

{
  "title": "Examples",
  "description": "Lerne cc-toolbox anhand von Beispielen",
  "items": [
    {
      "slug": "basic-shape",
      "name": "Basic Shape",
      "description": "Zeichne einfache Formen",
      "difficulty": "beginner",
      "path": "/item-cc-shape",
      "sketch": "sketch-basic",
      "topics": ["shapes", "colors", "basics"]
    }
  ]
}

Schwierigkeitsgrade

Level Badge Farbe
beginner Einsteiger 🟢 Grün
intermediate Fortgeschritten 🟠 Orange
advanced Experte 🔴 Rot

Exhibitions

Playlist-Format

content/galleries/
└── exhibitions/
    └── mosaik-2027/
        ├── playlist.json
        └── README.md
{
  "name": "Mosaik 2027",
  "description": "Gruppenausstellung",
  "items": [
    {
      "id": "item-cc-entities",
      "sketch": "sketch-entities-001",
      "duration": 120
    },
    {
      "id": "item-cc-particles",
      "sketch": "sketch-particles-wind",
      "duration": 90
    }
  ],
  "loop": true
}

Exhibition Player

/exhibitions/mosaik-2027

Features:

  • Automatische Wiedergabe
  • Countdown-Timer
  • Kein Tweakpane (?mode=embedded)
  • Overlay-Controls
  • Vollbild-Modus

Steuerung

Taste Aktion
← Vorheriges Artwork
→ Nächstes Artwork
F Fullscreen Toggle
R Artwork neu laden
L Live View öffnen
Space Play/Pause

Lifestream

Live-Snapshots aus laufenden Ausstellungen:

/lifestream              → Alle Ausstellungen
/lifestream/mosaik-2027  → Spezifische Ausstellung

Snapshot-Interval

{
  "lifestream": {
    "enabled": true,
    "interval": 300
  }
}

URL-Parameter

Parameter Wert Effekt
mode embedded Tweakpane versteckt
autoplay true Startet automatisch
loop true Endlosschleife

Thumbnails

Thumbnails sollten:

  • Format: JPEG oder WebP
  • Größe: 400×300px (4:3)
  • Qualität: 80%

Speicherort: content/assets/thumbs/