ConfuSomu / Twilight Sparkle

Ce blog a désormais un flux Web

2025-10-07T15:30:00-04:00

La fin de semaine dernière, j'ai implanté un flux Atom sur mon site web. Atom est une norme similaire à RSS qui permet la syndication de contenu. En d'autre mots, elle permet de vérifier automatiquement les mises à jour présentes sur un site web sans devoir s'y rendre manuellement. Pour le moment, mon flux Atom contient seulement les billets de blogue, mais il devrait être facilement extensible pour prendre en charge d'autre parties de mon site qui vont utiliser mon moteur de rendu de blog.

Si vous voulez vous abonner à mon site, n'hésitez pas à ajouter ce lien à votre agr é gateur de flux préféré. Le flux est aussi présenté dans les endroits attendus par ce genre de logiciel, donc vous pouvez aussi coller le nom de domaine et le logiciel va trouver le flux automatiquement. Si vous n'avez pas de lecteur de flux, voici une petite liste pour débuter vos recherches : NetNewsWire, miniflux, votre logiciel de messagerie (Thunderbird, GNOME Evolution), Akregator, NewsFlash.

Le flux Atom est généré par du PHP écrit à la main, comme le reste du site. Ce n'est pas le meilleur PHP, mais ça fonctionne et le flux Atom 1.0 est certifi é valide ! Le flux est construit manuellement dans un panneau d'administration qui restera secret. Il me permet aussi de vérifier que tout a été fait correctement et qu'il n'y a pas d'erreurs (même si j'échappe tout le texte correctement pour avoir un fichier XML valide). À moment donné, je vais mettre une minuterie systemd en place pour mettre le flux à jour automatiquement. Cette mise à jour sera faite plusieurs fois par jour parce que mon moteur de blogue (fait à la main) prend en charge la programmation de billets.

En tout cas, attendez-vous à un billet de blogue plus long cette semaine. À plus !

This blog now has a web feed

2025-10-07T15:30:00-04:00

Last weekend I have implemented an Atom feed for my website. Atom is a standard similar to RSS that allows users to check for updates on a website without having to manually visit it, which is called web syndication. For the moment, it only processes blog posts, but it should be easily extensible to work with other parts of the website that will use my custom blogging engine/renderer.

If you want to subscribe to the Atom feed, add this link to your favourite feed reader. The feed is also exposed in the expected locations, so you can alternatively just paste the domain name into your feed reader and it will find the feed and know what to do with it. If you don't have any feed reader, here is a small list of ones to start your search: NetNewsWire, miniflux, your e-mail client (Thunderbird, GNOME Evolution, etc.), Akregator, NewsFlash.

The Atom feed generator is hand-written PHP like the rest of this website. It's not the best PHP, but it works and gives a certified valid Atom 1.0 feed! The feed is manually generated in an admin panel that shall stay secret, which allows me to manually verify that everything was generated properly (not that it shouldn't be, as I correctly escape all text to ensure well-formed XML). I will eventually set up a systemd timer to automatically generate the feed multiple times per day to work with programmed posts (yes, my blog engine supports that).

Anyways, stay tuned for a bigger blog post later this week. See you then!

Article de test

2024-09-14T00:00:00-04:00

Bienvenue

Ceci est un petit article qui présente mon blogue à tout le monde. Le blogue que vous lisez est écrit à la main en PHP! Certes, il est peut-être un peu basique, surtout en cas d'erreur, mais comme Applejack dit : ça fait un travail honnête. J'ai entièrement implementé ce blogue en me connectant à mon serveur par SSH et en modifiant les fichiers PHP dans Vim.

Comme vous pouvez voir, ce blogue est bilingual (ou bilingue). Cela dépend de l'en-tête Accept-Language envoyé par votre furteur web. Vous pouvez aussi écraser la langue choisie avec le paramètre l=[langue ici] dans l'URL, où "[langue ici]" est soit "fr" ou "en".

Amusatz ! 😉 (c'est de l'occitan)

Test Article

2024-09-14T00:00:00-04:00

The Welcome

This is a little article that introduces my blog to everypony. The blog you are currently looking at is written in hoof-made PHP, locally grown in Equestria! It might be a little bare-bones, perhaps on the error checking side of things, but it does—as Applejack nicely puts it—hard, honest work. I wrote all of it by SSHing into my server and editing the PHP files there.

