Labs

Blob

Un tore et trois sphères fondus ensemble. Le curseur le déforme, la molette l'arrondit.

WebGL · GLSL · raymarching

Sélecteur de forme

Les triangles se décollent, tournent, et se recollent sur la forme choisie. Le curseur fige le vol à mi-course.

Three.js · vertex shader

Solveur de contraintes d'aménagement

Quatre formes de pièce, et du mobilier à y faire tenir. Poussez un meuble, il longe ce qui le bloque et dit ce qu'il enfreint. Cliquez-en un, vous voyez ses dégagements et le chemin qui y mène depuis la porte. « Ranger » cherche une disposition vivable : canapé face à la télé, 70 cm de passage partout, un écran qui ne prend pas la fenêtre en reflet. Ajoutez des meubles jusqu'à ce que la pièce refuse.

Canvas 2D · séparation d'axes · essais avec redémarrage · Web Worker

Rangement d'atlas

Des centaines d'images, une seule texture, et le problème est NP-difficile : personne ne range de façon optimale. Quatre heuristiques s'y essaient, et le curseur les prend en flagrant délit : l'espace libre qu'elles voyaient, celui qu'elles ont retenu. Le tableau dit ce que les trois autres auraient fait. Triez, pivotez, changez de jeu : aucune ne gagne partout, et sur les rectangles très allongés c'est la plus simple des quatre qui passe devant. « Chercher un ordre » va plus loin : à algorithme constant, l'ordre où on donne les boîtes pèse souvent plus lourd que le choix de l'algorithme.

Canvas 2D · étagères, skyline, MaxRects · recherche sur l'ordre · Web Worker

GJK et EPA, la détection de collision

Plutôt que de chercher si deux formes convexes se recouvrent, GJK regarde leur différence de Minkowski : elles se touchent si et seulement si cet ensemble contient l'origine. Deux vues côte à côte, les formes qu'on déplace au doigt et la différence où l'algorithme travaille vraiment, et le curseur construit le simplexe appui par appui. Quand il y a contact, EPA prend le relais et gonfle le simplexe jusqu'au bord pour donner la profondeur et la direction du plus petit déplacement qui sépare. Le disque n'a aucun sommet et rien ne le distingue des polygones : GJK ne connaît d'une forme que son point le plus loin dans une direction.

Canvas 2D · différence de Minkowski · simplexe · EPA

La bibliothèque d'origine, en 2D et en 3D pour Babylon.js, écrite chez Wanadev : wanadev/collision-gjk-epa. Ce lab en reprend le principe, à plat, pour qu'il se regarde.

La cascade d'un jeu idle

Huit paliers, chacun déversant dans le précédent jusqu'aux gouttes recueillies en bas, et qu'on ouvre un par un : c'est une cascade d'intégrateurs, donc le degré du polynôme est la progression, et à huit paliers les gouttes croissent en t⁸/8!. Écrite en matrice, la chaîne est nilpotente, et son exponentielle est une somme finie — l'absence se rattrape d'un calcul, pour une image comme pour trois mois, sans le plafond que posent les jeux qui rejouent des ticks. Le tableau du bas montre ce que ces ticks coûtent : sur huit heures, un seul gros tick perd sept décades, et la boucle au soixantième de seconde demande 1,7 million de tours pour rattraper la forme close. Le compteur, lui, bute à 1,7976931348623157e308, parce que c'est là qu'un double s'arrête : c'est le mur dont Antimatter Dimensions a fait sa première couche de prestige, et le briser s'achète. Au-dessus vient l'éternité, une seconde couche dont la monnaie se compte en unités quand celle du dessous se compte en décades, et dont le mur est choisi là où le premier était donné par le matériel : reprendre 1,80e308 sur les points d'infini demandait une profondeur de 1e16832, inatteignable. Ses quatre achats ne multiplient rien, ils déplacent des constantes que la couche du dessous tenait pour acquises.

Canvas 2D · pixel art · exponentielle d'une matrice nilpotente · mantisse-exposant · deux couches de prestige · sauvegarde locale

Les maths de la cascade ont été la partie facile ; l'équilibrage, je l'ai raté trois fois et mesuré à chaque coup. Ce que ça m'a appris est raconté ici.

vgpu, la lib WebGPU de Vercel

220 000 particules composent la marque du site. Le curseur les en arrache, un ressort les y ramène.

vgpu 0.4 · WebGPU · compute shader

Constructeur de maison

Elle se monte brique par brique. Le curseur remonte le temps, et on peut tourner autour.

Three.js