Initial commit: Crumbforest Architecture Refinement v1 (Clean)
This commit is contained in:
135
docs/crumbforest/a11y_graffiti.md
Normal file
135
docs/crumbforest/a11y_graffiti.md
Normal file
@@ -0,0 +1,135 @@
|
||||
# A11y Graffiti – Schnippsi Stream Session (22.08.25)
|
||||
|
||||
*Tag: **#CRUMB** · Session: **sess\_b93be631e89ad** · App: **schnippsi‑painter***
|
||||
|
||||
---
|
||||
|
||||
## Kurzfassung
|
||||
|
||||
Wir haben einen barrierearmen **Graffiti‑Sprüh‑Flow** skizziert, der als **One‑Line** oder **Bezier‑Pfad** erfasst, in **JSON/SVG/PNG** exportiert und **live** via WebSocket an TouchDesigner / StreamDiffusion gestreamt werden kann. Ziel: *Jede*r kann ein Textabenteuer „zeichnen“, Geräte‑agnostisch (Pen/Touch/Mouse), mit messbaren Bewegungsdaten für Lern‑ und A11y‑Anwendungen.\*
|
||||
|
||||
---
|
||||
|
||||
## Leitideen
|
||||
|
||||
* **A11y‑First:** Eingabe per Maus, Touch, Pen; Tastatur‑Shortcuts; klare Kontraste.
|
||||
* **One‑Liner‑Logik:** Das kleine **a** (Spirale) im schützenden **y** – als Unterrichts‑/Story‑Anker (Eule → Baum).
|
||||
* **Messbarkeit:** Zeit‑, Druck‑, Winkel‑ und Griff‑Daten pro Punkt/Anker.
|
||||
* **Offen & leichtgewichtig:** Browserbasiert, JSON als Truth‑Source, SVG als Vektor‑Artefakt.
|
||||
|
||||
---
|
||||
|
||||
## Toolchain (aktuell)
|
||||
|
||||
* **Schnippsi Painter**
|
||||
|
||||
* Freihand & Bezier (Anker + symmetrische/asymmetrische Griffe)
|
||||
* Replay, Clear, Export (**JSON/SVG/PNG**)
|
||||
* WebSocket‑Streaming (Default `ws://localhost:9980`)
|
||||
* **Receiver**
|
||||
|
||||
* TouchDesigner (WebSocket DAT → JSON → CHOP/TOP)
|
||||
* Optional: Node‑Mockserver zum lokalen Testen
|
||||
|
||||
---
|
||||
|
||||
## Datenmodell (vereinbart)
|
||||
|
||||
**Canvas** + **Session** + Liste von **Strokes** (Freihand *oder* Bezier). Jeder Punkt trägt `t` (ms), `p` (Pressure 0..1), `tilt` und `type`.
|
||||
|
||||
```json
|
||||
{
|
||||
"canvas": { "w": 2390, "h": 1214, "dpr": 1 },
|
||||
"session": { "id": "sess_b93be631e89ad", "app": "schnippsi-painter" },
|
||||
"strokes": [
|
||||
{
|
||||
"id": "st_1755959337193",
|
||||
"tool": "free",
|
||||
"colorA": "#62d3a4",
|
||||
"colorB": "#ffd166",
|
||||
"width": 12,
|
||||
"points": [
|
||||
{ "x": 924, "y": 155.8, "t": 7708, "p": 0.5, "tilt": [0,0], "type": "mouse" }
|
||||
],
|
||||
"isBezier": false
|
||||
},
|
||||
{
|
||||
"id": "st_1755959337552",
|
||||
"tool": "free",
|
||||
"colorA": "#62d3a4",
|
||||
"colorB": "#ffd166",
|
||||
"width": 12,
|
||||
"points": [
|
||||
{ "x": 816, "y": 245.8, "t": 8067, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 816, "y": 245.8, "t": 8089, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 816, "y": 247.8, "t": 8098, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 816, "y": 251.8, "t": 8113, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 814, "y": 260.8, "t": 8124, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 812, "y": 265.8, "t": 8134, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 810, "y": 270.8, "t": 8144, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 807, "y": 276.8, "t": 8154, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 802, "y": 286.8, "t": 8164, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 799, "y": 291.8, "t": 8174, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 797, "y": 296.8, "t": 8184, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 794, "y": 300.8, "t": 8193, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 789, "y": 310.8, "t": 8202, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 786, "y": 315.8, "t": 8213, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 782, "y": 321.8, "t": 8224, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 778, "y": 328.8, "t": 8233, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 768, "y": 345.8, "t": 8244, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 761, "y": 355.8, "t": 8253, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 755, "y": 366.8, "t": 8263, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 747, "y": 378.8, "t": 8274, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 731, "y": 401.8, "t": 8283, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 724, "y": 414.8, "t": 8293, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 717, "y": 427.8, "t": 8304, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 711, "y": 440.8, "t": 8313, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 700, "y": 461.8, "t": 8323, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 696, "y": 468.8, "t": 8333, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 693, "y": 472.8, "t": 8342, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 693, "y": 474.8, "t": 8354, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 694, "y": 471.8, "t": 8363, "p": 0.5, "tilt": [0,0], "type": "mouse" },
|
||||
{ "x": 697, "y": 466.8, "t": 8373, "p": 0.5, "tilt": [0,0], "type": "mouse" }
|
||||
],
|
||||
"isBezier": false
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
> **Hinweis**: Für Bezier‑Strokes werden zusätzlich pro Anker `h1`/`h2` (Handle‑Vektoren relativ zur Anker‑Position) gespeichert.
|
||||
|
||||
---
|
||||
|
||||
## Streaming Event‑Schema (Browser → WS)
|
||||
|
||||
* `session` → { id, app, ts }
|
||||
* `strokeStart` → { id, tool, colorA, colorB, width }
|
||||
* `point` → { id, x, y, t, p, tilt, type } *(Freihand)*
|
||||
* `anchor` / `anchors` → { id, x, y, h1:{x,y}, h2:{x,y}, t } *(Bezier)*
|
||||
* `strokeEnd` → { id, points } *(optional: compact)*
|
||||
|
||||
---
|
||||
|
||||
## A11y‑Notizen
|
||||
|
||||
* Tastatur‑First (B/F/S/R/H), große UI‑Ziele, hoher Kontrast.
|
||||
* Geplant: **Screenreader‑Hints**, **Braille‑Export** (Punkte als Raster), **Haptik‑Map** für Pen‑Tablets, **Color‑Safe‑Paletten**.
|
||||
|
||||
---
|
||||
|
||||
## Nächste Schritte
|
||||
|
||||
1. **OSC‑Bridge** (WS→OSC) für TD & Ableton/Unity.
|
||||
2. **Pen‑Druck & Neigung** robust auf iPad/Android.
|
||||
3. **Bezier‑Bearbeitung**: Anker hinzufügen/löschen, Pfad segmentweise konvertieren (Line↔Curve).
|
||||
4. **Datenschutz**: Consent‑Flows + Pseudonymisierung im Stream.
|
||||
5. **Mini‑Demos**: Eule→Baum‑Level als interaktives Textabenteuer.
|
||||
|
||||
---
|
||||
|
||||
## Lizenz / Sharing
|
||||
|
||||
CC‑BY 4.0 für diese Dokumentation. Code‑Snippets MIT, Medien nach jeweiligem Credit.
|
||||
|
||||
> *„Die Eule fliegt wieder zum Baum.“ – Jede Frage zählt.*
|
||||
Reference in New Issue
Block a user