Retour aux notes

Notes

ASCIImotion : un moteur ASCII dans le navigateur

Quelques choix techniques faits pendant le développement d’ASCIImotion

ASCIImotion : un moteur ASCII dans le navigateur

ASCIImotion : un moteur ASCII dans le navigateur

ASCIImotion transforme des images et des vidéos en caractères. Le traitement se fait directement dans le navigateur, sans envoyer les fichiers sur un serveur.

Afficher une animation sans ralentir la page

Une image ASCII peut contenir plusieurs milliers de caractères. Si chacun devient un élément HTML distinct, le navigateur passe son temps à mettre le DOM à jour.

Nous avons choisi une solution plus directe : chaque frame est construite comme une seule chaîne, puis affichée d’un bloc. On perd la possibilité de manipuler chaque caractère séparément, mais ce n’était pas utile pour cet éditeur.

Ce choix devient particulièrement visible avec la vidéo. À 30 images par seconde, quelques dizaines de millisecondes de retard suffisent pour rendre la lecture irrégulière.

La police change le rendu

Deux polices monospace n’ont pas forcément les mêmes proportions. Une image qui paraît dense dans Consolas peut sembler étirée ou trop claire dans JetBrains Mono.

L’éditeur permet donc d’ajuster la densité et le jeu de caractères. Le contraste entre des signes comme @, #, + ou . compte souvent davantage qu’un réglage graphique complexe.

Garder l’éditeur simple

L’interface sert surtout à importer un média, régler le rendu, vérifier l’animation et exporter le résultat. Nous avons gardé l’état de l’application simple : les frames et l’historique undo/redo reposent sur des snapshots faciles à inspecter.

Le format de sortie a aussi guidé le développement. Une image fixe, un GIF et une vidéo n’imposent pas les mêmes contraintes, mais ils doivent tous partir du même rendu de frame pour éviter les écarts entre l’aperçu et l’export.

ASCIImotion est open source et disponible sur asciimotion.gx2.studio.