Stranger Than Usual

Ich habe ja vor ein paar Monaten schon davon geschrieben, wie ein Kollege einen animierten Github/Gitlab contribution graph gebastelt hat, in Form einer animierten SVG. Ich finde das nach wie vor cool, aber ich habe keine solche Datei in den Blogpost eingebunden. Zum einen, weil die Dateigröße trotz alle Optimierungen noch ziemlich heftig war (250 kiB), zum anderen, weil alleine das Anzeigen der Animation bei mir 50% CPU-Last auf einem Kern erzeugt.

In diesem Artikel geht es um animierte SVG und deren CPU-Last. Eigentlich wären animierte SVG eine super Gelegenheit, mal wieder ein paar Bilder in das Blog zu bringen… allerdings möchte ich keine riesige CPU-Auslastung bei allen verursachen, die meine Seite besuchen, also verlinke ich die Animationen nur.

Angefangen hat meine neuerliche Besessenheit mal wieder mit Napstablook.

Napstablook, animiert und tanzend

Ich bin gestern Abend über ein Github-Repo mit einem animierten Napstablook gestoßen. Die Grafiken selber stammen von Joel Erhart, die er auch in diesem Youtube-Video veröffentlicht hat. Ob das Github-Repo von ihm ist oder von einem Fan, weiß ich nicht.

Dieses Repo enthält jedenfalls eine Napstablook-Animation. Allerdings nur, wenn man eine SVG-Datei mir SPrites der verschiedenen Animationsschritte mit ein bisschen HTML und CSS mischt. Und ich habe mir gedacht: Hey, das kann man doch sicher auch standalone machen. Also habe ich das Repo geklont und mich an die Arbeit gemacht.

Einschub: SVG-Editoren und ihr komischer SVG-Code

Meistens wird der SVG-Code nicht von Hand geschrieben. Das ist verständlich, denn SVG von Hand zu bearbeiten ist eine Menge Arbeit und, um ehrlich zu sein, ich habe keine Intuition dafür, wie ich die Punkte in Bezierkuven setzen muss, damit sie so aussehen, wie ich es will. Also Benutzt man visuelle Editoren wie z.B. Inkscape, diese eine Adobe-Tool dessen Namen ich vergessen habe oder einen Haufen anderer SVG-Editoren. Manche Editoren sind auch für bestimmte Zwecke gemacht (z.B. für Diagramme), lassen ihre Ergebnisse aber auch als SVG exportieren.

Und dieses exportierte SVG ist, meiner Erfahrung nach, oft sehr unschön. Zum Beispiel wird anstelle von SVG-Attributen wie fill und stroke eine Menge CSS eingefügt wie ich schon bei meinem nichtanimierten Napstablook-SVG feststellen musste. Dann werden Koordinaten und Skalierungen willkürlich gesetzt, um sie danach mit einem transform-Attribut auf die richtige größe zu skalieren und an die richtige Position zu schieben.

Oft werden auch Gruppierungs-Tags (<g>) recht willkürlich verwendet, um Elemente zu gruppieren. Und, was ich speziell in diesem Fall feststellen musste: Statt den stroke eines Pfades zu nehmen, um eine Linie zu zeichnen, wurde mit dem Pfad eine zweidimensionale Fläche erzeugt, die dann mit fill gefüllt wurde. Obwohl es in dem Bild eigentlich nur zwei etwa gleich starke Linien gibt. Wenn man das so macht, kann man das Element natürlich nicht mehr weiß füllen… also erstellte die Software einen zweiten Pfad, der die inneren Umrisse des ersten Pfades abbildet. Oh, und der beide Pfade sind auch sehr lang.

Ich habe eine ganze Menge Müll herausgeworfen und es geschafft, die Größe der Datei von etwa 200 kiB auf etwa 100 kiB zu reduzieren. Immer noch groß, aber ich habe auch nicht alle Optimierungsmöglichkeiten ausgenutzt.

