Vektorgrafik

SVG-Grafik für die Schneider Joyce

In der Computergrafik unterscheidet man zwei Arten von Bildern: Bitmap- und Vektorgrafiken. Erstere speichern die Farbe jedes einzelnen Bildpunktes in einem rechteckigen Raster, letztere speichern eine Beschreibung der Bildobjekte wie Linien, Kreise, Quadrate, usw. Möchte man die Bilder vergrößern oder verkleinern (skalieren), dann geht das nur mit Vektorgrafiken verlustfrei, denn die Bildobjekte können jeweils neu in die gewünschte Größe umgerechnet werden. Bei Bitmap-Bildern kennt man die "Treppenstufen" bei schrägen Linien, die besonders bei Vergrößerungen sichtbar werden - je nach Vergrößerungsalgorithmus mehr oder weniger deutlich.

Das Internet ist voll von Bildern; die meisten davon sind Bitmap-Grafiken. Es gibt aber auch viele Vektorgrafiken, und das Standardformat für Vektorgrafiken im Internet heißt SVG (Scalable Vector Graphics = Skalierbare Vektorgrafik). Es handelt sich hierbei im Wesentlichen um ein XML-basiertes Format, in dem man Tags wie <line>, <circle>, <rect> oder <path> für die geometrischen Grundformen findet. Die Tags werden durch Attribute genauer beschrieben; diese geben z.B. Start- und Endpunkte, Radius, Breite, Höhe, Linienstärke etc. an. Das komplizierteste Attribut ist wohl das "d"-Attribut in <path>: Es beinhaltet einfache Grafikbefehle wie MoveTo oder LineTo, aber auch komplexere wie elliptische Bögen, Bézier-Kurven oder Catmull-Rom-Kurven. Damit lässt sich eine Vielzahl von Formen zeichnen.


Beispiel einer SVG-Datei:

<svg width="300" height="200" viewbox="0 0 300 200" >
<desc >Flagge Dänemarks</desc >
<rect x="0" y="0" width="300" height="200" fill="#E31836" / >
<path d="m80,0 h40 v80 h180 v40h-180 v80 h-40 v-80 h-80 v-40 h80z" fill="white" / >
</svg >


SVG-Grafiken zum Herunterladen findet man u.a. hier:

  Frei:

  Kommerziell:

       

Man kann SVG-Vektorgrafiken auch selbst erstellen: das Open-Source-Programm Inkscape ist empfehlenswert. Inkscape kann auch Bitmap-Bilder in Vektorgrafiken umwandeln (was aber nicht immer perfekt gelingt und einiges Ausprobieren erfordert).

SVG ist ein komplexes Format, das hinsichtlich der Darstellungsmöglichkeiten keine Wünsche offen lässt. Die Komplexität des Formats wirft die Frage auf, wie man SVG-Grafiken auf einem 8-Bit-Computer der 1980er Jahre mit eingeschränkten Grafikmöglichkeiten und knappem Hauptspeicher zur Anzeige bringen kann. Das direkte Einlesen und Interpretieren von SVG-Dateien ist schon allein wegen des Speicherbedarfs kaum möglich.

Mein Ansatz ist daher zweistufig: zuerst wird die SVG-Grafik auf dem PC in ein einfaches Vektorformat umgewandelt, das nur Grafikbefehle enthält, die auf der Joyce interpretiert werden können. Dabei werden alle SVG-Spezialitäten weggelassen, die auf einem monochromen Bildschirm nicht dargestellt werden können. Dann liest ein Joyce-Programm das vereinfachte Vektorformat ein und zeichnet die Grafik.

Für den ersten Schritt habe ich ein Java-Programm namens TinySVG entwickelt, das mittlerweile neben der Schneider Joyce auch andere Plattformen unterstützt. Aktuell, d.h. in Version 0.15, sind noch nicht alle SVG-Features implementiert, aber viele SVG-Dateien lassen sich bereits gut umwandeln. Man muss einfach ausprobieren.

Den zweiten Schritt übernimmt das CP/M-Programm vecread, das aktuell in Version 1.2 vorliegt. Die aktuellsten Versionen von TinySVG und vecread können im Thema "Vektorgrafik für die Joyce" auf joyceforum.de heruntergeladen werden.

