Vektorgrafik für die Joyce

Software-Entwicklung, Compiler, Interpreter, ...
Benutzeravatar
bbock
Beiträge: 247
Registriert: 08.02.2015, 15:31

Vektorgrafik für die Joyce

Beitrag von bbock »

Wir haben bereits ein schönes Grafikpaket für die Joyce, mit dem man Linien, Kreise, Ellipsen usw. zeichnen kann. Ich dachte, damit könnte man doch Vektorgrafiken auf die Joyce zaubern, denn es gibt bereits eine Vielzahl von Dateien in diversen Vektorgrafik-Formaten, und die müsste man nur so umwandeln, dass sie auf einfache Weise auf der Joyce zu verarbeiten sind.

Schritt 1: Ein Vektorgrafikformat für die Joyce

Das Vektorformat ist an den Möglichkeiten unserer Grafikbibliothek ausgerichtet. Die Dateien sollen die Endung .VEC haben; jede Datei beginnt zudem mit einem Header mit den ASCII-Zeichen 'V', 'E', 'C'. Jedes Grafikobjekt wie Linie, Kreis, usw. wird mit einem Code (1 Byte) eingeleitet, dann folgen die Punktkoordinaten / Radien als Parameter. Alle Parameter sind im 2-Byte little endian Format abgelegt, d.h. das niederwertige Byte kommt zuerst. Das letzte Byte der Datei ist die 99 (alle Angaben in dezimal).

Code: Alles auswählen

Header: 'V' 'E' 'C'
Byte         |  0 |   1    2   |   3    4   |   5    6   |   7    8   |
-----------------------------------------------------------------------
Dot          |  0 |     x      |     y      |            |            |
Line         |  1 |     x1     |    y1      |    x2      |    y2      |
Box          |  2 |   xleft    |   ytop     |   xright   |  ybottom   |
Square       |  3 |   xleft    |   ytop     |   width    |            |
Ellipse      |  4 |  xcenter   |  ycenter   |  xradius   |  yradius   |
Circle       |  5 |  xcenter   |  ycenter   |   radius   |            |
Multi-Dot    | 10 |#dots|     x1      |    y1     |     x2     | ...  |
Multi-Line   | 11 |#dots|     x1      |    y1     |     x2     | ...  |
Polygon-Fill | 12 |#dots|     x1      |    y1     |     x2     | ...  |
End          | 99 |            |            |            |            |
Schritt 2: Ein Programm zum Anzeigen von VEC-Dateien

Das Programm VECREAD liest VEC-Dateien und zeigt sie mit Hilfe der Joyce-Grafikbibliothek an.

VECREAD11_src.zip
VECREAD V1.1 Source
(9.01 KiB) 1127-mal heruntergeladen
VECREAD11_com.zip
VECREAD V1.1 ausführbare COM-Datei
(9.59 KiB) 1285-mal heruntergeladen

Hier nun einige Beispiel-Dateien im VEC-Format:
vec-samples.zip
Beispiel-Dateien im VEC-Format
(16.52 KiB) 1239-mal heruntergeladen

Schritt 3: Ein Programm zum Umwandeln von SVG in VEC

VEC-Dateien kann man zwar auch manuell oder per Programm selbst erstellen, aber das ist ein mühsames Unterfangen. Es gibt ja bereits viele Dateien, die in verschiedenen Vektorformaten vorliegen. Mittlerweile ist SVG (= Scalable Vector Graphics) besonders populär, weil es von allen gängigen Browsern unterstützt wird; es ist quasi das Vektorgrafikformat des Internets.
Allerdings ist es nicht gerade einfach, einen SVG->VEC Konverter zu implementieren, weil SVG ein sehr mächtiges Format ist. Außerdem gilt es sich auf die SVG-Eigenschaften zu beschränken, die auch von unserer Joyce dargestellt werden können. So sind Farben, Gradientenverläufe, Animationen und einiges mehr nicht realisierbar. Man muss also Grafikelemente extrahieren, die durch Linien, Kreise, etc. darstellbar sind. Die Grafik muss zudem auf die Joyce-Auflösung skaliert werden.
Mein Programm TinySVG ist in Java geschrieben. Es ist eine ausführbare JAR-Datei, die einfach per Doppelklick gestartet wird. Via File > Open öffnet man eine SVG-Datei, die dann analysiert und in Grafikelemente zerlegt wird. Das Ergebnis der Umwandlung erscheint als Vorschau im Programmfenster; damit die Grafik auf dem PC nicht gestaucht aussieht, ist die Auflösung hier 720x512 Pixel. Die VEC-Datei (720x256) wird automatisch im selben Verzeichnis wie die geöffnete SVG-Datei erzeugt; sie hat denselben Dateinamen, allerdings mit der Endung ".VEC" statt ".SVG".