Lustig ist, dass man an der Struktur der SVG-Datei gut erkennen kann, wie die erschaffende Person gearbeitet hat, vieles davon zeigt auf verschiedene Arbeitsschritte hin, z.B. die zeigen Translationen und Transformationen vermutlich, wie der Künstler in diesem Fall Objekte hin- und hergeschoben hat. Ist ja schön, aber es sollte in einem SVG-Editor eine Export-Funktion geben, die diesen ganzen Kram zusammenstreicht um ein einfacheres SVG zu erzeugen. Aber genug der Ausschweifung.

Der animierte Napstablook, standalone

Ich habe einige Zeit gebraucht, die größtenteils daraus bestand, mich in der Ursprungsdatei zurechtzufinden, unnützen krams wegzuwerfen und Translationen zu berechnen. Am Ende jedoch hatte ich die Animation, die ich auch zu meinem geklonten Repo auf Github gepushed habe. Die Sache hat nur einen Nachteil: Meine CPU-Lst geht auf 30% hoch, sobald ich die Animation im Browser betrachte.

Die CPU-Last animierter SVG

30% auf einem halbwegs modernen CPU-Kern… das ist zu viel für einen kleinen animierten Geist in schwarz-weiß. Aber wie gesagt, die SVG-Pfade für den Geist sind sehr lang und umständlich. Also nehme ich eine einfachere Animation. So einfach wie möglich. Ich nehme das Beispiel von der MDN-Dokumentation zum <animate>-Tag. Das ist nur ein Quadrat, und die Animation ist so, dass sie langsam die Ecken immer weiter abrundet, bis ein Kreis dabei heraus kommt, und wieder zurück. Ad infinitum. Das kann doch nicht so schlimm sein, oder?

70 Prozent?!?

Mist. Dieses fast-Minimalbeispiel braucht sogar noch mehr CPU-Leistung. Und es macht auch keinen Unterschied, ob das Bild groß skaliert oder klein ist. Oder ob man die Animation verlangsamt oder beschleunigt. Es braucht.

Ich kann doch nicht die einzige Person mit diesem Problem sein, oder?

Nein, natürlich nicht. Vor über 7 Jahren schon hat zum Beispiel jemand auf Stackoverflow um Hilfe gebeten. Und das ist kein alleiniges Firefox-Problem. Chrome (bzw. Chromium) macht das Gleiche. Und damit in aller Wahrscheinlichkeit auch Safari und Edge.

Ich habe noch ein paar Experimente angestellt. Bewegen von Elementen (in diesem Fall eines Quadrats) hat auch für 70% Auslastung gesorgt (Beispiel von der MDN-Seite über das repeatCount-Attribut). Tatsächlich bin ich mit den 20% noch ganz gut dabei gewesen.

Ironischerweise hat dieses Tutorial, um SVG-Animationen auf Page Speed zu optimieren als Titelbild eine animierte SVG, die meine CPU-Last auf 200% bis 250% hochtreibt. Super hilfreich ist die Seite auch nicht. Ein paar gute Tipps (z.B. zum Verkleinern der SVG-Dateien) sind aber dabei.

Andere Animationen

Auch CSS-Animationen können sehr teuer sein. Ich habe da nicht viel ausprobiert, aber ich vermute mal, dass Animationen, die das Seitenlayout verschieben, sehr teuer sind, weil dabei ständig alles neu berechnet werden muss. Animationen, die nur sich selbst betreffen, dürften weniger rechenlastig sein. Die über CSS animierte Ursprungsversion des tanzenden Napstablook zum Beispiel sorgt nur für eine 15% Last auf einem Kern.

Animierte Rastergrafiken (z.B. animierte GIF-Bilder) funktionieren hingegen sehr effizient. Ich vermute mal, dass dort einfach nur die Pixel ausgetauscht werden, während bei SVG potentiell eine Menge Fließkommazahlen berechnet werden müssen, um das Bild richtig darzustellen.