Die folgenden Beispiele zeigen SVG-Grafiken, wie sie im Internet Browser, in TinySVG und via vecread auf der Joyce dargestellt werden:

 

 

 

Anleitung TinySVG

Zur Ausführung von TinySVG muss eine Java-Runtime ab Version 8 auf dem PC installiert sein. Das Programm besteht aus einer JAR-Datei, die man einfach per Doppelklick starten kann.

Zunächst sollte man die Optionen einstellen: Options > Configuration öffnet den Dialog.

Die Option Center sollte aktiviert sein; dadurch wird die Grafik in der Mitte des Vorschaufensters angezeigt.

Auch Resize sollte aktiviert sein, damit die Grafik auf die volle verfügbare Höhe und Breite angepasst wird. Die Anpassung geschieht unter Beibehaltung des Seitenverhältnisses, d.h. die Grafik wird nicht gestreckt oder gestaucht.

Bézier Curve Approximation rechnet in <path>-Tags enthaltene Bézier-Kurven in Liniensegmente um. Die Option sollte aktiviert sein, sonst werden Bézier-Kurven durch gerade Linien ersetzt, was durchaus zu interessanten Effekten führen kann, im Allgemeinen aber unerwünscht ist. Der Bézier factor verändert die Anzahl der erzeugten Liniensegmente. Je kleiner der Wert ist, desto mehr Linien werden erzeugt und desto glatter wird die Kurve. Die Datei wird dann aber größer und das Zeichnen der Grafik dauert länger. Der Standardwert von 10 passt meist ganz gut.

TinySVG kann die Anzahl der Linien reduzieren, indem es unnötige Linien entfernt. Das sind zum einen verbundene Linien mit nur einem Pixel Länge. Wenn zwei Linien verbunden sind und denselben Steigungswinkel haben, dann werden sie zu einer Linie zusammengefasst. Die Option Activate line reducer sollte eingeschaltet bleiben.

Unter Output files kann man wählen, welche Vektordateien TinySVG erzeugen soll. Für die Schneider Joyce sollte VEC (.vec) aktiviert sein. Das ist das Format, das vecread lesen kann.

Über die Screen resolution wird die Auflösung der ausgegebenen Vektoren bestimmt. Die passende Option für die Joyce ist klar: 720x256 (Schneider Joyce). Außerdem sollte ein Häkchen bei Double height in preview gesetzt werden; die Vorschau in TinySVG zeigt das Bild dann in einer Auflösung von 720x512 an. Da das Pixel-Seitenverhältnis (PAR = pixel aspect ratio) auf der Joyce nahezu 1:2 beträgt, bekommt man so ein unverzerrtes Bild angezeigt.

Alle Einstellungen unter Output files und Screen resolution kann man auch ganz einfach über die Presets auswählen: Die Auswahl Schneider Joyce stellt die empfohlenen Optionen ein.

Alle Optionen werden automatisch in einer Datei namens TinySVG.properties gespeichert, die im selben Verzeichnis wie TinySVG.jar abgelegt wird. Beim nächsten Start wird diese Datei gelesen und alle Einstellungen sind wieder so, wie man sie zuletzt eingestellt hat.

Daneben wird noch die Datei TinySVG.log erzeugt, die - wie die Dateiendung bereits vermuten lässt - das Log enthält. Über Options > Set log level kann man steuern, wie detailreich das Protokoll sein kann. Die Voreinstellung ist Info. Detailliertere Logs mit Fine oder Finer sind nur sinnvoll, wenn ein Fehler genauer analysiert werden muss. Die Log-Dateien werden dann aber deutlich größer und das Schreiben des Logs dauer länger. Man kann die log severity auch auf Warning oder Severe stellen, wenn man kürzere Logs bevorzugt.

Nachdem nun alle Optionen eingestellt sind, kann man eine SVG-Datei via File > Open öffnen. TinySVG merkt sich den Pfad, den man zuletzt geöffnet hatte. Nachdem man die gewünschte Datei ausgewählt hat, wird die Datei umgewandelt und erscheint im Vorschaufenster. Auch die Ausgabedateien werden sofort erzeugt und in dem Verzeichnis gespeichert, in dem sich auch die SVG-Datei befindet.