TinySVG.zip
Java-Programm SVG -> VEC
(44.02 KiB) 1104-mal heruntergeladen
Benutzeravatar
bbock
Beiträge: 247
Registriert: 08.02.2015, 15:31

Re: Vektorgrafik für die Joyce

Beitrag von bbock »

TinySVG ist noch in einer frühen Entwicklungsphase und unterstützt eine Reihe von SVG-Features noch nicht, darunter (die Liste ist nicht vollständig):
  • CSS Code, inbes. Style
  • Dateien, die nicht XML-konform sind
  • Transformationen außer "translate"
  • Wiederverwendung (<use> tag)
  • Diverse Kurven in Path-Objekten (diese werden durch gerade Linien angenähert)
Dennoch lassen sich bereits eine ganze Reihe von SVG-Dateien mit brauchbaren Ergebnissen umwandeln.

Hier ein Beispiel:
Puffin.jpg
Puffin.jpg (35.22 KiB) 26373 mal betrachtet
PuffinJoyce.png
PuffinJoyce.png (38.86 KiB) 26373 mal betrachtet
Puffin.svg.zip
SVG-Datei Puffin.svg
(85.43 KiB) 1224-mal heruntergeladen
Paul
Beiträge: 154
Registriert: 17.09.2017, 22:27
Wohnort: Germanys west end

Re: Vektorgrafik für die Joyce

Beitrag von Paul »