Vielleicht kann ich also hoffen, dass sich die SVG-Animations-Renderer mit der Zeit verbessern, und z.B. alte Zustände cachen, um deutlich effizienter zu rendern. Bis dahin muss ich selber herausfinden, wie ich SVG-Animationen möglichst effizient mache.

Wenn ich etwas herausfinden sollte, schreibe ich hier wieder etwas dazu.

PS: svgo

Ach ja: Seit vorsichtig mit SVG-Optimierungstools wie svgo, wenn ihr animierte SVG-Dateien habt. SVGO fügt nämlich mehrere Pfade zu einem Pfad zusammen, entfernt Gruppen und IDs, und ignoriert dabei, dass die vielleicht von Animationen als getrennte, identifizierbare Elemente benötigt werden. Man kann das teilweise wegkonfigurieren, aber das ist ein bisschen aufwändig und man muss trotzdem aufpassen.

Ich habe mir heute Schokolade gekauft. Schokokugeln von einer bekannten, teuren Marke. Man muss sich ja zu Weihnachten auch mal etwas gönnen.

Was mich ein bisschen genervt hat war die Werbung auf der Verpackung: „60g GRATIS“. Wer hat sich diesen Bullshit eigentlich ausgedacht?

Das ist eine 200g-Packung. Ich habe für eine 200g-Packung gezahlt. Die 60g „gratis“ waren nicht gratis. Die habe ich bezahlt.

Oder ich habe halt 60g gratis bekommen, weil ich 140g zum Preis von 200g gekauft habe. Gratis wäre es, wenn ich die 60g kriegen könnte, ohne etwas zu bezahlen. Ich habe im Supermarkt aber nicht nachgefragt, ob das möglich ist.

Rollenspielszene. Wir sind weiterhin im Zug unterwegs. Cinnamon will sich an ihr etwas einfältiges Gegenstück aus der anderen Band heranmachen (Jasmin). Unter Anderem unterhalten sich die beiden über Cracker und Anis, die sich zu mögen scheinen, aber es nicht übermäßig eilig haben, diese Beziehung voran zu treiben.

Cin: „Die beiden haben Chemie.“ – Jasmin: „Ich verstehe nichts von Chemie. Aber die beiden würden ein süßes Paar abgeben.“

Rollenspielszene. Wir haben den Druiden Soris aufgegabelt und sind knapp einer wütenden Horde Goblins mit Vuvuzelas entkommen. Wir sind auch einigen Hobgoblins ausgewichen und haben die Wilde Jagd zumindest für diese Nacht ausgetrickst. Während der Rast in der Nacht nimmt sich Lin'quel der Zauberer ein Buch vor, das der durchgedrehte Magier Gamoril im Geheimen verfasst hat.

Voller Spannung öffnet Lin'quel das Buch. Was wird er darin finden? Halbgare Pläne, die Götter zu stürzen? Ideen, einen Krieg mit den Feenwelten anzufangen? Notizen zur Entwicklung mächtiger Zauber? Ist das Buch vielleicht sogar verflucht, um unerwünschte Leser abzuwehren?

Nichts dergleichen. Das Buch ist, Seite für Seite, voll mit Rezepten. Veganen Rezepten. Gamoril hat auf der ganzen Reise nicht gekocht. Lin'quel ist ratlos.

Ein Kollege von mir hat neulich diesen Screenshot herumgereicht, mit dem Kommentar:

SELECT DISTINCT VORZEICHEN FROM <REDACTED>;

Erinnert ein bisschen an diesen Boolean-Klassiker.

Bei den ganzen schlechten Nachrichten, die durch die Gegend fliegen, ist es zur Abwechslung mal schön, positive Nachrichten zu hören:

Paläontologen haben in Bolivien über 16000 Dinosaurierfußabdrücke entdeckt. Solche Art von Fossilien sind interessant, um mehr über das Verhalten von Dinosauriern zu erfahren, Dinge, die man aus fossilen Knochen nicht herausfindet.

