Le Laboratoire de Leto

Rubik's Cube 3D

Rubik's Cube 3D

J'avais commencé à faire un Rubik's Cube à l'époque. Il n'est pas fini, j'ai la flemme de l'intégrer correctement au site, mais le voilà.
Il n'y a qu'une option, les autres sont toutes dans le code en variable. Si vous avez la foi, vous pouvez aller l'inspecter pour changer l'angle de vision, changer la taille des cubes, ...
Mais surtout, il y a un truc très rigolo avec mon code, c'est qu'au fur et à mesure des itérations, les erreurs de calcul et d'arrondi se propagent. Ce n'est pas visible au début, mais au bout d'un certain temps (moins de 5 minutes) le cube commence à partir en live. On voit apparaitre des erreurs d'alignement, et là très vite ça part en n'importe quoi. Je n'avais pas anticipé ce phénomène à l'époque, et si je devais le refaire aujourd'hui je ferai en sorte de ne plus avoir ce problème là.

Ici on commence d'un Rubik's Cube bien fait que l'on va mélanger. À terme je souhaitais tenter des algorithmes de résolutions, mais je ne sais déjà pas les résoudres à la main... alors bon. J'ai abandonné mon code à cause de cette grosse erreur qui nécessite de refaire le code différemment, mais le résultat est déjà sympa ;)

0 commentaire

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Waveform 3D

Waveform 3D

Enfin un nouvel article ! Voici la représentation 3D de l'amplitude d'une musique.
Merci à I am cook et à Luke Paris pour les musiques, n'hésitez pas à visiter leur profil SoundCloud.

Attention, cette démo ne marche pas sous Firefox, à cause du format MP3, qui est propriétaire, et donc non accepté par Firefox.

En savoir plus :

Je vous aurai bien permis d'importer vous même vos propres musiques, mais la méthode que j'utilise ne me permet pas de générer les données nécéssaires sur un hébergement mutualisé. Il me faudrait un serveur dédié. De plus, le temps d'upload pour un MP3 de taille moyenne est un peu long.

Allez voir la page « Making Of » si vous voulez plus de détails sur la méthode de génération. D'ailleurs, si quelqu'un à une autre méthode à me proposer, qu'il n'hésite pas à m'en parler.

1 commentaire

Merci à toi de nous faire de la pub ^^ Sinon ça rend vraiment bien, bravo ! - Luke

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Snake

Snake

Salut tout le monde !
Un petit jeu de snake pour bien commencer la nouvelle année.

4 commentaires

Et si tu nous refilais les scripts, au lieu de faire ton malin, ça serait pas plus sympa ?

Je sais, je sais. J'essaye de faire des pages où j'explique ce que je fait. Mais ça prend du temps, et je ne suis pas sûr d'être très bon pédagogue.
Quoi qu'il en soit j'ai commencé à expliquer le principe du Jeu de la Vie en 3D à cette adresse. Ce n'est qu'un premier jet. Ne m'en voulez pas trop si c'est pas terrible.

Mais elle est parfaite ton explication.

Yes, merci, c'est motivant pour continuer. Par contre je manque actuellement de temps. J'espère m'y mettre d'ici Juin-Juillet.

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Labyrinthes Circulaires

Labyrinthes Circulaires

Voici maintenant des labyrinthes circulaires. J'ai eu beaucoup de mal à modéliser le problème, mais j'ai fini par trouver quelque chose de satisfaisant. Venez essayer d'en résoudre !

2 commentaires

On ne peut pas bouger à celui là par contre ?

Non, désolé. Et pour une raison simple, qui rend la chose difficile.
Je te donne un exemple. Sur l'image, quand les deux choix en rouge se présentent à l'utilisateur je ne vois pas comment deviner sur quelle case il souhaite aller, en n'exploitant que les touches fléchées. Il faudrait faire quelque chose de plus complexe - à faire et à utiliser.

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Générateur de Labyrinthe

Générateur de Labyrinthe

Et hop, voici que quoi passer de longues heures à résoudre des labyrinthes toujours plus complexes. Ou pas... Personnellement, moi ça m'ennuie vite. Par contre les générer, ça, j'ai adoré.
Amusez-vous bien.

1 commentaire

Sympa, il m'a fallu plusieurs essais avant de trouver la sortie !

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Puissance 4

Puissance 4

Voici venue l'ère des robots - ces derniers deviennent plus malins que l'homme et prennent petit à petit l’ascendant. Prouvez à l'humanité que vous êtes encore plus fort qu'eux en battant cette intelligence artificielle au puissance 4.
C'est l'heure du duel !

1 commentaire

Balèze quand même le robot. Je l'ai mis à 7 coups prévu et j'ai pas réussi à gagner, mais la bonne chose c'est qu'il n'a pas gagné non plus ! - Nico

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Le Jeu de la Vie - 3D

Le Jeu de la Vie - 3D

Enfin le jeu de la vie dans sa version en trois dimensions ! Les règles sont les mêmes que la version en deux dimensions, sauf qu'ici, le nombre de cellules voisines est porté à vingt-six.
C'est ma création la plus complexe pour l'instant, il a fallu que je fasse de la 3D avec des fonctions de dessins 2D - la 3D n'est pas encore terrible en HTML5.

