![\"Math](\"images\/math-art-hero-homelab.png\")
<\/figure>\n\n\n\nIl suffit parfois d\u2019une figure tr\u00e8s simple pour ouvrir un chantier beaucoup plus vaste.<\/p>\n\n\n\n
Le point de d\u00e9part de Math Art<\/strong> est une construction g\u00e9om\u00e9trique compos\u00e9e de points dispos\u00e9s sur un cercle et de segments reliant ces points selon une r\u00e8gle num\u00e9rique. Au premier regard, on ne voit que des droites. Pourtant, lorsque leur nombre augmente, des courbes apparaissent. Lorsque le multiplicateur \u00e9volue, ces courbes se transforment. Et lorsque l\u2019animation acc\u00e9l\u00e8re tout en conservant une partie des images pr\u00e9c\u00e9dentes, la g\u00e9om\u00e9trie commence \u00e0 produire des formes fluides, presque organiques.<\/p>\n\n\n\n Ce qui devait \u00eatre une petite exp\u00e9rience math\u00e9matique est progressivement devenu un laboratoire de g\u00e9om\u00e9trie g\u00e9n\u00e9rative<\/strong> : un moteur WebGL contr\u00f4lable \u00e0 la souris, des param\u00e8tres modifiables en temps r\u00e9el, un syst\u00e8me de persistance visuelle et un export vid\u00e9o directement depuis le navigateur.<\/p>\n\n\n\n Dans le Homelab, ce projet est aussi un cas d\u2019\u00e9cole : comment passer d\u2019une id\u00e9e math\u00e9matique \u00e0 une application interactive, la conteneuriser avec Docker, la piloter avec Dockge, l\u2019exposer avec Nginx Proxy Manager et conserver un acc\u00e8s priv\u00e9 via Tailscale.<\/p>\n\n\n\n Objectif du projet :<\/strong> rendre visible une r\u00e8gle math\u00e9matique, permettre de la manipuler, puis documenter aussi bien le ph\u00e9nom\u00e8ne que l\u2019infrastructure qui le rend accessible.<\/p>\n<\/blockquote>\n\n\n\n La premi\u00e8re question \u00e9tait presque na\u00efve : comment une collection de segments droits peut-elle donner l\u2019impression de dessiner une courbe ?<\/strong><\/p>\n\n\n\n Pour le comprendre, j\u2019ai commenc\u00e9 par reconstruire la figure \u00e0 partir de ses \u00e9l\u00e9ments les plus simples :<\/p>\n\n\n\n La premi\u00e8re version pouvait \u00eatre calcul\u00e9e en 2D. Mais tr\u00e8s vite, l\u2019int\u00e9r\u00eat n\u2019\u00e9tait plus seulement de g\u00e9n\u00e9rer une image fixe : il fallait pouvoir modifier C\u2019est l\u00e0 que WebGL<\/strong> est devenu naturel. Le navigateur ne servait plus simplement \u00e0 afficher une page : il devenait le moteur du laboratoire.<\/p>\n\n\n\n Puis une deuxi\u00e8me observation a chang\u00e9 la direction du projet. En augmentant la vitesse de variation de Pour rendre ce ph\u00e9nom\u00e8ne perceptible, j\u2019ai ajout\u00e9 une persistance temporelle<\/strong> : au lieu d\u2019effacer compl\u00e8tement l\u2019image pr\u00e9c\u00e9dente, le moteur en conserve une fraction. Les \u00e9tats successifs s\u2019accumulent alors comme une trace lumineuse.<\/p>\n\n\n\n Cette fonction a naturellement conduit \u00e0 l\u2019export vid\u00e9o<\/strong> : si la transformation est int\u00e9ressante dans le temps, il faut pouvoir la conserver et la comparer.<\/p>\n\n\n\n Le moteur commence par r\u00e9partir Pour le point d\u2019indice [ Ses coordonn\u00e9es sont donc :<\/p>\n\n\n\n [ On choisit ensuite un multiplicateur [ Le modulo<\/strong> joue ici le r\u00f4le d\u2019une horloge. Lorsque le calcul d\u00e9passe le dernier point, on revient au d\u00e9but du cercle.<\/p>\n\n\n\n Avec Pour obtenir une animation parfaitement fluide, Math Art utilise aussi une version continue : au lieu de viser uniquement un sommet discret, l\u2019angle [ Le point d\u2019arriv\u00e9e reste donc exactement sur le cercle, m\u00eame lorsque C\u2019est la partie la plus fascinante du projet.<\/p>\n\n\n\n Prenons un point du cercle \u00e0 l\u2019angle [ Ici :<\/p>\n\n\n\n [ La famille de droites devient donc :<\/p>\n\n\n\n [ Une enveloppe<\/strong> est une courbe tangente \u00e0 chacune des droites de cette famille au voisinage du point correspondant. Pour la trouver, on r\u00e9sout simultan\u00e9ment :<\/p>\n\n\n\n [ et<\/p>\n\n\n\n [ Apr\u00e8s r\u00e9solution, on obtient :<\/p>\n\n\n\n [ [ Pour [ [ Cette param\u00e9trisation d\u00e9crit une cardio\u00efde<\/strong>, \u00e0 une rotation\/orientation pr\u00e8s.<\/p>\n\n\n\n Autrement dit, la courbe n\u2019est pas r\u00e9ellement dessin\u00e9e dans le programme. Le programme ne trace que des segments. La cardio\u00efde appara\u00eet comme enveloppe de la famille de droites.<\/strong><\/p>\n\n\n\n C\u2019est pr\u00e9cis\u00e9ment ce qui donne au projet son int\u00e9r\u00eat : une structure complexe devient visible \u00e0 partir d\u2019une r\u00e8gle extr\u00eamement compacte.<\/p>\n\n\n\n Avec peu de points, on distingue surtout les segments ind\u00e9pendants. Lorsque Le GPU permet d\u2019augmenter cette densit\u00e9 tout en conservant une interaction fluide.<\/p>\n\n\n\n Imaginons une horloge poss\u00e9dant non pas 12 positions, mais 200.<\/p>\n\n\n\n On num\u00e9rote ces positions de 0 \u00e0 199.<\/p>\n\n\n\n On choisit ensuite une r\u00e8gle tr\u00e8s simple : multiplier chaque num\u00e9ro par 2 et revenir au d\u00e9but lorsque l\u2019on d\u00e9passe 199<\/strong>.<\/p>\n\n\n\n Le point 17, par exemple, est reli\u00e9 au point 34. Le point 80 au point 160. Et si le calcul d\u00e9passe 199, le modulo le ram\u00e8ne \u00e0 l\u2019int\u00e9rieur de notre cercle.<\/p>\n\n\n\n On r\u00e9p\u00e8te l\u2019op\u00e9ration pour tous les points.<\/p>\n\n\n\n Chaque liaison est parfaitement droite. Mais toutes ces droites ne sont pas r\u00e9parties au hasard : leurs directions changent progressivement selon une r\u00e8gle commune. Elles viennent alors fr\u00f4ler une m\u00eame fronti\u00e8re invisible<\/strong>.<\/p>\n\n\n\n Notre \u0153il voit cette fronti\u00e8re avant m\u00eame que le programme ne la dessine : c\u2019est l\u2019enveloppe.<\/p>\n\n\n\n C\u2019est un peu comme observer des dizaines de tangentes autour d\u2019un objet invisible. L\u2019objet n\u2019est jamais trac\u00e9 directement, mais sa forme devient \u00e9vidente gr\u00e2ce aux lignes qui l\u2019effleurent.<\/p>\n\n\n\n Lorsque Lorsque On peut mod\u00e9liser ce principe de persistance par :<\/p>\n\n\n\n [ o\u00f9 :<\/p>\n\n\n\n Avec Il n\u2019y a donc pas de \u00ab courbe magique \u00bb ajout\u00e9e par-dessus : c\u2019est l\u2019accumulation temporelle d\u2019une r\u00e8gle g\u00e9om\u00e9trique en \u00e9volution<\/strong>.<\/p>\n\n\n\n Math Art assemble des id\u00e9es anciennes avec des outils tr\u00e8s contemporains.<\/p>\n\n\n\n La cardio\u00efde<\/strong> \u00e9tait \u00e9tudi\u00e9e bien avant l\u2019informatique. Le nom est attribu\u00e9 au math\u00e9maticien Johann Castillon dans un travail publi\u00e9 en 1741. La courbe peut appara\u00eetre dans plusieurs constructions g\u00e9om\u00e9triques ; ici, elle \u00e9merge comme enveloppe de cordes associ\u00e9es par la multiplication sur le cercle.<\/p>\n\n\n\n L\u2019arithm\u00e9tique modulaire<\/strong> a \u00e9t\u00e9 syst\u00e9matis\u00e9e par Carl Friedrich Gauss dans les Disquisitiones Arithmeticae<\/em>, publi\u00e9es en 1801. Gauss y introduit notamment la notation moderne des congruences.<\/p>\n\n\n\n Deux si\u00e8cles plus tard, un navigateur Web peut appliquer ces id\u00e9es plusieurs dizaines de fois par seconde, les transformer en g\u00e9om\u00e9trie lumineuse et enregistrer leur \u00e9volution en vid\u00e9o.<\/p>\n\n\n\n Le changement n\u2019est donc pas n\u00e9cessairement dans la formule. Il est dans notre capacit\u00e9 \u00e0 l\u2019explorer de fa\u00e7on continue et interactive<\/strong>.<\/p>\n\n\n\n Une premi\u00e8re version 2D suffit pour comprendre l\u2019algorithme, mais elle devient vite limit\u00e9e lorsque l\u2019on veut :<\/p>\n\n\n\n La version actuelle repose sur Three.js<\/strong> et son moteur WebGL.<\/p>\n\n\n\n Les positions des segments sont stock\u00e9es dans une Sch\u00e9matiquement :<\/p>\n\n\n\n La souris agit ensuite directement sur la cam\u00e9ra ou le groupe g\u00e9om\u00e9trique :<\/p>\n\n\n\n Cette interaction transforme la figure en objet d\u2019exploration<\/strong>, et non plus en simple illustration.<\/p>\n\n\n\n L\u2019export vid\u00e9o est devenu important apr\u00e8s avoir observ\u00e9 que certaines transitions \u00e9taient plus int\u00e9ressantes que les images fixes.<\/p>\n\n\n\n Le navigateur fournit directement les briques n\u00e9cessaires :<\/p>\n\n\n\n Dans Math Art, cela permet d\u2019enregistrer :<\/p>\n\n\n\n L\u2019export devient alors une extension naturelle du laboratoire : observer, trouver une transformation int\u00e9ressante, puis la conserver<\/strong>.<\/p>\n\n\n\n Une prochaine \u00e9tape logique sera un mode S\u00e9quence<\/em> capable de d\u00e9finir pr\u00e9cis\u00e9ment :<\/p>\n\n\n\n On passerait ainsi de l\u2019enregistrement manuel \u00e0 une v\u00e9ritable composition math\u00e9matique reproductible<\/strong>.<\/p>\n\n\n\n Le projet reste volontairement l\u00e9ger c\u00f4t\u00e9 serveur. Toute la g\u00e9n\u00e9ration g\u00e9om\u00e9trique est effectu\u00e9e dans le navigateur de l\u2019utilisateur.<\/p>\n\n\n\n Le conteneur n\u2019a donc besoin que de servir des fichiers statiques :<\/p>\n\n\n\n Le stack Dockge rejoint le r\u00e9seau Docker externe Nginx Proxy Manager peut alors joindre directement :<\/p>\n\n\n\n Aucun port h\u00f4te suppl\u00e9mentaire n\u2019est n\u00e9cessaire pour l\u2019acc\u00e8s public.<\/p>\n\n\n\n Pour le d\u00e9veloppement ou le diagnostic, un port peut \u00eatre li\u00e9 uniquement \u00e0 l\u2019adresse Tailscale du VPS :<\/p>\n\n\n\n On obtient alors deux chemins ind\u00e9pendants :<\/p>\n\n\n\n Cette s\u00e9paration correspond \u00e0 une r\u00e8gle que j\u2019essaie de g\u00e9n\u00e9raliser dans le Homelab : ne publier directement que ce qui doit r\u00e9ellement l\u2019\u00eatre<\/strong>.<\/p>\n\n\n\n Lorsqu\u2019un stack contient un Pour forcer une reconstruction compl\u00e8te :<\/p>\n\n\n\n On peut ensuite contr\u00f4ler directement le contenu servi par Nginx :<\/p>\n\n\n\n Ce type de v\u00e9rification est utile parce qu\u2019il permet de s\u00e9parer imm\u00e9diatement trois cat\u00e9gories de probl\u00e8mes :<\/p>\n\n\n\n Math Art n\u2019a pas vocation \u00e0 rester une d\u00e9monstration isol\u00e9e.<\/p>\n\n\n\n Il s\u2019inscrit dans un ensemble de projets o\u00f9 les math\u00e9matiques, la g\u00e9om\u00e9trie, les fractales, la musique et la perception<\/strong> peuvent \u00eatre explor\u00e9es avec des outils num\u00e9riques.<\/p>\n\n\n\n\n
\n\n\n\n1. De l\u2019observation au laboratoire<\/h2>\n\n\n\n
\n
R<\/code> ;<\/li>\n\n\n\nn<\/code> points r\u00e9guli\u00e8rement espac\u00e9s ;<\/li>\n\n\n\nn<\/code>, faire \u00e9voluer le multiplicateur m<\/code>, tourner la sc\u00e8ne, zoomer et observer les transitions en temps r\u00e9el.<\/p>\n\n\n\nm<\/code>, certaines transitions produisaient des formes hypnotiques. Les segments semblaient se transformer en filaments ou en surfaces courbes mouvantes.<\/p>\n\n\n\n![\"Trois](\"https:\/\/homelab.nvsd.ch\/wp-content\/uploads\/2026\/08\/math-art-persistance-mouvement-1024x576.png\")
<\/figure>\n\n\n\n
\n\n\n\n2. La r\u00e8gle math\u00e9matique de d\u00e9part<\/h2>\n\n\n\n
n<\/code> points r\u00e9guli\u00e8rement sur un cercle.<\/p>\n\n\n\nk<\/code>, l\u2019angle est :<\/p>\n\n\n\n
\\theta_k = \\frac{2\\pi k}{n}
]<\/p>\n\n\n\n
P_k = \\left(R\\cos\\frac{2\\pi k}{n},\\;R\\sin\\frac{2\\pi k}{n}\\right)
]<\/p>\n\n\n\nm<\/code>. Dans la version discr\u00e8te classique, le point k<\/code> est reli\u00e9 au point :<\/p>\n\n\n\n
k’ = (m k) \\bmod n
]<\/p>\n\n\n\nn = 10<\/code> et m = 2<\/code>, par exemple :<\/p>\n\n\n\n0 \u2192 0\n1 \u2192 2\n2 \u2192 4\n3 \u2192 6\n4 \u2192 8\n5 \u2192 0\n6 \u2192 2\n...<\/code><\/pre>\n\n\n\n\u03b8<\/code> est envoy\u00e9 vers :<\/p>\n\n\n\n
\\theta \\longmapsto m\\theta \\pmod{2\\pi}
]<\/p>\n\n\n\nm = 2.173<\/code> ou m = 3.624<\/code>.<\/p>\n\n\n\n![\"D\u00e9monstration](\"https:\/\/homelab.nvsd.ch\/wp-content\/uploads\/2026\/08\/math-art-formule-modulo-1024x576.png\")
<\/figure>\n\n\n\n
\n\n\n\n3. Pourquoi des droites font-elles appara\u00eetre une courbe ?<\/h2>\n\n\n\n
\u03b8<\/code> et son point cible \u00e0 l\u2019angle m\u03b8<\/code>. La droite passant par deux points d\u2019un m\u00eame cercle, situ\u00e9s aux angles \u03b1<\/code> et \u03b2<\/code>, peut s\u2019\u00e9crire sous la forme :<\/p>\n\n\n\n
x\\cos\\left(\\frac{\\alpha+\\beta}{2}\\right)
+y\\sin\\left(\\frac{\\alpha+\\beta}{2}\\right)
=R\\cos\\left(\\frac{\\alpha-\\beta}{2}\\right)
]<\/p>\n\n\n\n
\\alpha=\\theta, \\qquad \\beta=m\\theta
]<\/p>\n\n\n\n
F(x,y,\\theta)=
x\\cos\\left(\\frac{m+1}{2}\\theta\\right)
+y\\sin\\left(\\frac{m+1}{2}\\theta\\right)
-R\\cos\\left(\\frac{m-1}{2}\\theta\\right)=0
]<\/p>\n\n\n\n
F(x,y,\\theta)=0
]<\/p>\n\n\n\n
\\frac{\\partial F}{\\partial\\theta}=0
]<\/p>\n\n\n\n
x(\\theta)=\\frac{R}{m+1}\\left(m\\cos\\theta+\\cos(m\\theta)\\right)
]<\/p>\n\n\n\n
y(\\theta)=\\frac{R}{m+1}\\left(m\\sin\\theta+\\sin(m\\theta)\\right)
]<\/p>\n\n\n\nm = 2<\/code> :<\/p>\n\n\n\n
x(\\theta)=\\frac{R}{3}\\left(2\\cos\\theta+\\cos2\\theta\\right)
]<\/p>\n\n\n\n
y(\\theta)=\\frac{R}{3}\\left(2\\sin\\theta+\\sin2\\theta\\right)
]<\/p>\n\n\n\nEt lorsque
n<\/code> augmente ?<\/h3>\n\n\n\nn<\/code> devient grand, les droites \u00e9chantillonnent de plus en plus finement la famille continue. Notre perception rep\u00e8re alors beaucoup plus facilement leur enveloppe.<\/p>\n\n\n\n
\n\n\n\n4. La m\u00eame id\u00e9e, expliqu\u00e9e sans formules<\/h2>\n\n\n\n
Pourquoi le mouvement semble-t-il organique ?<\/h3>\n\n\n\n
m<\/code> varie lentement, chaque famille de lignes se transforme en la suivante.<\/p>\n\n\n\nm<\/code> varie vite, notre perception ne traite plus chaque \u00e9tat comme une figure compl\u00e8tement ind\u00e9pendante. Et si le moteur conserve volontairement une partie des \u00e9tats pr\u00e9c\u00e9dents, plusieurs g\u00e9om\u00e9tries se superposent.<\/p>\n\n\n\n
I_t=(1-\\alpha)F_t+\\alpha I_{t-1}
]<\/p>\n\n\n\n\n
F_t<\/code> est la nouvelle image calcul\u00e9e ;<\/li>\n\n\n\nI_{t-1}<\/code> est l\u2019image persistante pr\u00e9c\u00e9dente ;<\/li>\n\n\n\n\u03b1<\/code> contr\u00f4le la dur\u00e9e de la trace.<\/li>\n<\/ul>\n\n\n\n\u03b1<\/code> faible, les anciennes lignes disparaissent rapidement. Avec \u03b1<\/code> \u00e9lev\u00e9, les transformations laissent des tra\u00een\u00e9es longues. C\u2019est dans cette zone que des spirales, vagues et structures presque fluides deviennent particuli\u00e8rement visibles.<\/p>\n\n\n\n
\n\n\n\n5. Quelques rep\u00e8res historiques<\/h2>\n\n\n\n
\n\n\n\n6. Pourquoi WebGL et Three.js ?<\/h2>\n\n\n\n
\n
BufferGeometry<\/code>. Chaque paire de sommets forme un segment rendu par LineSegments<\/code>. Cette approche est adapt\u00e9e \u00e0 une g\u00e9om\u00e9trie recalcul\u00e9e fr\u00e9quemment et \u00e9vite de cr\u00e9er un objet JavaScript distinct pour chaque ligne.<\/p>\n\n\n\nn, m, rayon\n \u2502\n \u25bc\ncalcul des angles\n \u2502\n \u25bc\npositions des extr\u00e9mit\u00e9s\n \u2502\n \u25bc\nBufferGeometry\n \u2502\n \u25bc\nLineSegments\n \u2502\n \u25bc\nWebGLRenderer \u2192 GPU<\/code><\/pre>\n\n\n\n\n
Shift<\/code> + molette : modification de m<\/code> ;<\/li>\n\n\n\n
\n\n\n\n7. Capturer les formes en vid\u00e9o<\/h2>\n\n\n\n
const stream = canvas.captureStream(60);\nconst recorder = new MediaRecorder(stream);<\/code><\/pre>\n\n\n\ncaptureStream()<\/code> transforme le contenu vivant du canvas en MediaStream<\/code>. MediaRecorder<\/code> peut ensuite enregistrer ce flux et produire des blocs vid\u00e9o assembl\u00e9s en fichier.<\/p>\n\n\n\n\n
m d\u00e9part 2.000\nm arriv\u00e9e 7.000\ndur\u00e9e 30 s\ncourbe lin\u00e9aire \/ ease-in-out \/ sinuso\u00efdale\nrotation 0 \u2192 180\u00b0\npersistance 0.70 \u2192 0.92<\/code><\/pre>\n\n\n\n
\n\n\n\n8. Du navigateur au VPS : le r\u00f4le du Homelab<\/h2>\n\n\n\n
FROM nginx:alpine\nCOPY nginx.conf \/etc\/nginx\/conf.d\/default.conf\nCOPY . \/usr\/share\/nginx\/html\nEXPOSE 80<\/code><\/pre>\n\n\n\nproxy<\/code> :<\/p>\n\n\n\nservices:\n math-art:\n build:\n context: .\n dockerfile: Dockerfile\n container_name: math-art\n restart: unless-stopped\n networks:\n - proxy\n\nnetworks:\n proxy:\n external: true<\/code><\/pre>\n\n\n\nScheme: http\nForward Hostname: math-art\nForward Port: 80<\/code><\/pre>\n\n\n\n![\"](\"https:\/\/homelab.nvsd.ch\/wp-content\/uploads\/2026\/08\/math-art-architecture-homelab-1024x576.png\")
<\/figure>\n\n\n\nAcc\u00e8s priv\u00e9 par Tailscale<\/h3>\n\n\n\n
ports:\n - \"<IP_TAILSCALE>:8003:80\"<\/code><\/pre>\n\n\n\nPUBLIC\nInternet \u2192 HTTPS \u2192 NPM \u2192 r\u00e9seau proxy \u2192 math-art:80\n\nPRIV\u00c9\nTailscale \u2192 :8003 \u2192 math-art:80<\/code><\/pre>\n\n\n\n
\n\n\n\n9. Rebuild propre avec Dockge<\/h2>\n\n\n\n
Dockerfile<\/code>, un simple Start<\/em> ne suffit pas toujours apr\u00e8s une modification du frontend. L\u2019ancienne image peut encore contenir les fichiers pr\u00e9c\u00e9dents.<\/p>\n\n\n\ncd \/opt\/homelab\/stacks\/math-art\n\ndocker compose down --remove-orphans\ndocker compose build --no-cache --pull\ndocker compose up -d --force-recreate\n\ndocker compose ps\ndocker compose logs --tail=50<\/code><\/pre>\n\n\n\ndocker exec math-art ls -lah \/usr\/share\/nginx\/html\/\ndocker exec math-art wget -qO- http:\/\/127.0.0.1\/ | head -n 20<\/code><\/pre>\n\n\n\n\n
\n\n\n\n10. Une r\u00e9f\u00e9rence technique, mais aussi un outil de recherche<\/h2>\n\n\n\n
![\"\u00c9cosyst\u00e8me](\"https:\/\/homelab.nvsd.ch\/wp-content\/uploads\/2026\/08\/math-art-ecosysteme-recherche-1024x576.png\")
<\/figure>\n\n\n\n