Role playing scene: The witch is dead. The players, the witch's animal familiars are cute woodlands animals and out for revenge. Fox the dog, Witty the Owl and a magpie named Tax.

In the local village, some kind of winter celebration takes place. To make it easier for Fox to sniff out where the witch hunter lives, Tax steals a shiny gold coin from a local merchant. A small commotion and a sizeable crowd is following Tax. He cries out in triumph:

Haha! I'm Tax the Rich!

Rollenspielszene: Wir sind jetzt mit dem Zug unterwegs und versuchen, mit der anderen Band klarzukommen. Fiffi (geschrieben: ΦΦ), der Lead Singer mit den Ratten, spricht mit seinem Gegenstück aus der anderen Band: Kiki, Lead Rapper mit einem Wiesel.

Kiki lässt Fiffi das Wiesel streicheln. Das Wiesel gibt Fiffi einen mörderischen Blick, beißt aber nicht und wehrt sich auch nicht auf eine andere Weise. Kiki:

Der beißt immer erst beim zweiten Mal, nachdem er das Vertrauen gewonnen hat.

Auf die Frage, wie Kiki an das Wiesel gekommen ist, erzählt Kiki die folgende Geschichte.

Ich habe getrunken und musste mich übergeben. Dabei habe ich in einer Mülltonne das Wiesel gefunden. Ich habe es mit nach Hause genommen. Mein Freund sagte: „Das Ding kommt nicht in unser Bett“. Ich sagte: „Das Ding kommt in unser Bett“. Mein Freund sagte: „Wenn das Wiesel bleibt, gehe ich“. Also habe ich angefangen, seine Sachen zu packen.

Fiffi merkt an, dass es schon ungewöhnlich ist, den Freund rauszuwerfen für ein Wiesel, das man gerade erst gefunden hat. Kiki:

Wir sind Seelenverwandte.

Fiffi denkt ein bisschen besorgt an den Kommentar mit dem Vertrauen und dem Beißen zurück. Kiki wird er so schnell nicht vertrauen.

Der Advent of Code (AoC) ist wieder da. Ab diesem Jahr, wie ich schon vor ein paar Wochen geschrieben habe nur 12 Tage.

Für die, die es nicht wissen: Der Advent of Code ist ein Adventskalender mit Programmierpuzzeln. Im Rahmen einer Hintergrundgeschichte, die oft die abstrusen Handlungen der Weihnachtselfen behandelt, gibt es jeden Tag zwei Puzzle, wobei das zweite erst freigeschaltet wird, wenn man das erste gelöst hat. Das zweite Rätsel ist in der Regel eine Variation des ersten Rätsels. Man kriegt einen Rätselinput (meist in Form einer Textdatei) und muss dem Rätsel entsprechend einen Ausgabewert für diesen Input erzeugen.

Wie man das macht, ist egal. Von Hand, durch Programmieren (in welcher Sprache auch immer) oder was auch immer man für sinnvoll hält. Ich habe früher schon Artikel zum Advent of Code geschrieben, in denen ich das noch näher beschreibe.

Die Geschichte dieses Jahr ist, dass man die Weihnachtsdekorationen für den Nordpol machen muss, während einem das neue Projektmanagement der Elfen im Weg steht. Könnte also interessant werden.

Wie immer gibt es auch einen Haufen Leute, die sich künstlerisch vom AoC inspirieren lassen. Ein Beispiel sind die GIF-Animationen der Rätsellösungen. Ich hoffe auch, dass Gary Grady seine täglichen Comics zum AoC veröffentlicht.

Egal ob ihr Programmieranfänger oder erfahrener Softwareentwickler seid: Der AoC kann viel Spaß machen. Anfangs sind die Rätsel meist einfacher, am Ende tendenziell schwieriger, teilweise sind wirklich harte Nüsse dabei. Kurz: Es ist für alle was dabei.

