lucas.orth/Skrift-Kofnigurator

Fork 0

Files

s4luorth 5e0fceab15 Initial commit

2026-02-07 13:04:04 +01:00

4.9 KiB

Raw Permalink Blame History

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

// 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

// 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:

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):

<path transform="matrix(0.00846,0,0,-0.00846,75.6,120.5)" />

Neu (mit Rotation):

<path transform="matrix(0.00845,0.00004,-0.00004,-0.00845,75.6,120.5)" />

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)

// 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)

// 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

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 ✅

4.9 KiB Raw Permalink Blame History Unescape Escape