Vom Leiden graphischer Zeichen

Computer-Kartenzeichen sehen oft irgendwie mangelhaft aus. Graphisch sind sie perfekt - aber irgendwas stimmt an Ihnen nicht.

Bei der Diagnose ihres Leidens lassen sich drei Symptomkomplexe erkennen.

1. Primitivitis: Die Reduktion alles Graphischen auf Strich, Rechteck, Kreis, oft noch unter Hinzumischung von etwas Ellipse, Polygon, Polylinie, Schraffur, Flächenfarbe, Rechteck mit abgerundeten Ecken etc. ist trügerisch. Es wird etwas Elementares, Fundamentales vorgegaukelt, das so elementar gar nicht ist. Mit einem Kreis kann vielerlei gemeint sein: Kreisfläche, Kreisumfang, Kreisring, Kreisscheibe, Kreisbogen, Kreissegment ...



2. Outline-itis: Schrift kommt von Schreiben. Das Zeichen hat im Zeichenstift seinen Ursprung. Wer schreibt schon die Ziffer 3, indem er mit dem Kurvenlineal deren Umfang in Form eines geschlossenen Kurvenzuges konstruiert und anschließend die so gewonnene Fläche fein säuberlich ausmalt? Die Seele der Zeichen sind deren Skelette, so der Leipziger Typograph Andreas Stötzner. Die Seele der Zeichen sind deren Skelette - das ist auch der fundamentale Ansatz von Don E. Knuths Satzsystem Metafont, auf das wir gleich zurückkommen werden.

   

3. Bézieritis: Der Siegeszug der Bézierkurze als Kurvenapproximat hat dem Kreis und der Ellipse mehr an Boden entrissen, als diese zu Füllen in der Lage wäre: Nicht immer gelingt das Annähern von Kreis- und Ellipsenbögen durch Bézierkurven.

   Das ist dann manchmal visuell-morphologisch, mitunter aber auch nur gedanklich-semantisch schmerzlich: Der aus 8 Bézier-Kurvenstücken zusammengesetzte i-Punkt einer Times New Roman-Truetypeschrift mag visuell makellos sein. Der perfekte Sitz des Maßanzuges befriedigt aber nicht, wenn man weiß, dass sich dessen Träger das gute Stück mit der Kneifzange angezogen hat.

Zeichenentwurf per Computergraphik ist nur allzuoft hilfloses Herumkrakeln mit Maus oder Zeichenbefehl. Immer gibt es etwas, was man gedanklich entwerfen kann - und doch nicht digital zu formen vermag.

Was kann hier eine Lösung sein?

Metafont

Fange immer bei Don E. Knuth an: Der kleine Bruder von Knuths legendenumwobenem Satzsystem TeX („LaTeX“) ist die kaum bekannte Schriftfont-Beschreibungssprache Metafont. Metafont beschreibt nicht Umrisse und Flächen (wie Postscript oder TrueType), sondern Zeichenstift-Wege. Da dürfte Andreas Stötzner hellhörig werden, oder?

In the always beginnig: Don E. Knuth: The hidden brother of Knuths TeX („LaTeX“) DTP system is the font description language Metafont. Metafont doesn't describe a outline definition of a sign or glyph (how Postscript oder TrueType), it describes the path of a drawing pen. With best regards to Andreas Stoetzner!

Metafont ist (klar, Don E. Knuth) etwas für den Kryptiker. Es geht auch etwas einfacher.

Einen praktikablen Ansatz bietet hier das path-Element des Internet-Vektorformates Scalable Vector Graphics (SVG).

SVG ist beschrieben in http://www.w3.org/TR/2003/REC-SVG11-20030114/

Das SVG-path-Element

Wie Metafont beschreibt das SVG-path-Element einen Linienzug, dem der Weg eines Zeichenstiftes zugrunde liegt. Die jeweilige Position des Zeichenstiftes wird als „aktuelle Position“ oder „Cursorkoordinate“ im Hintergrund mitgeführt.

Notation:

<path  data="pathdata"  stroke="col"  stroke-width="num"  fill="col">

Der Linienzug wird durch Zeichenbefehle beschrieben, die in einer pathdata Zeichenkette gegeben werden. Gezeichnet wird mit einer Linienfarbe col und einer Linienstärke num. Der Pfad kann mit einer Füllfarbe col ausgefüllt werden. Das hört sich einfach an, das eigentlich fast Geniale sind aber die Zeichenbefehle. Minimal, orthogonal und mächtig:

Die pathdata-Zeichenkette besteht aus einbuchstabigen Befehlen, denen (durch Leerzeichen oder Komma getrennt) Zahlenparameter folgen. Diese geben meist Koordinaten an, manchmal auch einen Winkel oder eine Ja-Nein-Information. Es gibt folgende 10 Befehle:

  M x y           Moveto: Cursor auf Position x,y setzen
  L x y           Lineto: Linie von Corsorposition nach x,y zeichen
  H x             Horizontal lineto: Horizontale Linie nach x zeichen
  V y             Vertical lineto: Vertikale Linie nach y zeichen
  C s t u v x y   Cubic bézier: Kubische Bézierkurve vom Cursor über r,s und u,v nach x,y
  Q s t x y       Quadratic bézier: Quadratische Bézierkurve vom Cursor über r,s nach x,y
  S s t x y       Smooth cubic bézier: Schnelle kubische Bézierkurve über r,s nach x,y
  T x y           smooTh quadratic bézier: Schnelle quadratische Bézierkurve nach x,y
  A r s a i j x y Arc: Ellipsenbogen mit Halbachsen r,s und Schräglage a nach x,y.
  Z               cloZe path: Linie zum Linienstartpunkt zeichnen und so abschließen
  