Ach ja: meine Lösungen (in Rust) habe ich auch dieses Jahr wieder auf github veröffentlicht.

Nachdem mir bei meinem letzten Post mit Podcastempfehlungen die Energie ausgegangen ist, habe ich versprochen, dass noch ein weiterer Post mit Empfehlungen kommt. Hier sind sie:

Digitale Anomalien

Was können wir daraus lernen?

Digitale Anomalien ist ein Podcast von Wolfgang Schoch, der ich mit Fehlern, Problemen und Katasrophen beschäftigt, die auf die eine oder andere Art mit oder durch Computer ausgelöst wurden (mit ein paar Ausnahmeepisoden, die sich mit nicht-Computer-Themen beschäfigen).

Wolfgang erklärt hierbei sehr verständlich, was technisch passiert ist. Ein bisschen zu verständlich für einen Informatiker, aber damit auch verständlich für nicht-Informatiker. Er macht sich nicht über die Fehler, die die beteiligten Menschen gemacht haben, lustig, scheut aber auch nicht davor zurück, diese Fehler zu benennen.

Was mir besonders gefällt: Am Ende kommt immer eine Diskussion, was man aus dem Vorfall lernen kann und was man beachten sollte, um solche Fehler nicht zu wiederholen. Denn menschliche Fehler passieren immer, der Trick ist, ein System so zu bauen, dass menschliche Fehler keine Katastrophe auslösen können.

Auf Distanz

Auf Distanz ist Podcast über Astronomie und Raumfahrt von Lars Naber. Er behandelt hier verschiedene Themen aus Astronomie und Raumfahrt und spricht hier auch oft mit Wissenschaftler_innen, Ingenieur_innen, Astronom_innen und anderen Menschen, die direkt in dem Gebiet arbeiten.

Eons: Surviving Deep Time

Eons: Surviving Deep Time ist ein Podcast-Spinoff des Youtube-Kanals PBS Eons. Der Podcast ist englischsprachig, und es unterhalten sich jeweils zwei Paläontologen darüber, ob man in einem bestimmten Zeitalter auf der Erde überleben könnte, und die Probleme, die sich stellen. Zum Beispiel, wenn es noch keine Landpflanzen gibt, aus denen man Feuer oder Werkzeuge machen kann. Oder der Sauerstoffgehalt der Luft niedriger ist als heute. Oder natürlich, ob es gefährliche Raubtiere gibt.

Soweit ich weiß ist der Podcast abgeschlossen und es kommen keine weiteren Episoden, aber die bestehenden Episoden sind es wert, gehört zu werden.

Dungeons and Daddies

Not a BDSM-Podcast

Dungeons and Daddies ist die Aufzeichnung einer Rollenspielrunde, in der die Spieler Väter aus unserer Welt spielen, deren Söhne in den Forgotten Realms (oder einer sehr frei interpretierten Version davon) entführt wurden und die die Väter jetzt retten wollen.

Ein gut gemachter Rollenspiel-Podcast mit viel schwarzem Humor.

Daniel and Kelly's Extraordinary Universe

I study parasites and space.

Ich habe Daniel and Kelly's Extraordinary Universe neulich schon in einem Post über den Revolutions-Podcast erwähnt. Ein Podcast, der sich mit der Erklärung verschiedener Wissenschaftlicher Themen befasst, und an vielen Stellen über häufige Missinterpretation aufklärt.

Liebesgeschichte

Liebesgeschichte ist ein Podcast von Franziska Singer, der sich mit der Geschichte von Liebe, Sexualität, Fetischen und ähnlichen auseinandersetzt. Von der Antike bis zur Gegenwart, von China bis nach Europa. Es ist faszinierend, wie viel über die Zeit und die Kulturen gleich ist, aber auch, wie viel anders ist und Sachen, die uns selbstverständlich erscheinen (Küsse) in manchen Kulturen völlig unbekannt waren.