Doodle Faces
Générateur procédural de visages au stylo, dans l'esprit du post de
@mannay — encre tremblée sur
papier vieilli, une planche de têtes toutes différentes.
En ligne : https://flocautank.github.io/doodle-faces/
Une graine → toujours le même visage. Sur n'importe quelle machine, pour
toujours. Tu stockes la graine, pas l'image.
- Zéro dépendance, zéro build. Du Canvas 2D standard et des modules ES.
- Site statique : n'importe quel hébergeur de fichiers fait l'affaire.
- Réutilisable ailleurs : génome JSON, export atlas + manifeste, chargeur Godot.
- Presque tout à l'encre, avec de temps en temps une touche de couleur mate.
- 12 espèces : humains, enfants, anciens, elfes, nains, gnomes, orcs, trolls,
gobelins, morts-vivants, démons (avec cornes), hommes-bêtes.
- 17 archétypes (finance bro, punk à chien, hippie, goth, mage, noble, soldat,
clown, détective…) qui biaisent le style.
- Des têtes tournées de trois quarts, orientables en direct à la souris.
- 8 comportements de plume, de la plume fine au crayon de cire.
Lancer en local
Les modules ES exigent un serveur HTTP (file:// est bloqué par le navigateur) :
npx http-server . -p 5180 -c-1
Puis http://localhost:5180.
Héberger
Déjà fait : le dépôt est publié par GitHub Pages depuis main, à la racine.
Un git push suffit à redéployer — la reconstruction prend une petite minute.
git push origin main
gh api repos/flocautank/doodle-faces/pages/builds/latest --jq .status # built ?
GitHub Pages met les fichiers en cache une dizaine de minutes. Pour qu'un
visiteur déjà venu ne se retrouve pas avec d'anciens fichiers,
tools/stamp-assets.mjs colle une empreinte du contenu sur toutes les URL
que la page charge : la CSS, app.js, et chaque import relatif du graphe de
modules. Chaque déploiement produit donc des URL neuves, et il n'y a plus rien
de périmé à servir. C'est lancé par npm run build, à faire avant de pousser :
npm run build && git commit -am "…" && git push origin main
Tamponner le graphe de modules n'est pas cosmétique. app.js portait une
empreinte et pas les modules qu'il importe : un visiteur venu dix minutes avant
un déploiement pouvait donc exécuter un app.js neuf contre d'anciens modules.
Ce n'est pas un style périmé, c'est un programme incohérent — et c'est
invisible, puisque tout se charge. Ça m'a coûté une fausse piste pendant la
vérification : le site en ligne rendait un visage différent du local pour un cas
que je venais de corriger, alors que l'origine servait démonstrablement le bon
fichier ; c'est l'onglet qui gardait d'anciens modules derrière un point
d'entrée neuf.
Une seule empreinte pour tout l'arbre, plutôt qu'une par fichier : l'arbre part
ensemble de toute façon, et des empreintes par fichier obligeraient à réécrire
le graphe de bas en haut à chaque build sans rien gagner.
Ailleurs
Le site est entièrement statique — aucune étape de build, rien à compiler.
Pousse le dossier tel quel :
- GitHub Pages : push sur une branche, Settings → Pages → Deploy from a branch.
- Netlify / Cloudflare Pages / Vercel : glisser-déposer le dossier, ou brancher
le dépôt sans commande de build (publish directory = la racine).
- Un simple hébergeur FTP : copier les fichiers. C'est tout.
Le seul point d'attention : servir les .js avec le type MIME
text/javascript, ce que fait tout serveur correct par défaut.
En un seul fichier
Les modules ES sont agréables à travailler mais exigent un serveur. Pour un
hébergeur qui ne prend qu'un fichier — ou pour ouvrir la page directement depuis
le disque :
node tools/build-single.mjs
Produit dist/doodle-single.html (page complète, ~220 kB, s'ouvre en
file://) et dist/artifact.html (contenu du body seul, pour les hôtes qui
fournissent l'enveloppe). esbuild aplatit le graphe de modules — c'est aussi lui
qui renomme les quelques clamp privés qui entreraient en collision une fois
concaténés. C'est un outil de développement : le site produit, lui, n'a toujours
aucune dépendance.
L'interface
Deux modes sur le même générateur, barre latérale à gauche :
- Contact sheet — la planche, pour dégrossir une population. Clique sur un
visage pour l'ouvrir.
- Focus — un seul portrait en grand, modifiable en direct. Glisse le
portrait pour tourner la tête (horizontal = rotation, vertical = inclinaison),
← → pour passer au suivant, f pour basculer de mode, r pour une
nouvelle graine.
Le panneau Traits épingle un trait pour tout le monde ; le dé à côté de
chaque menu ne relance que ce trait sur le portrait affiché, en laissant les
autres et la pose intacts. Le panneau Proportions expose les nombres du
génome en curseurs, et Genome le JSON complet, éditable.
Les libellés de l'interface sont en anglais, comme le code. Cette documentation
reste en français — dis-le si tu la veux en anglais aussi.
Garder, partager, comparer, croiser
- Kept — le bandeau du bas garde les visages retenus dans
localStorage
(k en mode focus, ou l'étoile). Tout accès au stockage est protégé : une
fenêtre privée ou un navigateur qui bloque les données de site ne casse rien,
la sélection vit juste le temps de la session.
- Copy share link — un lien vers exactement ce qui est à l'écran. Un visage
intact est entièrement décrit par sa graine et les réglages, donc le lien
reste court ; dès qu'un génome a été retouché à la main il n'y a plus rien
pour le dériver, alors il part en entier dans le fragment (~2,5 ko en
base64url). Le panneau Genome affiche exactement ce que le lien encode, à
l'arrondi près — vérifié : aller-retour identique au caractère.
- Compare — deux portraits côte à côte, chacun avec son propre pas dans la
planche, plus Swap et Breed A × B qui envoie l'enfant en mode focus.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
