---

title: Crumbblocks Painter Missions - Jeder Kruemel zaehlt
slug: painter\_missions
version: 0.1
lang: de
tags: \[Crumbblocks, Painter, Bezier, Kids, Senioren, Atem-Pinsel, JSON, PNG, PWA, KruemelLog]
summary: Drei Mini-Missionen fuer Kids und Senioren mit Crumbblocks (Painter, Lines, Bezier, Stream). ASCII-clean, JSON-Format fuer Replay, Atem-Pinsel-Vorgabe und KruemelLog-Schema.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

# Crumbblocks Painter Missions - Jeder Kruemel zaehlt

Leitmotiv: Ein kleiner Mut, der gemeinsam waechst.
Ziel: Malen und Erinnern zusammenbringen. Alles offline-faehig, ruhig, klar, ohne Angst.

## 0) Quickstart (30 Sekunden)

* Oeffne: painter.html, painter\_lines.html, bezier.html oder bezier\_stream.html.
* Nutze grosse Buttons im Senior-Modus (max 3 Tools).
* Speichere PNG und JSON (Replay).
* Logge den Moment in den KruemelLog.

## 1) Drei Mini-Missionen (Kinder x Senioren)

### Mission A: Omis Weg zum See (Lines)

* Zeit: 10 min.
* Senior zeichnet aus der Erinnerung den Weg zum See als Linien.
* Kinder fahren den Weg mit dem Cursor nach (kleines Icon).
* Abschluss: PNG sichern + 1 Satz Zitat speichern.

**Akzeptanz**

* 1 fertige Linienkarte, 1 Zitat, 1 Eintrag im KruemelLog.

### Mission B: Walzer-Kurve (Bezier)

* Zeit: 10 min.
* Gemeinsam eine geschwungene Bezier-Linie im 3/4-Gefuehl anlegen.
* FunkFox spielt einen leisen Groove (optional).
* Abschluss: PNG sichern + JSON Replay exportieren.

**Akzeptanz**

* 1 Bezier-Kurve, JSON vorhanden, 1 Eintrag im KruemelLog.

### Mission C: Atem-Bild (Stream)

* Zeit: 2 min Atem + 3 min Abschluss.
* Atem-Pinsel: Strichbreite pulst nach 4-4-6-5 Atemmuster (siehe Preset unten).
* Senior atmet mit, Kind fuehrt den Stift.
* Abschluss: PNG + Zitat, JSON exportieren.

**Akzeptanz**

* PNG, JSON, Zitat gespeichert, 1 Eintrag im KruemelLog.

## 2) Senior- und Kid-Modus

* Senior-Modus: 3 Tools sichtbar (Pen, Radierer, Farbe), grosse UI, hoher Kontrast.
* Kid-Modus: zusaetzlich Bezier, Undo/Redo, Farbeimer, Dicke-Regler.
* Schalter: url-param `?mode=senior` oder `?mode=kid` (optional), sonst Button in der UI.

## 3) Speichern und Teilen

* **PNG sichern:** Canvas nach PNG exportieren; Dateiname mit Zeitstempel `crumb_paint_YYYY-MM-DD_HH-MM-SS.png`.
* **JSON Replay:** Alle Striche als JSON speichern; Import ermoeglicht exaktes Nachzeichnen.

## 4) Stroke-JSON (Replay-Format)

Minimalformat fuer einen Stroke:

```json
{
  "tool": "pen",
  "color": "#000000",
  "size": 3,
  "points": [
    {"x": 120.5, "y": 80.0, "t": 1724438400000},
    {"x": 121.3, "y": 81.2, "t": 1724438400050}
  ],
  "meta": {
    "mission_id": "mission-c-atem-bild",
    "room_id": "ozm-insel-2"
  }
}
```

Replay-Datei:

```json
{
  "strokes": [
    {"tool":"pen","color":"#000","size":3,"points":[{"x":1,"y":1,"t":1},{"x":2,"y":2,"t":20}]}
  ],
  "canvas": {"w": 1024, "h": 768, "dpr": 2}
}
```

