# Gallery System

The gallery system presents artworks, examples, and exhibitions on the website.

## Overview

| Area | Route | Description |
|------|-------|-------------|
| **Artworks** | `/artworks` | Finished artworks |
| **Examples** | `/examples` | Code examples for learning |
| **Exhibitions** | `/exhibitions` | Curated exhibitions |

## 3-Tier Concept

| Tier | Tweakpane | Usage |
|------|-----------|-------|
| **Artwork** | ✅ Visible | Interactive presentation |
| **Example** | ✅ Visible | Learning & experimenting |
| **Exhibition** | ❌ Hidden | Curated presentation |

## Artworks

### Gallery Definition

```
content/galleries/
└── artworks.json
```

```json
{
  "title": "Artworks",
  "description": "Generative artworks",
  "items": [
    {
      "slug": "entities",
      "name": "Entities",
      "description": "Agent-based particle system",
      "path": "/item-cc-entities",
      "sketch": "sketch-entities-001",
      "thumbnail": "/assets/thumbs/entities.jpg",
      "tags": ["particles", "agents", "interactive"]
    }
  ]
}
```

### Detail Page

```
/artworks/entities
```

Features:
- Artwork in iframe
- Tweakpane visible
- Overlay controls (Fullscreen, Reload, Live View)
- Navigation (Previous/Next)
- Keyboard shortcuts (←/→, F, R, L)

## Examples

### Gallery Definition

```json
{
  "title": "Examples",
  "description": "Learn cc-toolbox through examples",
  "items": [
    {
      "slug": "basic-shape",
      "name": "Basic Shape",
      "description": "Draw simple shapes",
      "difficulty": "beginner",
      "path": "/item-cc-shape",
      "sketch": "sketch-basic",
      "topics": ["shapes", "colors", "basics"]
    }
  ]
}
```

### Difficulty Levels

| Level | Badge | Color |
|-------|-------|-------|
| `beginner` | Beginner | 🟢 Green |
| `intermediate` | Intermediate | 🟠 Orange |
| `advanced` | Advanced | 🔴 Red |

## Exhibitions

### Playlist Format

```
content/galleries/
└── exhibitions/
    └── mosaik-2027/
        ├── playlist.json
        └── README.md
```

```json
{
  "name": "Mosaik 2027",
  "description": "Group exhibition",
  "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:
- Automatic playback
- Countdown timer
- No Tweakpane (`?mode=embedded`)
- Overlay controls
- Fullscreen mode

### Controls

| Key | Action |
|-----|--------|
| `←` | Previous artwork |
| `→` | Next artwork |
| `F` | Fullscreen toggle |
| `R` | Reload artwork |
| `L` | Open live view |
| `Space` | Play/Pause |

## Lifestream

Live snapshots from running exhibitions:

```
/lifestream              → All exhibitions
/lifestream/mosaik-2027  → Specific exhibition
```

### Snapshot Interval

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

## URL Parameters

| Parameter | Value | Effect |
|-----------|-------|--------|
| `mode` | `embedded` | Tweakpane hidden |
| `autoplay` | `true` | Starts automatically |
| `loop` | `true` | Endless loop |

## Thumbnails

Thumbnails should be:
- Format: JPEG or WebP
- Size: 400×300px (4:3)
- Quality: 80%

Storage location: `content/assets/thumbs/`