1 commentaire

Cool !

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

La Fractale de Newton

La Fractale de Newton

Voici un nouveau générateur de Fractale, celui de Newton. Un jour peut être, je déciderai de détailler mes articles et d'en expliquer le principe. Mais pour l'instant, ce qui me botte le plus c'est de dessiner en Javascript. Donc pour comprendre ce qu'est la Fractale de Newton, je vous invite à consulter ce qu'en dit Wikipédia.
J'ai essayé de faire les choses bien - comme toujours - et je vous ai mis tout plein de paramètres. En fait, j'ai même repris la plus grosse partie de mon code sur la Fractale de Mandelbrot : la génération est aussi multi-coeur.

0 commentaire

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

La Fourmi de Langton

La Fourmi de Langton

Chouette, un autre automate cellulaire ! Pour simplifier, on considère une seule fourmi et deux couleurs. Le sol est découpé en cases initialement remplies de la première couleur. La fourmi est placée sur le sol et elle tourne à gauche ou à droite en fonction de la couleur du sol tout en changeant la couleur de la case une fois qu'elle est passée. On obtient un automate cellulaire plutôt sympa. Après on peut passer au niveau supérieur en ajoutant des couleurs. Et la propriété encore jamais démontrée, c'est que la fourmi finit toujours par se construire une autoroute pour diverger vers l'infini - même si mon implémentation actuelle fait évoluer la fourmi sur un Tore.
Mon explication n'étant pas très claire, je vous mets un lien expliquant le principe : La fourmi de Langton | Science étonnante.

6 commentaires

Pour obtenir une figure symétrique (une sorte de carré dans un carré), il y a la combinaison [[0, "black"], [1, "white"], [1, "blue"], [1, "green"]] avec 4 fourmis placées en forme de carré.

Effectivement. Bien trouvé. Tu remarqueras que deux fourmis côte à côte suffisent pour faire un carré simple.
Sinon pour des formes complexes très sympa, je propose d'aller voir la vidéo dans le lien que j'ai fourni en description.
Merci pour le commentaire - que me suis d'ailleurs permis d'éditer pour plus de clarté.

Deux fourmis côte à côte mais en colonne ! J'ai commencé par les mettre en ligne et elles m'ont donné une petite figure sur laquelle elles restent et qu'elles font passer du noir au blanc.

Ah bon ? Chez moi en ligne ça marche aussi.
Mais je me rends compte d'une erreur dans mon code : impossible de supprimer une fourmi déjà placée, si tu clique sur une cellule où une fourmi était présente tu en superpose une deuxième. Peut être est-ce la source de notre désaccord ? En tout cas il faut que je corrige ce problème.

