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/entitiesFeatures:
- 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-2027Features:
- 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 AusstellungSnapshot-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/