Also, this blog is bilingue, depending on the Accept-Language header that is sent by your browser. You can also overwrite the language with the l=[some language] query parameter, where "[some language]" is either "fr" or "en". Amusez-vous !

Check out the french version! I will eventually add more languages to the mix, at least for the UI…

Génération d'un bouton 88×31

2025-10-16T10:00:00-04:00

Depuis la création de mon site web, il y a quelques années, j'ai été inspiré·e par les boutons 88×31 faits par les autres. J'avais toujours envie d'en créer un. Finalement, il y a quelques semaines¹, après mainte procrastination, j'ai trouvé que trop c'est trop et je me suis mis·e à l'ouvrage.

Pour créer un bouton 88×31, on se sert généralement d'un logiciel d'édition de pixel art (ou « art du pixel », selon l'OQLF:P). Dans le passé, j'en ai utilisé quelques uns, mais aucun d'entre eux n'a vraiment captivé mon attention, sûrement parce que je ne suis pas vraiment dans la création d'art du pixel (même si j'aime le style). À cause de cela, je remettais mon bouton à plus tard pendant bien trop longtemps. Mais il fallait le faire un jour, donc, j'ai choisi un logiciel avec lequel j'avais plus d'expérience et qui peux faire du pixel art. Je me suis déjà servi·e de GIMP dans le passé pour créer des icônes et des exemples d'interfaces utilisateurs au pixel près, donc je savais à quoi m'attendre avec cet outil. Avec un logiciel pour faire du pixel art, nous pouvons finalement débuter. Place à la création artistique !

J'avais en tête l'idée de créer un bouton 88×31 statique, sans aucune animation. Cela m'aurais permis de le finir rapidement. Mais, tout au long de mes premières esquisses, je commençais à être inspiré·e et je voyais l'intérêt de le rendre animé, pour y mettre plus de variété. Le programme GIMP a une fonction pour exporter l'image en tant qu'animation GIF, en utilisant chaque calque du projet comme image de l'animation, donc je pensais me servir de cette fonction. Par contre, si un utilisateur se sert de la fonction groupement de calques, il faut les combiner manuellement, ce qui devient fastidieux rapidement, donc je n'étais pas sûr·e à 100% si l'animation serait le meilleur choix. Il y a des scripts pour rendre le processus plus rapide mais c'est plus compliqué à installer. En explorant les fonctions artistiques du logiciel, je suis tombé·e sur le filtre « Onduler » qui m'a entièrement converti·e. Là, j'étais sûr·e de vouloir faire une animation avec cet effet trop cool. Je pouvais plus y résister !

La fenêtre du filtre Onduler dans GIMP 3

Cependant, il fallait que je change l'organisation de mon projet. Les calques dans GIMP ne me permettent pas d'animer un filtre parce qu'il modifie l'image originale. De plus, GIMP est un éditeur d'image, pas de vidéo, donc il n'a pas de ligne de temps qui permettraient de transformer l'image sur une période donnée et de faire une animation. Ce n'est pas le bon outil pour la job. Pendant un moment, j'ai pensé utiliser Kdenlive, mais même en détournant l'outil, je pense qu'il n'aurait pas fait un super travail avec du pixel art. C'est ainsi qu'il faut passer du côté artistique au côté informatique. On n'a pas le choix.

Quelques calques composant mon bouton. Notez l'usage de groupes de calques.

Un GEGL peu connu

Il devait avoir un moyen d'appeler ces filtres en dehors de GIMP, n'est-ce pas ? C'est un programme GNU et c'est du logiciel libre ; ça doit être compatible avec d'autres logiciels. J'ai découvert que GIMP a un mode batch, qui permet d'exécuter des commandes sans interaction, et prend en charge le scriptage avec des scripts écrits en Scheme (un dialecte du langage Lisp). J'ai voulu faire un petit script Scheme qui prend une image d'entrée, la transforme avec l'effet Onduler et ressort une image finale. Malheureusement, je ne suis pas arrivé·e très loin… je n'ai pas réussi à trouver l'effet ni dans le navigateur de greffons ni dans le navigateur de procédures. Mais il devait bien être quelque part. Où était cet effet ? Est-ce qu'on peut l'appeler en dehors de GIMP ? Sinon, quel est le code qui compose son implémentation ?