## 5) KruemelLog-Schema (Momente statt Score)

```json
{
  "ts": "2025-08-23T16:30:00+02:00",
  "emoji": ":sparkles:",
  "msg": "Walzer-Kurve fertig, Omi nennt ihr Lied.",
  "quelle": "Crumbblocks",
  "ref_png": "crumb_paint_2025-08-23_16-29-50.png",
  "ref_json": "crumb_paint_strokes_2025-08-23_16-29-50.json",
  "mission_id": "mission-b-walzer-kurve",
  "room_id": "ozm-insel-2"
}
```

## 6) Atem-Pinsel Preset (4-4-6-5)

Ziel: Strichbreite moduliert sich ueber Zeit in einem Atemzyklus.
Muster: ein 4 Takte ein, 4 Takte halten, 6 Takte aus, 5 Takte Pause.
Skala: size(t) = base + amp \* f(phase).

Pseudo-Formel:

```
cycle = 4 + 4 + 6 + 5 = 19 Einheiten
phase = (time_ms % (19 * unit_ms)) / unit_ms  # 0..19
if phase < 4:          # Einatmen
    w = base + amp * (phase/4)
elif phase < 8:        # Halten
    w = base + amp
elif phase < 14:       # Ausatmen
    w = base + amp * (1 - (phase-8)/6)
else:                  # Pause
    w = base
```

Parameter:

* `unit_ms`: 500 (Beispiel).
* `base`: 2..4 px.
* `amp`: 2..6 px.
* Begrenzung: `w_min = 1`, `w_max = 20`.

Hinweis: LED kann synchron sanft pulsen (keine Stroboskop-Effekte).

## 7) A11y und Kiosk

* Pointer Events fuer Touch und Stylus, HiDPI-Scaling mit DPR.
* Kontraste hoch, Fokus-Ringe an, Undo per Taste Z.
* Kiosk: Vollbild, grosse Buttons, klare Labels.
* Senior-Schutz: keine ueberfrachteten Menues.

## 8) Offline und PWA

* Manifest + Service Worker erlauben Offline-Nutzung.
* Speicherort: Download-Ordner oder Nextcloud-Pfad `/media/crumbblocks/`.
* Import: JSON kann spaeter geladen und als Replay gezeichnet werden.

## 9) FAQ (Kurz, Retrieval-Form)

Q: Was ist der Atem-Pinsel?
A: Ein Pinsel, dessen Strichbreite einem Atemmuster folgt (4-4-6-5). Das beruhigt und macht Tempo sichtbar.

Q: Wie sichere ich meine Zeichnung?
A: PNG-Button fuer Bilder, JSON-Button fuer Strichdaten (spae­ter Replay moeglich).

Q: Was passiert bei Tablet-Lags?
A: Reduziere live-Filter, senke DPR bei extrem alten Geraeten, nutze Senior-Modus (weniger Tools).

Q: Wie kommen Senior\:innen und Kids zusammen?
A: Waehl eine Mission (A, B, C). Senior gibt den Impuls (Weg, Walzer, Atem). Kids bauen das Echo (PNG, JSON, Zitat).

Q: Muss ich online sein?
A: Nein. Alles funktioniert offline. Optional kann in eine lokale Nextcloud gespeichert werden.

## 10) Checkliste fuer OZM-Demo

* [ ] Tablet im Kiosk, Lautstaerke leise, Senior-Modus aktiv.
* [ ] PNG- und JSON-Buttons sichtbar.
* [ ] Atem-Pinsel getestet (Mission C).
* [ ] KruemelLog-Testeintrag erstellt.
* [ ] Ein Zitat vorbereitet (z. B. Sommer am See).

## 11) Vector-Hinweis

* ASCII only, keine typografischen Sonderzeichen.
* YAML-Front-Matter korrekt begrenzen (`---` oben und unten).
* Kurze Abschnitte, erkennbare Ueberschriften, FAQ-Block fuer bessere Treffer.

# Ende