Wenn man nach dem Laden einer Datei noch mit den Optionen experimentieren möchte (z.B. mit dem Bézier-Faktor), dann kann man die Änderungen bequem über File > Reload zur Anzeige bringen.

Mit File > Exit wird das Programm beendet.

 

 

Anleitung vecread.com

Man kann das Programm auf der Joyce einfach durch Eingabe von vecread starten, woraufhin es zur Eingabe eines Dateinamens auffordert. Der Dateiname muss vollständig, also inklusive der Extension .vec, eingegeben werden. Alternativ kann man das Programm auch mit der gewünschten Datei als Parameter aufrufen, also z.B. vecread puffin.vec. Das Zeichnen der Grafik beginnt dann sofort. Ein Ton signalisiert das Ende des Zeichenvorgangs; ein Tastendruck beendet das Programm.

 

Bernd Bock, April 2021

 

Anleitung vecread2.com

Vektorgrafik-Anzeigeprogramm mit Diashow-Modus

Die Version 2.0 des Vektorgrafik-Anzeigeprogramms hat einen Diashow-Modus, der alle .vec-Dateien auf einer Diskette nacheinander anzeigt. Die Diashow wird durch Eingabe eines "D" (oder "d") anstelle eines Dateinamens gestartet. Das funktioniert über die Eingabemaske und über die Kommandozeile: vecread2 d

Die Diashow kann man durch einen Tastendruck beenden. Die aktuelle Grafik wird noch zuende gezeichnet, dann ertönt ein akustisches Signal. Die letzte Grafik kann man dann noch bewundern, bevor ein weiterer Tastendruck das Programm beendet.

Im JOYCE-Forum gibt es drei Disc Images, die vecread2 und einige Beispielgrafiken enthalten. Die ZIP-Dateien enthalten die Images einmal im DSK- und einmal im HFE-Format (letzteres ist für Joyce-Computer mit HxC Floppy Emulator).

 

  VECREAD2_com.zip = VECREAD2 v2.0 ausführbare COM-Datei
  VECREAD20_src.zip = VECREAD2 v2.0 Source
  vecread2_dsk.zip = Drei Disc Images im DSK-Format
  vecread2_hfe.zip = Drei Disc Images im HFE-Format für den HxC Floppy Emulator

 

Bernd Bock, Mai 2021

 

 

TinySVG Updates

Neu in Version 0.21:

  • Drehen der Grafik um einen beliebigen Winkel: Options > Configuration > Rotate clockwise by ... degrees

  • Der Configuration-Dialog kann jetzt mit Enter bestätigt und mit Esc storniert werden

  • Korrektur der Rechtecke (BOX) bei ZX Spectrum Standard

  • Diverse bug fixes

 

Neu in Version 0.22:

Version 0.22 behebt das Problem beim automatischen Resize.  

Einfach "Center" und "Resize" aktivieren und die Grafik wird genau einge-passt - auch wenn sie gedreht wurde. Und noch ein kleiner Tipp: man kann beliebige Drehwinkel eingeben, also auch "krumme" oder negative!

Außerdem habe ich einen Fehler behoben, der bei einer ganzen Reihe von SVG-Dateien zu zerrissenen Bildern führte: im Kern war es ein Prob-lem mit einer Matrix-Multiplikation. Dazu muss man wissen, dass das Kommutativgesetz bei der Matrixmultiplikation nicht gilt, d.h. im Allgemeinen ist AxB nicht gleich BxA. In TinySVG brauche ich situationsbedingt beide Richtungen; da muss man ganz schön aufpassen ...

 

Neu in Version 0.23:

Internationalization (gern auch als I18N abgekürzt) ist das offensichtliche neue Feature der Version 0.23; außerdem wurde intern einiges an Code umstrukturiert.

TinySVG startet nun in deutscher Sprache, wenn die Sprache des Betriebssystems auf Deutsch eingestellt ist, ansonsten in englischer Sprache. Über Optionen > Deutsch / Englisch bzw. Options > German / English kann die Sprache gewechselt werden, was dank trickreicher Programmierung ohne Neustart der Anwendung funktioniert.

 

Bernd Bock, Mai 2021

 

Weitere Updates findest Du im joyceforum.de !