Des objets du quotidien et des phénomènes naturels dessinés comme à l'encre, en perspective isométrique, que l'on peut faire pivoter, explorer de l'intérieur et voir en fonctionnement. Chaque figure est une page web autonome, réalisée par Claude à l'aide de Colorfigures, un module de compétences (skill) conçu par April Zhu.
Voir la galerie : https://w3cdotorg.github.io/ColorFigures/
| Fig. | Figure | Catégories | Étapes et mécanisme |
|---|---|---|---|
| 01 | Locomotive à vapeur | Train, Transport, Vapeur | Faire le plein d'eau au château d'eau, charger le bois, nourrir le feu, siffler et partir, revenir. En transparence : foyer, tubes à fumée, régulateur, pistons, injecteur, caisse à eau du tender, réservoir et flotteur du château d'eau. |
| 02 | TGV au départ de Montparnasse | Train, Transport, Électricité | Lever le pantographe, afficher la voie (embarquement), fermer les portes, démarrer, faire venir la rame suivante. En transparence : trajet du courant de la sous-station à la caténaire, au pantographe et aux moteurs, retour par les rails ; filtre, transformateur, onduleurs, moteurs de traction, cabine ; salles basse et haute de la voiture Duplex. |
| 03 | Volcan en éruption | Phénomène naturel, Volcan, Géologie | Remontée du magma (pression, séismes, gonflement du sol mesuré par GPS, fumerolles), éruption explosive (panache, bombes, fontaine de lave), coulée de lave, retour au calme. En transparence : dyke nourricier, chambre magmatique, sill, cheminée, colonne de magma et bulles de gaz, lac de lave, foyers des séismes. |
| 04 | Ordinateur portable | Informatique, Objet du quotidien | Ouvrir l'écran, taper un texte (clavier AZERTY, touches enfoncées en couleur), mettre le titre en forme, enregistrer, brancher le chargeur. En transparence, au niveau des modules seulement : carte mère, batterie, ventilateur, haut-parleurs, ports USB-C, pavé tactile, charnières, nappe, dalle et webcam ; trajet du courant de charge du port à la batterie. |
| 05 | Nintendo DS | Jeu vidéo, Informatique | Ouvrir la console, insérer la cartouche Pokémon (étiquette vers le bas, dans la fente au dos), allumer, lancer le jeu au stylet (avertissement, menu DS, chargement, écran titre), appuyer sur START puis marcher avec la croix directionnelle. En transparence, au niveau des modules : carte mère, batterie, lecteur de carte et cartouche, port Game Boy Advance, écrans, contacts des boutons, stylet dans son logement, interrupteur, nappe et charnière ; trajet des données de la cartouche vers les écrans pendant le chargement. |
| 06 | Sous-marin | Transport, Mer, Physique | Plonger (les purges s'ouvrent, l'air sort, l'eau de mer entre par le bas des ballasts), descendre à 20 m et remonter avec les barres de plongée et l'hélice, sortir le périscope à l'immersion périscopique, faire surface en chassant l'eau des ballasts à l'air comprimé. En transparence : ballasts avant et arrière avec leur niveau d'eau, purges, entrées d'eau, bouteilles d'air comprimé et leurs tuyaux, coque épaisse, caisse de réglage, caisses d'assiette, batteries, moteur diesel, moteur électrique, ligne d'arbre, poste central, périscope. Pas d'armement. |
| 07 | Fusée Ariane 5 | Transport, Espace, Physique | Remplir les réservoirs (oxygène et hydrogène liquides par la table et le mât ombilical), décoller (Vulcain 2 à H0, boosters à H0 + 7 s, déluge d'eau, bras qui s'écarte, fumée dans les carneaux), larguer les boosters vers 69 km, larguer la coiffe vers 107 km, larguer l'étage principal et allumer l'étage supérieur, libérer les deux satellites. Chrono, altitude, vitesse et masse en direct. En transparence : poudre des boosters qui brûle du centre vers l'extérieur, réservoirs d'hydrogène et d'oxygène avec leur niveau, moteur Vulcain 2 et turbopompes, moteur HM7B, réservoirs de l'étage supérieur, case à équipements, Sylda, satellites. |
index.html la page de présentation (galerie)
figures/<nom>.html les figures prêtes à ouvrir (moteur inclus, aucune requête extérieure)
thumbs/<nom>.jpg vignette, et <nom>-dedans.jpg pour la vue en transparence (affichée au survol)
src/<nom>/figure.html la source de chaque figure (géométrie, mécanisme, boutons)
- Créer la figure avec le skill Colorfigures dans Claude Code, puis copier sa source dans
src/<nom>/figure.html. - La construire avec le script du skill :
python3 ~/.claude/skills/colorfigures/scripts/build.py src/<nom>/figure.html figures/<nom>.html(la source chargecore.js: copier~/.claude/skills/colorfigures/assets/core.jsà côté pour l'ouvrir telle quelle). - Ajouter deux vignettes 4:3 (vue normale et vue en transparence) dans
thumbs/. - Ajouter une carte dans la section
#figuresdeindex.html, avec ses catégories (<span class="tg">…</span>dans.tags) : les filtres de la galerie se construisent tout seuls à partir de ces étiquettes (?tag=Volcanprésélectionne une catégorie). Ajouter aussi une ligne au tableau ci-dessus.
La locomotive accepte quelques paramètres d'URL pour les captures et les tests :
?yaw=200&pitch=40 (angle de vue), ?xr=1&labels=1 (transparence et étiquettes), ?shot=1 (le dessin seul),
?sim=Faire@0.3,Charger@7&at=9 (appuie sur les boutons aux instants donnés, en accéléré, puis dessine l'état obtenu).
- Skill et moteur Colorfigures : April Zhu (MIT).
- Construit sur ISO-GLOW (April Zhu, MIT) et iso-figure (Tolga Cohce, MIT).
- Figures de ce dépôt dessinées avec Claude.
MIT, voir LICENSE.