Die Koordinaten sind grundsätzlich Absolutkoordinaten, z. B. setzt M 120 -10 den Cursor auf Position 120,-10. Wenn man die Befehle jedoch mit Kleinbuchstaben notiert, so werden die Koordinaten zu Relativwerten, z. B. versetzt der Befehl m 120 -10 den Cursor um 120 Koordinateneinheiten nach rechts und um 10 Einheiten nach unten.

Etwas theoretischer Hintergrund

Gestalterisch ist besonders günstig, dass sich Kurven sowohl mit Bézierkurven, als auch mit Kreis- und Elliposenbögen definieren lassen.

Bézierkurven

Die kubische Bézierkurve verläuft vom Cursor (I) über die beiden Steuerpunkte II und III zum Zielpunkt IV:

Bei der quadratischen Bézierkurve gibt es insgesamt nur 3 Punkte:

Die Smooth-Bezierkurven funktionieren wie die regulären Bézierkurven. Hierbei werden allerdings Steuerpunkte einer im Linienzug vorangegangenen Bezierkurve genutzt, um Neu-Steuerpunkte zu erzeugen. Die alten Steuerpunkte werden einfach um 180° gespiegelt „nach vorn geklappt“. Dies macht den Befehl kürzer, spart Schreib- und Denkarbeit - und ist fast immer graphisch vorteilhaft.

Kreis- und Ellipsenbögen

Von besonderer Mächtigkeit ist der Arc-Befehl des path-Elements. Er zeichnet beliebige Kreise und Ellipsenbögen. Wesentlich ist die Form der „endpoint-parametrization“. Dies erspart dem Zeichner, den Mittelpunkt des Kreises oder der Ellipse zu kennen.

Nun etwas Mathe: Es gibt in der Ebene „4 * Unendlich hoch 3“ mögliche Ellipsenbögen, die 2 Punkte miteinander verbinden. Um einen einzigen bestimmten Bogen auszuwählen, müssen diese 3 Freiheitsgrade durch die Angabe von 3 Zahlenwerten „gehoben werden“. Der Arc-Befehl nutzt folgende Angaben:

1. Kleine Halbachse r
2. Große Halbachse s
3. Winkel zwischen großer Halbachse und X-Achse a

Um die richtige Lösung auszuwählen, werden zwei Flags i und j (das „Large-Arc-Flag“ und „Sweep-Flag“) genutzt. Diese können jeweils 0 oder 1 sein.

Wenn die Halbachsen kleiner werden, rücken die Ellipsenmittelpunkte immer weiter zusammen:

Wenn die Halbachsen zu klein werden, gibt schließlich keine Ellipse mehr, die die beiden Punkte zu verbinden in der Lage wäre. In diesen Fällen werden beide Halbachsen mit einem Faktor λ multipliziert, der ihr Verhältnis wahrt und sie gerade auf minimale Länge bringt:

Dies lässt sich raffiniert ausnutzen, um zwei Punkte mit einem 180°-Bogen zu verbinden. Um vom Cursor z. B. mit einem Halbkreis Punkt 300,150 zu erreichen, notiere man einfach A 1 1 0 0 0 300 150

Die beiden Halbmesser 1 und 1 werden dank λ geeignet vergrößert, der Winkel ist im Kreisfall uninteressant, einzig das Sweep-Flag muss ggf. durch Ausprobieren passend auf 0 oder 1 gesetzt werden.

Wie geht das nun praktisch?

Das ist der Code, der eine Denksteinsignatur erzeugt:

<!-- DENKSTEIN -->
<!-- ========= -->
<!-- FUELLUNG -->
<path d=
  "
    M -50,0
    L -50,125
    A 50 50 0 0 0 50,125
    L 50,0
    L -50,0
  "
  stroke-width="1" stroke="black" fill="#fcfcfc" zx="0" zy="50"
/>
<!-- UMRISS -->
<path d=
  "
    M -120,0
    L 150,0
    L -50,0
    L -50,125
    A 50 50 0 0 0 50,125
    L 50,0
    M -50,125
    A 57.5 57.5 0 0 0 65,125
    L 65,0
    M -50,125
    A 65 65 0 0 0 80,125
    L 80,0
  "
  stroke-width="20" stroke="black"
/>
  

Schauen wir uns das einmal an:

Nicht schlecht oder?

Und nun ...

Wiedervorstellung in der Praxis von Dr. med. sign.

Primitivitis: Ausgeheilt. Statt eines Sammelsuriums von Strichen, Rechtecken, Kreisscheiben, Kreisringen, Kreissegmenten oder Kreisbögen gelingt die ganze Signatur wunderbar, vollständig und ausschließlich mit dem Pfad.

Outline-itis: Ausgeheilt. Es werden Skelette definiert. Die Verstärkung des rechten Signaturteils erfolgt durch Mehrfachlinierung, wie dies etwa auch bei einer manuellen Zeichnung erfolgen würde.

Bézieritis: Ausgeheilt. Die obere Rundung des Denksteines ist ein exakter Kreisbogen bei dem selbst Archimedes keinerlei Beanstandungen hätte. Übrigens: Infolge der endpoint-Parametrization braucht man sich keine Gedanken darum machen, wo die Kreisbögen ihrem Mittelpunkt haben.

Dr. med. sign. ist zufrieden und der Patient wird zur Signaturierung der Böhmwanderkarten arbeitsfähig geschrieben.

Links

Kartensignaturen und Typographie

Kartensignaturen mit SVG beschreiben (Diese Seite)

Vimage-SVG

Verzeichnis der Kartensignaturen

Zum Seitenanfang