Sehr schön Bernd,
ich habe das sogar ans laufen bekommen mit CP/M Box 1.91 und gemapptem Laufwerk M: auf dem Mac unter Mojave.
Aber das Jar lässt sich nicht starten, benötig wohl eine Java Kommandozeilenversion und meint du seist als Entwickler nicht bei Apple zertifiziert :(
Bist du so lieb und hängst den Puffin auch mal VEC Datei an?
Liebe Grüße
Paul
Benutzeravatar
bbock
Beiträge: 247
Registriert: 08.02.2015, 15:31

Re: Vektorgrafik für die Joyce

Beitrag von bbock »

Hallo Paul,

also, auf meinem MacBook Pro startet TinySVG einwandfrei; ich habe ebenfalls Mojave installiert. Da stimmt wohl etwas nicht mit deiner Java-Installation? Oder mit den Sicherheitseinstellungen?

Wie auch immer: anbei die VEC-Datei wie gewünscht.
PuffinVEC.zip
Puffin.vec
(17.81 KiB) 1126-mal heruntergeladen
Benutzeravatar
bbock
Beiträge: 247
Registriert: 08.02.2015, 15:31

Re: Vektorgrafik für die Joyce

Beitrag von bbock »

Ein kleines Update: VECREAD Version 1.2 löscht auch die Statuszeile, damit am unteren Bildschirmrand nicht Reste von voher gezeichneten Grafiken zurückbleiben.

VECREAD12_src.zip
VECREAD V1.2 Source
(9.04 KiB) 1127-mal heruntergeladen
VECREAD12_com.zip
VECREAD V1.2 ausführbare COM-Datei
(9.67 KiB) 1140-mal heruntergeladen
Benutzeravatar
bbock
Beiträge: 247
Registriert: 08.02.2015, 15:31

TinySVG v0.2

Beitrag von bbock »

TinySVG Version 0.2 ist eine größere interne Überarbeitung. Sie unterstützt jetzt die Funktion "scale" im transform-Attribut, so dass einige Grafiken besser dargestellt werden.

TinySVG.zip
TinySVG v0.2
(50.79 KiB) 1167-mal heruntergeladen
Benutzeravatar
bbock
Beiträge: 247
Registriert: 08.02.2015, 15:31

TinySVG v0.3

Beitrag von bbock »

TinySVG speichert nun zwei Dateien im selben Verzeichnis, in der sich auch die Programmdatei TinySVG.jar befindet: eine Log-Datei (TinySVG.log) und eine Konfigurationsdatei (TinySVG.properties). Die Konfigurationsdatei wird beim Start des Programms gelesen und beim Beenden aktualisiert. So bleiben einmal gewählte Einstellungen erhalten.

Wichtigste Änderungen in Version 0.3:
  • Konfigurationsdatei TinySVG.properties: Hier sind die Einstellungen aus dem Options-Menü und der aktuelle Pfad zu den SVG-Dateien hinterlegt.
  • Options > Center: zentriert die Grafik auf dem Bildschirm
  • Options > Resize: passt die Größe der Grafik so an, dass sie den Bildschirm ausfüllt. Die Anpassung ist verzerrungsfrei, d.h. das Seitenverhältnis (aspect ratio) der Grafik wird nicht verändert.
  • Options > Bézier curve approximation: Nähert die in Path-Objekten enthaltenen Bézier-Kurven durch Liniensegmente an, damit die Kurven "rund" aussehen und nicht "eckig". Die Anzahl der Liniensegmente wird automatisch abhängig von der Entfernung der jeweiligen Anfangs- und Endpunkte der Bézier-Kurven gewählt. Dadurch wird ein guter Kompromiss zwischen der Anzahl der Linien und der Darstellungsqualität erreicht. Derzeit werden nur kubische Bézier-Kurven unterstützt (Kommando "CurveTo" bzw. "C" / "c"); das sind aber die am häufigsten anzutreffenden Varianten.
TinySVG.zip
TinySVG v0.3
(57.24 KiB) 1255-mal heruntergeladen
Benutzeravatar
bbock
Beiträge: 247
Registriert: 08.02.2015, 15:31

TinySVG v0.4

Beitrag von bbock »

Version 0.4 behebt Fehler bei der Aktivierung von Optionen und erlaubt die Einstellung des "Bézier-Faktors": es kann eine Wert zwischen 1 und 50 eingestellt werden; kleinere Werte erzeugen glattere Kurven, aber auch mehr Linien, was wiederum die Dateigröße erhöht.

TinySVG.zip
TinySVG v0.4
(59.95 KiB) 1135-mal heruntergeladen
Benutzeravatar
admin
Administrator
Beiträge: 20
Registriert: 08.02.2015, 11:19

Re: Vektorgrafik für die Joyce

Beitrag von admin »

Hier sind ein paar SVG-Grafiken zum Ausprobieren:

SVG.zip
SVG-Beispieldateien
(308.66 KiB) 1185-mal heruntergeladen

Im Internet findet man eine reiche Auswahl an weiteren Bildern, z.B. hier: https://freesvg.org

Ich möchten noch einmal betonen, dass TinySVG nur Strichzeichnungen erzeugt, also keine Flächenfüllungen mit Gradienten, Mustern, etc. Außerdem sind noch nicht alle geplanten SVG-Features implementiert (das ist ein hartes Stück Arbeit), daher können bestimmte Grafiken zerrissen aussehen oder evtl. gar nicht dargestellt werden. Im Laufe der Zeit wird das Programm (hoffentlich) immer besser werden. TinySVG ist eine Eigenentwicklung und nutzt keine SVG-Libraries wie z.B. Apache Batik.
Forumadministrator
Benutzeravatar
bbock
Beiträge: 247
Registriert: 08.02.2015, 15:31

TinySVG v0.5

Beitrag von bbock »

Viele Änderungen gibt es in Version 0.5, aber es wird weitere geben! Wenn das Programm m.E. "feature complete" ist, dann seht ihr das an der Versionsnummer 1.0. Folgende Änderungen sind in die neue Version eingeflossen:
  • Um die Hierarchien von Transformationen korrekt unterstützen zu können, war eine größere Umstellung der internen Datenstrukturen erforderlich (Baumstrukturen, wo bisher Listen ausreichten).
  • Zur Verbesserung der Genauigkeit der Abbildung werden jetzt alle Werte als double geführt (float hätte eigentlich genügt, bringt aber keine Vorteile).
  • Ein Fehler mit center und resize wurde behoben.
  • Einzelne Pixel am Rand werden nicht mehr abgeschnitten.
TinySVG.zip
TinySVG v0.5
(69.32 KiB) 1160-mal heruntergeladen
Antworten