Krümel Branko
83df9de035
12 Monate Crumbforest-Wachstum, sortiert nach Waldlogik. Struktur: - 454 Dokumente in 7 organischen Ebenen - Lichtung → Waldrand → Waldmitte → Wurzeln → Krone → Unterholz → Samen - INDEX.md für jede Ebene (eigene Stimme) - WALDKARTE.md (Master-Navigation) - crumbcodex.md (Das Versprechen zwischen Krümel & Bits) - lichtung/willkommen.md (Nullfeld-Einstieg für Kinder) Philosophie: - Waldlogik statt Ordnerlogik - Tiefe, Licht, Wurzeln - wie ein echter Wald - Schutz für Krümel, Tiefe für Gräber, Poesie für Atmende Repos verbunden: - OZM-Keks-Handbuch-v1 (Das Wissen) - Crumb-Core-v.1 (Das Herz) - 194.164.194.191 - crumbmissions (Das Spiel) Wuuuhuuuuu! 🦉✨
190 lines
5.7 KiB
Markdown
190 lines
5.7 KiB
Markdown
---
|
||
|
||
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 (spaeter 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
|