Il fallait élucider ce mystère… naturellement, en regardant dans le code source de GIMP ! Bon, téléchargeons le tarball et utilisons grep pour en apprendre plus ! La fonction quickfixes de l'éditeur texte Vim est bien pratique pour trouver des correspondances. En tout cas, le plus grand indice que j'ai trouvé était que "Onduler" s'accorde avec "gegl:ripple". Il n'y avait rien d'autre dans l'archive "gimp". Par contre, que signifie "gegl" ? En fait, les filtres de GIMP sont implémentés ailleurs : dans la librairie GEGL ou Generic Graphics Library. Il fallait regarder là-bas ! Après un peu plus de recherche, cette fois dans le dépôt de "gegl", j'ai trouvé la clef : l'implémentation de notre effet se trouve dans le fichier operations/common-gpl3+/ripple.c Maintenant, qu'allons-nous faire avec ça ?

Voici des horreurs sortant droit de mon terminal:

$ ffmpeg -loop 1 -i To\ ondulate/username.png -t 5 -f lavfi -i nullsrc=s=88x31,lutrgb=128:128:128 -f lavfi -i nullsrc=s=88x31,geq='r=r(X+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*sin(0),Y+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*cos(0)):g=g(X+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*sin(0),Y+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*cos(0)):b=b(X+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*sin(0),Y+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*cos(0))' -lavfi '[0][1][2]displace' test.gif

(prenez en note que lavfi est équivalant à filter_complex)

Ne sachant rien de mieux, j'ai décidé de recréer le filtre Onduler comme filtre geq (équation graphique) dans l'utilitaire ffmpeg. Pas de bol : le travail était bien plus important qu'attendu et je n'avançais pas. C'était un cul-de-sac et geq n'est pas du tout approprié pour faire ça.

Pourtant, j'allais pas abandonner aussi rapidement : après plus de recherche, j'ai appris que les effets gegl peuvent être exécutés directement dans le terminal. Finalement, nous nous approchions de quelque chose. Tout ce qu'il fallait faire était de créer une petite boucle dans bash pour faire varier la période en fonction du temps : gegl -i To\ ondulate/username.png -o test.png -- gegl:ripple amplitude=6 period=1000 phi=0 angle=0 sampler-type=nearest wave-type=triangle abyss-policy=none tileable=no

Il restait toujours la question de comment combiner la séquence d'images pour faire une animation.

Dîtes bonjour à ffmpeg

Concaténer des images pour faire des vidéos, c'est vraiment le travail pour ffmpeg. Par contre, il faut bien que toutes les images d'entrée aient les mêmes dimensions, ce qui n'est pas le cas avec les images de sortie de gegl pour une raison qui me reste inconnue. Ainsi, je les centre avec ImageMagick pour être sûr·e qu'elles soient 88×31 pixels comme voulu. Aussi, il faut que la vidéo de sortie soit sans perte et elle doit conserver la transparence des fichiers d'entrée. Donc, on copie les images en tant que PNG, en étant sûr·e que le ratio des pixels reste le même (parce qu'aussi certaines images avaient un ratio différent, pour une raison que je n'ai pas élucidé): ffmpeg -hide_banner -framerate "$fps" -i frame%04d.png -filter_complex "[0:v:0]scale=88:31:force_original_aspect_ratio=disable,setsar=sar=1,setdar=dar=88/31[v]" -map "[v]" -c:v png -pix_fmt rgba64be -y out.mkv (oui, réenconder un PNG en tant que PNG nécessite plus de temps système, mais ça reste tout de même une goutte d'eau lors de la génération de l'image finale). Le script complet est disponible ici.

Une des images de l'effet Onduler et l'animation finale. Notez la transparence présente sur l'image (mais la vidéo n'est pas transparente à cause du réencodage).

