Martin Jude
Toutes les ressources
Webnov. 2026

Studio ASCII

Transformez une image, une vidéo ou un texte en caractères, en pixels ou en mots, empilez des calques, animez chaque réglage et exportez en PNG, JPEG, SVG ou séquence d'images. Un seul fichier HTML, hors ligne.

martinjude.fr/freebies/ascii-studio
ascii-studio.htmlTélécharger
<!doctype html>
<!--
  Studio ASCII — édition fichier unique
  Martin Jude · https://martinjude.fr/ascii

  Ouvrez ce fichier dans un navigateur récent (Chrome, Edge, Firefox, Safari) :
  il fonctionne hors ligne, sans installation, et ne fait aucune requête réseau.
  Les images, vidéos et polices que vous y déposez restent sur votre machine.

  Ce qu'il fait
  - Transforme une image, une vidéo ou un texte en caractères, en pixels
    (vos propres motifs SVG, PNG ou JPEG compris) ou en étiquettes de mots.
  - Empile des calques : déplacez-les et redimensionnez-les sur le canevas,
    zoomez (Ctrl + molette), déplacez la vue (Espace + glisser).
  - Mode animation : chaque réglage s'anime par clés, sur une timeline.
  - Export PNG, JPEG, SVG, TXT, et séquence d'images en .zip.

  Raccourcis : V sélection · H main · Espace lecture · ← → image par image
  (mode animation) ou déplacement du calque · Ctrl+Z / Ctrl+Maj+Z.

  Libre d'usage, personnel comme commercial. Le code ci-dessous est généré
  (React et Tailwind, minifiés) à partir de celui du portfolio : c'est la même
  interface que la version en ligne.
-->
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Studio ASCII</title>
Notes

Ouvrez le fichier dans votre navigateur : rien à installer, rien n'est envoyé.

Pas envie de télécharger ? La même chose tourne en ligne : Studio ASCII.

01-apercu.png
README.md

Studio ASCII

Un atelier ASCII complet dans un seul fichier HTML. Ouvrez ascii-studio.html dans un navigateur récent (Chrome, Edge, Firefox, Safari) : il fonctionne hors ligne, sans installation, et ne fait aucune requête réseau. Les fichiers que vous déposez restent sur votre machine.

La même version tourne en ligne sur martinjude.fr/ascii.

Démarrer

  1. Glissez une image ou une vidéo sur le canevas (ou collez-la avec Ctrl+V), ou ajoutez un calque + Texte.
  2. Choisissez un style dans l'onglet Styles — Terminal, Matrice, Broderie, Truchet, Étiquettes, Pixel art…
  3. Ajustez à gauche, l'aperçu suit en direct au centre ; exportez à droite.

L'interface

  • À gauche, le calque sélectionné, en onglets :

    Onglet Ce qu'il règle
    Styles Les préréglages, et les vôtres (enregistrés dans ce navigateur, ou en .json)
    Source Le fichier du calque, ou son texte : police (importez la vôtre), graisse, taille, interligne, largeur, hauteur, approche, flou — et une image à la place de n'importe quel caractère ; le cadrage (zoom, décalage)
    Grille Colonnes et lignes (jusqu'à 1 000 chacune, liées ou non), grille régulière ou hexagonale, dispersion
    Rendu Dessiner avec des caractères (ombres, tons moyens, lumières), des pixels ou des mots ; contours
    Image Lecture (luminance, teinte, saturation), luminosité, contraste, gamma, inversion, seuils, tramage
    Couleur Couleurs d'origine, monochrome, une couleur par plage ou dégradé ; opacité de l'encre

  • Au centre, le canevas : sélectionnez un calque, déplacez-le, redimensionnez-le par ses poignées (Maj garde les proportions, Alt depuis le centre). Ctrl + molette pour zoomer, Espace + glisser pour déplacer la vue.

  • À droite : le format et la taille d'export, le fond (uni, dégradé, image ou aucun — il apparaît aussi à travers les zones transparentes d'un PNG), les calques (visibilité, ordre, opacité, fusion) et l'export.

Les seuils décident de la quantité d'ASCII : hors des seuils, la cellule reste vide.

Pixels et motifs

En mode Pixels, chaque niveau de la palette, du plus sombre au plus clair, a un motif (carré, rond, anneau, plus, croix, rond barré, carré pointé, contour, moulinet, demi, quart…) et deux couleurs — ou votre propre image : déposez un SVG, un PNG ou un JPEG sur la ligne. En mode Mots, les mots de votre texte forment des étiquettes colorées par l'image.

Animer

Activez Mode animation en haut à gauche et fixez le nombre d'images et la cadence. Un losange ◇ apparaît devant chaque réglage — position et taille des calques comprises :

  • cliquez-le pour poser une clé à l'image courante ;
  • déplacez la tête de lecture, changez la valeur (ou déplacez le calque) : une nouvelle clé est posée ;
  • dans la timeline, rangée par calque, faites glisser les clés (Maj+clic pour en sélectionner plusieurs), choisissez l'interpolation (linéaire, lissée, maintien), Suppr pour effacer.

Sur une vidéo, la séquence suit la vidéo image par image.

Raccourci Action
V / H Sélection / main
Espace Lecture / pause (maintenu : déplacer la vue)
← → Image précédente / suivante en mode animation, sinon déplace le calque (Maj : par 10)
Ctrl+0 / Ctrl+1 Ajuster / 100 %
Ctrl+Z / Ctrl+Maj+Z Annuler / rétablir
Suppr Supprimer les clés sélectionnées

Exporter

  • PNG (fond transparent possible) et JPEG, à la taille du document, tous les calques visibles.
  • SVG : du vrai texte et de vraies formes, éditables dans Illustrator ou Figma, un groupe par calque.
  • TXT : le calque sélectionné en ASCII brut.
  • En mode animation, séquence d'images (PNG, JPEG ou SVG) dans un .zip, prête pour After Effects ou Premiere Pro.