# 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.*