# Handschrift-Variationen - Konfiguration ## Aktuelle Einstellungen ### 1. Scriptalizer Error Frequency ``` SCRIPTALIZER_ERR_FREQUENCY=0 ``` - **Bedeutung:** Keine durchgestrichenen Wörter oder Tippfehler - **Ergebnis:** Saubere, fehlerfreie Handschrift --- ### 2. Wortabstands-Variation: **15%** **Implementierung:** `src/lib/svg-font-engine.js` ```javascript // Leerzeichen mit 15% Variation const baseSpace = fontSizePx * 0.4; const variation = baseSpace * 0.15 * (Math.sin(wordIndex * 2.5) * 0.5 + 0.5); const spacePx = baseSpace + variation; ``` **Effekt:** - Basis-Wortabstand: 40% der Schriftgröße (≈10.4 px bei 26px Font) - Variation: ±1.56 px (15% von 10.4px) - Natürliche, ungleichmäßige Abstände zwischen Wörtern --- ### 3. Wort-Rotation (Schräglage): **±5%** (≈±2.5°) **Implementierung:** `src/lib/svg-font-engine.js` ```javascript // Rotation zwischen -2.5° und +2.5° (±0.044 radians) const rotationVariation = 0.044 * (Math.sin(wordIndex * 3.7) * 0.5 + 0.5) - 0.022; wordRotation = rotationVariation; // Matrix-Transformation mit Rotation const cosR = Math.cos(wordRotation); const sinR = Math.sin(wordRotation); const transform = `matrix(${scale * cosR},${scale * sinR},${-scale * sinR},${-scale * cosR},${x},${baselineY})`; ``` **Effekt:** - Jedes Wort bekommt eine individuelle, leichte Schräglage - Rotation: -2.5° bis +2.5° (±0.044 Radians) - Macht die Handschrift natürlicher und lebendiger - Jedes Wort ist leicht unterschiedlich geneigt --- ## Variation-Pattern ### Sinuswellen-Basis Beide Variationen verwenden Sinuswellen für natürliche, nicht-gleichförmige Muster: ```javascript Math.sin(wordIndex * 2.5) // Wortabstand (langsame Oszillation) Math.sin(wordIndex * 3.7) // Rotation (schnellere Oszillation) ``` **Vorteil:** - Keine zufälligen Sprünge - Sanfte, natürliche Übergänge - Reproduzierbar (gleicher Text → gleiche Variation) - Kein Seed-Management nötig --- ## Visuelle Beispiele ### Ohne Variation (alt): ``` Hallo Max Mustermann aus Berlin ``` Alle Wörter perfekt gerade, gleiche Abstände ### Mit Variation (neu): ``` Hallo Max Mustermann aus Berlin ↗ → ↘ → ↗ ``` - Unterschiedliche Wortabstände (15% Variation) - Leichte Schräglage pro Wort (±2.5°) --- ## Technische Details ### SVG Matrix-Transformation **Original (ohne Rotation):** ```xml ``` **Neu (mit Rotation):** ```xml ``` Die kleinen Werte in Position 2 und 3 der Matrix erzeugen die Rotation: - Position 2 (b): `scale * sin(rotation)` ≈ 0.00004 - Position 3 (c): `-scale * sin(rotation)` ≈ -0.00004 --- ## Anpassung der Variationen ### Wortabstand ändern **Datei:** `src/lib/svg-font-engine.js` (Zeile 187-189) ```javascript // Aktuell: 15% const variation = baseSpace * 0.15 * (Math.sin(wordIndex * 2.5) * 0.5 + 0.5); // Mehr Variation (z.B. 25%): const variation = baseSpace * 0.25 * (Math.sin(wordIndex * 2.5) * 0.5 + 0.5); // Weniger Variation (z.B. 8%): const variation = baseSpace * 0.08 * (Math.sin(wordIndex * 2.5) * 0.5 + 0.5); ``` --- ### Rotation (Schräglage) ändern **Datei:** `src/lib/svg-font-engine.js` (Zeile 200-202) ```javascript // Aktuell: ±2.5° (0.044 radians) const rotationVariation = 0.044 * (Math.sin(wordIndex * 3.7) * 0.5 + 0.5) - 0.022; // Stärker schräg (z.B. ±5°): const rotationVariation = 0.087 * (Math.sin(wordIndex * 3.7) * 0.5 + 0.5) - 0.0435; // Weniger schräg (z.B. ±1°): const rotationVariation = 0.0175 * (Math.sin(wordIndex * 3.7) * 0.5 + 0.5) - 0.00875; // Keine Rotation (deaktivieren): const rotationVariation = 0; ``` **Umrechnung Grad → Radians:** ``` Radians = Grad × (π / 180) ±1° = ±0.0175 rad ±2.5° = ±0.044 rad ±5° = ±0.087 rad ``` --- ## Test-Beispiel ```bash curl -X POST http://localhost:4000/api/preview/batch \ -H "Content-Type: application/json" \ -d '{ "sessionId": "variation-demo", "letters": [{ "index": 0, "format": "a4", "font": "tilda", "text": "Dies ist ein Test mit natürlicher Handschrift-Variation.\n\nDie Wörter haben unterschiedliche Abstände und eine leichte Schräglage.\n\nDas macht das Schriftbild authentischer!", "placeholders": {} }] }' ``` --- ## Performance **Impact:** - Minimaler Overhead durch sin/cos Berechnungen - Pro Zeichen: ~4 zusätzliche Operationen - Bei 2000 Zeichen: ~0.5ms zusätzliche Verarbeitungszeit - Vernachlässigbar im Vergleich zur Scriptalizer API (1-3 Sekunden) --- ## Kompatibilität ✅ **Alle SVG-Viewer** unterstützen Matrix-Transformationen ✅ **Alle Browser** (Chrome, Firefox, Safari, Edge) ✅ **Plotter-Software** verarbeitet transformierte Pfade korrekt ✅ **Keine Änderung der Pfad-Daten** (nur Transformation) --- **Version:** 1.1.0 **Letzte Änderung:** 2026-01-02 **Status:** Produktionsreif ✅