La procédure ci-dessus applique l'effet Onduler à une image et génère une vidéo, mais ce n'est pas assez pour faire un bouton 88×31. Il faut enchaîner des images pour faire quelque chose de substantiel. Parce que l'effet est seulement appliqué à l'avant-plan, il nous faut aussi une image d'arrière-plan. Pour faire plus simple et garder le tout lisible, j'ai préféré un arrière-plan statique. ffmpeg nous donne les outils pour combiner des fichiers vidéos et arriver au résultat escompté. Il nous faut seulement un moyen d'orchestrer le tout (mais pas avec Kubernetes!) et de faire plusieurs appels à ffmpeg avec différentes images pour générer programmatiquement un bouton. Il est trop tard maintenant, car sans nous apercevoir, nous sommes rendus trop profondément dans le gouffre de l'ordinateur. On ne va pas en ressortir immédiatement…

Les fichiers Make

Les fichiers Make (ou Makefiles en anglais) peuvent sembler compliqués et opaques, mais ils ne sont pas si complexes et difficiles à apprendre. Avant ce projet, j'étais presque entièrement ignorant·e ! Je ne vais pas trop aller en détails sur leur fonctionnement, mais je vous suggère fortement de lire ce superbe tutoriel (en anglais). En somme, ils fonctionne en suivant le principe de dépendances qui sont construites après leurs dépendants et ce suivant certaines règles prédéfinies. Cela rend le processus de compilation très efficace car seul un sous-ensemble de fichiers sont reconstruits, soit ceux qui ont été modifiés depuis la dernière compilation.

J'ai commencé avec une règle pour générer des ondulations :

%.ond.mkv: ondulate/%.png ripple
	./ripple "$<" 500 10 $(duree_ondulation) $(ips) $(duree_statique) "build/$@" 6

Cette règle fonctionne grâce aux wildcards qui nous permettent d'éviter de devoir coder en dur les noms de fichiers d'entrée et de sortie. Le nom à gauche des deux-points est le nom de la cible (sortie) et ceux à droite sont les dépendances de la cible. Ces dépendances peuvent être des noms de fichiers ou d'autres cibles (parce que les cibles génèrent en général des fichiers portant le même nom que la cible). Dans ce cas, nous cherchons des fichiers PNG définis par une autre cible présents dans le répertoire ondulate et le script ripple qui génère notre animation, expliqué dans la session précédente. Suivant les règles de Make, la cible %.ond.mkv sera seulement reconstruite si ses dépendances sont plus récentes que le fichier généré par la cible. En somme, toute modification aux fichiers sources ou du script ripple entraînera la reconstruction de la vidéo d'ondulation. Notez que $< et $@ sont des variables automatiques qui sont remplacées par le nom de la première dépendance et par le nom de la cible. Les autres variables, du type $(nom_variable), ont étés manuellement déclarées.

