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: Jeder 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.

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

OSC‑Bridge (WS→OSC) für TD & Ableton/Unity.
Pen‑Druck & Neigung robust auf iPad/Android.
Bezier‑Bearbeitung: Anker hinzufügen/löschen, Pfad segmentweise konvertieren (Line↔Curve).
Datenschutz: Consent‑Flows + Pseudonymisierung im Stream.
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.