Je confirme que deux fourmis côte à côte donne une structure répétitive bornée.
La disposition initiale
La structure (où tout est repassé en noir, hasard du moment où j'ai pris le screen).

D'accord. Et je vois ce qui est la cause de notre malentendu : moi j'utilisais les couleurs que tu fournissais dans ton premier commentaire, tandis que toi, tu utilises celles qui sont entrées par défaut. D'ailleurs, j'ignorais qu'avec ces couleurs et des fourmis en colonne on obtenait un carré.
Mais pourquoi il y a une différence entre des fourmis en ligne et d'autres en colonne ?
C'est parce que dans mon implémentation je les place arbitrairement orientées vers le haut, et je ne laisse jamais la possibilité de modifier cette propriété.

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Figures autosimilaires

Figures autosimilaires

Les figures autosimilaires sont d'autres ensembles fractales : d'une part parce que leur dimension topologique n'est pas un nombre entier et d'autre part parce que chaque morceau d'elle-même est encore la figure originale. Pour ne pas faire trois articles un peu vides, j'ai fait du trois en un :
D'abord, vous avez Le Flocon de Von Koch, il est créé en partant d'un triangle et en remplaçant le tiers du milieu de chaque segment par deux autres de la même taille en forme de pointe.
Vous avez également Le Triangle de Sierpinski où l'on enlève à chaque triangle le plus gros triangle équilatéral inscrit.
Et, sans doute la plus intéressante : La fractale du Dragon. Si vous plier dans le même sens une bande de papier un certain nombre de fois puis que vous la dépliez en mettant tous les angles à quatre-vingt-dix degrés vous aurez une figure assez sympa. La douzième itération correspond à celle que l'on appelle La Fractale du Dragon.
Encore une fois pour comprendre mon charabia, je vous donne un lien apportant la lumière sur mes dires : direction le site du zéro.

0 commentaire

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Déformations bijectives d'image

Déformations bijectives d'image

Quel titre barbare. Tout ça pour dire que l'on va s'amuser à déplacer des pixels sur une image sans en perdre. En répétant un grand nombre de fois la même transformation la théorie nous dis que l'on va retomber sur l'image de départ. Jugez par vous-même en cliquant sur mon petit lien.
Je vous ai mis trois transformations différentes :
Celle du boulanger où l'on étire l'image puis on la replie par-dessous.
Celle du photomaton : l'image est dupliquée en miniatures.
Et une autre que j'ai appelée transformation en diagonale.
J'ai également un petit quelque chose à dire sur l'image utilisée par défaut : il s'agit de Lena Sjööblom, considérée comme la première femme d'internet. L'histoire se passe en 1973 où des mecs pour tester leur algorithme de traitement d'image prirent le premier magazine qu'ils avaient sous la main : le dernier numéro de Playboy. Ils en découpèrent un bout et depuis lors, cette image est mondialement connue et utilisée par tous.

0 commentaire

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Feu de Forêt

Feu de Forêt

Voici un autre automate cellulaire. Le principe de celui-ci, c'est de disposer des arbres au hasard, et de mettre le feu à la rangée du bas. Il suffit ensuite de le regarder se propager aux arbres voisins.
On observe un pourcentage de densité des arbres où en dessous duquel la probabilité que le feu traverse la forêt est faible. Cette valeur est appelée seuil de percolation et il est de 55 %. Je vous invite à essayer mon algorithme pour en juger par vous-même.

3 commentaires

Ahhhh j'ai cramé la forêt des Landes !
SUPER COCO !

J'ai l'impression qu'il y a une erreur sur le pourcentage réel, il est identique au pourcentage d'arbres.

Mouai... C'est normal. J'explique mal, c'est de ma faute. Je devrais enlever ce truc.
En fait, le pourcentage d'arbre, c'est plutôt une probabilité d'avoir des arbres, c'est comme ça que je les génères. Mais j'affiche le pourcentage réel en comptant combien j'ai réellement d'arbres. En réalité c'était surtout pour pouvoir ajouter la balise <meter>.

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Tetris

Tetris

Peut-être que le Tetris a encore du succès ? En tout cas, c'était sympa à programmer, je ne m'en pensais pas capable. Vous avez en petit bonus le thème original de Tetris tiré de la version Gameboy.

0 commentaire

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Démineur

Démineur

Voici un petit jeu de démineur, facile à faire, mais néanmoins intéressant. Je vous ne ferai pas l'affront de vous expliquer son principe.

0 commentaire

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Fractales et ensembles de Julia

Fractales et ensembles de Julia

Les ensembles fractales sont des surfaces créées selon des lois mathématiques et ayant quelques particularités :
Une dimension non-entière.
Des similarités à petite échelle.
La plus connue est la Fractale de Mandelbrot qui est dérivée des ensembles de Julia. Je ne détaillerai pas trop ce que d'autres expliquent mieux que moi. Si vous voulez en savoir plus sur la Fractale de Mandelbrot, je vous donne rendez-vous sur le site du zéro.
La particularité de mon implémentation est l'exploitation des Workers en Javascript : c'est-à-dire que la génération se fera plus rapidement grâce aux capacités multi-coeur de votre ordinateur s'il en a.

0 commentaire

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Le Jeu de la Vie - Extensible

Le Jeu de la Vie - Extensible

Voilà le même Jeu de la Vie, mais avec une implémentation un peu différente, ici, on va travailler en espace infini. C'est-à-dire que si les cellules ont besoin de place, elles vont agrandir le cadre. C'était un peu plus dur à faire et je me suis pas mal gratté la tête avant d'y arriver. Amusez-vous bien.

2 commentaires

La configuration 0 0 1 / 1 0 1 / 0 1 1 sur un carré 3x3 et avec Noir = 1 et Blanc = 0 donne un motif qui s'en va à l'infini. Une amélioration possible serait d'ajouter l'option "mettre en pause". Bravo à toi pour ce petit jeu.

Merci pour ta remarque. L'option a été ajoutée.
Le motif que tu me décrit est connu, il s'agit d'un planeur. Il en existe une multitude. Certains ont même trouvé des générateurs de vaisseaux ou de planeurs. Je te conseille d'aller voir sur Wikipédia dont les articles sur le jeu de la vie sont assez complets pour plus de détails et de structures intéressantes.

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of

Le Jeu de la Vie

Le Jeu de la Vie

Le Jeu de la Vie est un automate cellulaire inventé par Conway en 1970. On définit des règles régissant l'évolution des cellules sur un plan et on observe le résultat.
À chaque instant, on regarde toutes les cellules et ses huit voisines :
Une cellule en vie le reste si elle a deux ou trois voisines, sinon elle meurt.
Une cellule morte naît si elle a précisément trois voisines.
Les mathématiciens se sont penchés sur ce jeu et en ont extirpé et nommé quelques structures. Parmi les plus fadas certains l'ont même utilisé pour créer des portes logiques.
Eux raisonnaient dans un plan infini, mais pour faciliter la conception on peut travailler sur un Tore Tore : chaque côté communique avec son opposé. C'est ce que j'ai fait ici et je vous invite à essayer mon implémentation qui n'a certes rien de novatrice, mais qui est assez pratique à utiliser grâce aux nouveaux standards HTML5.

1 commentaire

Juste une chose à dire : bravo ! C'est vraiment bien fait.

Pour ajouter un commentaire : éditez-moi !

En savoir plus Making Of