De la même manière, j'ai crée d'autres cibles Make qui génèrent d'autres vidéos d'avant-plan : %.sta.mkv pour des images statiques (sans ondulation), wallpaper.mkv pour l'image d'arrière-plan et %.qr.mkv pour des images statiques contenant un code QR (aussi généré dans le fichier Make. Les définitions complètes sont disponibles ici.

L'image d'arrière-plan, une photo que j'ai prise d'un Euonymus fortunei.

Nous pouvons ensuite utiliser ces règles pour concaténer les animations :

concat.mkv: username.ond.mkv ponies.ond.mkv themes_en.sta.mkv themes_fr.sta.mkv multilingue.sta.mkv scannez.qr.mkv
	$(ffmpeg) $(addprefix -i ,$+) -filter_complex "concat=n=$(nombre_banieres):v=1:a=0 [outv]" -map "[outv]" -c:v png -pix_fmt rgba64be build/concat.mkv

La cible concat.mkv dépend de plusieurs animations avant d'appeler ffmpeg. $(addprefix -i ,$+) ajoute « -i » comme préfixe au nom de chaque dépendance pour qu'elles deviennent des fichiers d'entrée. Le filtre concat travaille implicitement sur les fichiers d'entrée, dans le même ordre que ce qui a été spécifié sur la ligne de commande. Par contre, il faut quand même spécifier le nombre de flux vidéos à traiter.

Finalement, on peux combiner le fichier concat.mkv et l'arrière-plan pour créer le bouton 88×31 final :

layers.mkv: concat.mkv wallpaper.mkv
	$(ffmpeg) -i build/wallpaper.mkv -i build/concat.mkv -filter_complex "[0:v:0][1:v:0] overlay=format=rgb:eof_action=repeat" -c:v png -framerate $(ips) build/layers.mkv

build/button.apng: layers.mkv
	$(ffmpeg) -i build/layers.mkv -framerate $(ips) -plays 0 -final_delay 0.0 build/button.apng

Il faut être sûr que les vidéos soient superposées dans l'espace couleur RVB à la place de l'espace couleur YUV pour éviter des dégradations dans les couleurs. Par exemple, les pixels violets ou rouge qui sont superposés sur les parties claires de l'image perdent leur couleur comme s'ils étaient « mangés » par l'arrière-plan couleur crème. Aussi, nous ne voulons pas que l'animation finisse prématurément lorsque l'arrière-plan fini, donc on utilise l'option eof_action=repeat. En tout cas, après ces dernières difficultés, notre fichier Make crée le bouton ci-dessous !

Feel free to put my 88x31 button on your website!
If you want to trade buttons, just send me a message and I'll add yours to my website.

Source code

View HTML embed


        <a href="https://twilightsparkle.space/">
          <img alt="88x31 button presenting ConfuSomu's website" style="image-rendering: pixelated;" src="https://twilightsparkle.space/btn/button1.apng">
        </a>

N.B: Note that you may copy the image onto your website. The image displayed above has longer alt text than the one in this example HTML code.

Et c'est tout ! Avec ffmpeg et les fichiers Make, nous pouvons générer des boutons 88×31. N'hésitez pas à générer les vôtres avec le fichier Make et le script partagé. C'est pas si compliqué après tout et c'est du fun !

Néanmoins, je n'ai pas fini. Je vois des choses que je pourrais faire dans le futur : il faudrait pouvoir changer d'image d'arrière-plan et appliquer un effet de transition, comme l'effet Onduler, un simple basculement ou un effet de fondu, à toute la surface du bouton, pas seulement l'avant-plan. Il faudrait aussi ajouter plus d'effets et peut-être aussi pouvoir inclure des vidéos dans le bouton. Lorsque je ferait une second version, j'implanterai certains de ces effets.

PS: Et oui, je devrais traduire mon site web en plus de langues, pour respecter ce qui est écrit sur mon bouton :P

¹: Malheureusement, j'étais malade, donc ça fait plutôt un mois maintenant ↸

Generating a 88×31 button

2025-10-16T10:00:00-04:00

Since creating my website, about two years ago, I have been inspired by 88×31 buttons made by other people and always wanted to make one. Finally, a few weeks ago¹, I decided that i should finally stop procrastinating and simply create one.

To make a tiny 88×31 button, you generally make use of a pixel art editor. I had dabbled with few of them in the past, but I never spent enough time with them to find one that fits me, maybe because I am not very much into pixel art creation (even though i like the style). Due to this, I put off making a button to later, for a long time. But I had to create it someday, thus, I turned to tools with which I already had some experience which may help me create pixel art. I already used GIMP to make icons and pixel precise mock-ups, so i knew what to expect with that tool. Thus, we can finally start! yay!

I was first thinking of creating a static 88×31 button… then slowly felt like adding more frames, and make it animated, to allow more variety to sweep in. GIMP has a GIF exporter that allows you to export each layer as a separate frame, so it was only natural to consider it. But, if you have layer groups, they need to be manually combined which quickly becomes tedious (or you can use a script to do that, but it's more involved), so I was still on the fence. As I explored GIMP's artistic options, I quickly became fully sold by the idea of making it animated after finding the ripple effect in GIMP's filter library. Adding a ripple effect between pages of my button was too hard to resist!

The ripple effect dialog in GIMP 3 (i prefer to have my computers in non-english)

This brought up questions on how to organize my project: i couldn't continue with layer groups, as the animated ripple effect works on an existing image layer and modifies it. Furthermore, GIMP is an image editor, it doesn't have a timeline, so I cannot transform an image over a period of time and have any kind of animation. It is not the right tool for the job for that kind of stuff. For a second, I had even considered using Kdenlive, but, even by abusing the tool, I don't think that it would do a good job with pixel art. So, we necessarily have to go from the artsy side to the computer side.

Some of the layers present on my button, notice the use of layer groups

Little known GEGL

There had to be a way to call these filters from outside of GIMP, right? It's GNU and open-source software; it has to be composable with other tools. I read about GIMP having a batch mode for executing commands headless and scripting support, with scripts written in Scheme (a dialect of Lisp), and wanted to make a small script that would take an input image, transform it with the ripple effect and spit out an output image. Sadly, I didn't get very far… I wasn't able to find the ripple effect anywhere in the procedure and the plug-in browsers, but it must still be somewhere. Where was that effect? Can we call it outside of GIMP? If not, what function does it apply on the pixels to generate these effects?

I had to elucidate that mystery… naturally, by looking around in the source code of GIMP! Well, downloading the tarball and grep it is then! Vim's quickfixes feature was handy in following found matches. Anyways, after figuring out to which string "Onduler" maps to, the most I found was "gegl:ripple". There was nothing else of interest in the "gimp" tarball. What is this "gegl" thing? Apparently, filters in GIMP are split into another library: the Generic Graphics Library, or GEGL. We had to look there! After doing a little more grepping, this time, in the "gegl" repository, I finally found it: the implementation of our effect is in the operations/common-gpl3+/ripple.c file! Now, what do we do with this?

Look at these horrors from my terminal history:

$ ffmpeg -loop 1 -i To\ ondulate/username.png -t 5 -f lavfi -i nullsrc=s=88x31,lutrgb=128:128:128 -f lavfi -i nullsrc=s=88x31,geq='r=r(X+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*sin(0),Y+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*cos(0)):g=g(X+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*sin(0),Y+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*cos(0)):b=b(X+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*sin(0),Y+(6*(abs((((((X*cos(0)-Y*sin(0))+(1000-T*2)*3/4)//(1000-T*2))/(1000-T*2))*4)-2)-1))*cos(0))' -lavfi '[0][1][2]displace' test.gif

(note that lavfi is equivalent to filter_complex)

Not knowing any better, I was remaking the ripple effect as a geq filter in ffmpeg, but didn't have any luck: the labour was too unwieldy and i wasn't making much progress. It was a dead end and clearly not suited to my application.

Nevertheless, i did not give up: after some more searching, I learned that gegl effects can be simply ran directly from the command line. Finally, we were starting to go somewhere, all what's needed is to make a small bash loop to vary the period over time: gegl -i To\ ondulate/username.png -o test.png -- gegl:ripple amplitude=6 period=1000 phi=0 angle=0 sampler-type=nearest wave-type=triangle abyss-policy=none tileable=no

We then have to figure out a way to collate the images together and make an animation that has multiple pages with different information. One wavy effect won't cut it…

Behold ffmpeg

Collating images to make a video, that's the work for ffmpeg! Though, when passing a sequence of image files (with -i frame%04d.png), they all need to have the same dimensions and I noticed that this isn't the case with the output files of gegl for some reason. Thus, I centre them with ImageMagick, making sure that they are all 88×31 as expected. Also, the output video has to be lossless and preserve transparency (i had some trouble with ImageMagick for a moment), so we copy the frames as PNG, making sure that the pixel aspect ratio and display aspect ratios have expected values (as some of the images managed to have different aspect ratios): ffmpeg -hide_banner -framerate "$fps" -i frame%04d.png -filter_complex "[0:v:0]scale=88:31:force_original_aspect_ratio=disable,setsar=sar=1,setdar=dar=88/31[v]" -map "[v]" -c:v png -pix_fmt rgba64be -y out.mkv (yes, re-encoding a PNG as a PNG has overhead, but it's completely negligible in the whole build process). The complete script is available right here.

One of the frames of the ripple and the resulting animation. Notice the transparency (the video may not be transparent due to re-encoding)

The procedure above applies a ripple effect to an image and gives us a video file, but this is not enough to make a button. We need more images and we need to chain them together to make something complete. As I only apply the effect to the foreground layer, we must not forget a backdrop to wrap everything up. To simplify the work and make sure that everything stays readable, I opted for a static background image. ffmpeg gives us the tools to combine video files and make what we want. We just need to orchestrate (not with Kubernetes!) multiple calls to ffmpeg with different image files to programatically generate a 88×31 button. It's too late now, we are too deep in the depths of the computer, we cannot step back anymore…

Makefiles

Makefiles may sound daunting, opaque and scary at first, but once your start understanding how they work, they aren't that bad. Before this project, I knew nearly nothing about them! I won't go much into details here and strongly recommend reading this great tutorial. I will just explain that they work with the concept of dependencies that have to be built following certain rules before building their dependents. This makes the build process very efficient as only a subset of files — those that have been modified since the last build — are rebuilt, instead of starting from scratch every time.

I started by writing a rule to generate ripple animations:

%.ond.mkv: ondulate/%.png ripple
	./ripple "$<" 500 10 $(ripple_time) $(fps) $(still_time) "build/$@" 6

This rule works with wildcards which avoids us from having to hard code input and output file names. The name on the left hand side of the colon is the target name (output) and on the right we have the dependencies of that target, which may be files or the names of other targets (in that case, these other targets will generate output files that have the same name). In our case, we look for the PNG specified by another target under the ondulate directory and at the ripple script, which generates our ripple, as seen in the previous section. Following the rules of Make, the %.ond.mkv target would only be rebuilt if its dependencies are newer than the output file of the target. This makes sure that any modifications of the original files or of the ripple script results in rebuilding of the ripple video. Note that $< and $@ are automatic variables that are replaced with the first dependency and the target name respectively. The other variables, of the form $(var_name), have been manually declared.

In a similar fashion, i created other Make targets that generate "animations": %.sta.mkv for static images (with no ripple), wallpaper.mkv for the background image and %.qr.mkv for static images that embed a QR Code (also generated in the Makefile). The complete definitions are available here, but note that the latter one should probably be divided into multiple smaller rules to avoid repetition and be more efficient.

The background image, a picture I took of an Euonymus fortunei on a muted wall

We can then build on these rules to concatenate, or string together, these animations:

concat.mkv: username.ond.mkv ponies.ond.mkv themes_en.sta.mkv themes_fr.sta.mkv multilingue.sta.mkv scannez.qr.mkv
	$(ffmpeg) $(addprefix -i ,$+) -filter_complex "concat=n=$(num_banners):v=1:a=0 [outv]" -map "[outv]" -c:v png -pix_fmt rgba64be build/concat.mkv

This "concat.mkv" target depends on multiple animation targets before calling ffmpeg. The $(addprefix -i ,$+) prefixes each dependency with "-i " to make it an input file to ffmpeg. The concat filter implicitly operates on the input video streams, in order, but we still have to specify the number of input streams.

Finally, we can combine the concat.mkv file and the wallpaper to compose the final 88×31 button:

layers.mkv: concat.mkv wallpaper.mkv
	$(ffmpeg) -i build/wallpaper.mkv -i build/concat.mkv -filter_complex "[0:v:0][1:v:0] overlay=format=rgb:eof_action=repeat" -c:v png -framerate $(fps) build/layers.mkv

build/button.apng: layers.mkv
	$(ffmpeg) -i build/layers.mkv -framerate $(fps) -plays 0 -final_delay 0.0 build/button.apng

We have to make sure that the videos are overlayed in the RGB colourspace instead of using the YUV colourspace, as this creates perceptual degradations. For instance, purple or red pixels that overlay the light parts of the wallpaper lose their colour as if it were partially "eaten" by the cream colour in the background. We also don't want the button animation to end prematurely if the video ends, so we use the eof_action=repeat option. Anyways, after these hurdles, our Makefile creates the final button below!!

Feel free to put my 88x31 button on your website!
If you want to trade buttons, just send me a message and I'll add yours to my website.

Source code

View HTML embed


        <a href="https://twilightsparkle.space/">
          <img alt="88x31 button presenting ConfuSomu's website" style="image-rendering: pixelated;" src="https://twilightsparkle.space/btn/button1.apng">
        </a>

N.B: Note that you may copy the image onto your website. The image displayed above has longer alt text than the one in this example HTML code.

And we are done! Using ffmpeg and Makefiles, we can generate a 88×31 button. Feel free to make your own buttons using the Makefile and the script shared, it's not too difficult once we got going, and it's fun!

Nevertheless, I already have ideas for a few improvements for the future: it should be possible to change the background image over time and apply a transition effect — like the ripple effect, a basic change of frame or a fade effect — to the whole button instead of just the foreground. More effects should also be added, maybe even being able to include downscaled videos in the button. When I will make a second version, I will implement some of these effects.

PS: And yes, I shall translate my website into more languages, as to be faithful to my button! :P

¹: Sadly, I was sick while writing this, so it's more like a month now ↸