Bildbearbeitungstool bei Github: Triangula und die Schönheit der Mathematik
In unserer Reihe Helferlein stellen wir kleine Entdeckungen vor: coole Werkzeuge, die das Leben ein bisschen leichter machen.
Wenn von Triangulation die Rede ist, verstehen Nicht-Mathematiker darunter im Allgemeinen eine geometrische Methode zur Abstandsmessung. Grob gesagt kann man über zwei bekannte Punkte im Raum einen dritten über die Winkel zu ihm berechnen. In dem einen oder anderen Hollywood-Kriegs- oder Spionagefilm ist den meisten das sicherlich schon mal untergekommen.
Triangulation bezeichnet aber auch das Zerlegen einer Fläche in Dreiecke oder ganz generell die Beschreibung eines Objektes mittels Polygonen. Verwendung findet das in der Topologie und der Landvermessung, aber auch in bildgebenden Verfahren der Modellierung.
Wie wunderbar man dieses Feld der Mathematik auf Fotos anwenden kann, zeigt der Github-Nutzer RyanH(öffnet im neuen Fenster) mit seinem in Go geschriebenen Programm Triangula(öffnet im neuen Fenster), das ein gegebenes JPG- oder PNG-Bild zunächst grob in Dreiecke zerlegt und dann über Mutationen immer weiter verfeinert.
Dabei lässt sich unter anderem festlegen, mit wie vielen Punkten man starten möchte und wie viele Mutationen das Programm durchführen soll. Auch ist es möglich, das neue Bild über Sechsecke (Hexagone) zu berechnen statt über klassische Dreiecke.
Das Ergebnis sind stilisierte Abbildungen des Originals, die man zum Beispiel als schicken Desktop-Hintergrund verwenden kann. Durch die Abstraktion des eigentlichen Motivs sind solche Bilder auch sehr gut geeignet als Header-Images auf Webseiten wie zum Beispiel Blogs, wenn das Bild nicht vom eigentlichen Inhalt ablenken soll. Ein solches Bild hat eine große Nähe zum Original, wirkt aber eher wie Kunst.
Als Ausgabeformat steht neben PNG auch SVG (Scalable Vector Graphics) zur Verfügung, was sinnvoll ist, denn SVG ist ein XML-Format und die vom Programm berechneten Polygone kann man auch direkt als entsprechende polygon-Einträge als Text wegschreiben. Die erzeugten SVG-Dateien sind dabei je nach Original um den Faktor 30 kleiner und passen so an vielen Stellen besser zu knappen Bandbreiten oder aufgebrauchten Verbrauchslimits im Internet.
Einsatz von Triangula auf der Kommandozeile
Ryan bietet sein Programm Triangula auch als CLI-Version(öffnet im neuen Fenster) an, die über die Kommandozeile aufgerufen wird. Dabei ist der Prozess des Triangulierens in zwei Teile getrennt: Erst erzeugt man über den Parameter run die gewünschte Abstraktion eines Originalbildes, die in einer JSON-Datei auf der Festplatte abgelegt wird. In einem zweiten Schritt wird mittels render und der Angabe der JSON-Datei entweder ein PNG oder ein SVG als Ausgabedatei erstellt.
Da das Kommandozeilenwerkzeug die gleichen Optionen wie die UI-Version bietet, eignet es sich hervorragend, um die verwendeten Bilder zum Beispiel beim Build einer Webseite automatisiert zu verarbeiten. Auch ist es damit wesentlich einfacher, einen ganzen Ordner mit Bildern in solch künstlerische Abstraktionen zu verwandeln.
Triangulierte Bilder als Platzhalter auf Webseiten
Je nachdem, wie gut die Internetverbindung ist und der Verstand des Entwicklers einer Webseite gearbeitet hat, kann es schon mal etwas dauern, bis der Browser des Smartphones ein x Megabyte großes Header- oder Illustrationsbild geladen hat, um es endlich anzeigen zu können. Richtig nervig wird es, wenn auf der Webseite für das Bild zuvor kein Platz reserviert wurde und der Text, den man begonnen hat zu lesen, auf einmal weghüpft.
Die Lösung ist in jedem Fall, möglichst kleine und an das Gerät angepasste Bilder zu verwenden, aber selbst diese haben eine gewisse Dateigröße, wenn sie gut aussehen sollen. Um das Textspringen zu verhindern, verwendet man heutzutage meist graue Platzhalter mit oder ohne Ladebalken, um zu signalisieren, dass an dieser Stelle in Kürze etwas angezeigt wird.
Ryan hat auch hierfür eine erstaunlich effektive Lösung gefunden: tip – Triangulated Placeholders(öffnet im neuen Fenster) – zum Erstellen von kleinstmöglichen triangulierten Bildern und Überblenden mittels Javascript.
Basis ist ein ebenfalls in Go geschriebenes Frontend, das die gleichen Algorithmen wie Triangula verwendet und mit dem der Benutzer über die Oberfläche mehrere Originalbilder oder gleich einen ganzen Ordner mit Fotos auf einmal verarbeiten kann.
Ausgabeformat bei tip ist aber kein PNG oder SVG, sondern eine binäre Datei, die von allen technischen Möglichkeiten am wenigsten Speicherplatz verbraucht.
Zum Vergleich die erzeugten Dateigrößen des Beispielbildes mit der Auflösung 1.024 x 660 Pixel:
| BILD | GRÖßE |
|---|---|
| Original | 386 KB |
| Triangula PNG | 223 KB |
| Triangula SVG | 40,3 KB |
| tip TRI | 3,03 KB |
Die Dateien mit der Endung TRI werden vom Webentwickler im IMG-Tag eines Bildes einer Seite im Attribut data-src referenziert. Ein nur 200 Zeilen langes Javascript, das ebenfalls eingebunden und mit der Webseite ausgeliefert wird, kümmert sich um die sofortige Anzeige dieser TRI-Datei beim Laden der Seite und das sanfte Überblenden auf das Originalbild, sobald es geladen wurde. Schöner kann man es kaum machen.
Kristof Zerbe(öffnet im neuen Fenster) arbeitet seit über 25 Jahren in der IT in unterschiedlichsten Rollen wie Freelancer, Administrator, Datenbankentwickler, Coach, Web-Entwickler, Architekt, DevOps-Engineer, Analyst, Team-Lead sowie aktuell IT-Manager und Führungskraft. Seine technologischen Schwerpunkte sind Web und Microsoft.
- Anzeige Hier geht es zu Versionsverwaltung mit Git: Praxiseinstieg bei Amazon Wenn Sie auf diesen Link klicken und darüber einkaufen, erhält Golem eine kleine Provision. Dies ändert nichts am Preis der Artikel.