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
{
  "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

{
  "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
{
  "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

{
  "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/