Archives des Puzzle

Constellations de Ian Snyder

Constellations est un jeu, un puzzle, inventé par Ian Snyder et programmé par lui-même en HTML 5 dans un « canvas » 2D.

Il s’agit de résoudre les puzzles en manipulant des élastiques accrochés à des punaises : pour le faire il suffit de reproduire le schéma linéaire des tensions, accroches et croisements proposé en haut de l’écran.

Le niveau que vous avez atteint est stocké dans le « localStorage » du navigateur de sorte que si vous revenez sur la page, les puzzles résolus ne seront proposés qu’en utilisant le bouton « back » en bas à gauche. Le bouton « skip » permet d’abandonner un puzzle pour s’attaquer au suivant.

Pour les sons, Ian Snyder utilise la bibliothèque « howler.js » (https://howlerjs.com/) développée par James Simpson. C’est dommage qu’il utilise une ancienne version de la bibliothèque, car les règles ont changé depuis 2018 : on ne peut plus utiliser l’API Audio avant que l’utilisateur n’ait interagit avec la page. Du coup, on risque de ne pas avoir de sons. (pour remédier au problème, il faut remplacer le fichier * howler.js v2.0.3 ) par le fichier * howler.js v2.2.0) Dans la console de développement sous Google Chrome (touche F12) on peut lire le message :

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
setupAudioContext @ howler.js:2133

Références

Lien vers une version sonore : https://www.cyclonium.com/ianestailleurs/constellations/

Jouer à Constellations : http://ianiselsewhere.com/constellations/

Voir le site de Ian Snyder : http://iansnyder.games/

L’article de « Libération » sur le sujet : https://www.liberation.fr/futurs/2018/03/26/constellations-la-musique-de-l-elastique_1638964

Note pour les programmeurs JavaScript

À noter dans le code, au hasard des lignes, pour choisir un son au hasard parmi 9 disponibles, Ian Snyder utilise la formule compacte :

1+((Math.random()*9)|0)

au lieu d’un plus clasique 1+Math.floor(Math.random()*9)

L’explication est qu’en JavaScript, l’opérateur « | » (ou inclusif binaire) n’opère que sur des entiers. Le résultat de (Math.random()*9) est donc tronqué à sa partie entière avant de passer par le « ou » avec zéro, qui évidemment conserve les bits en l’état. L’écriture est plus courte et on évite un appel de fonction.

Croisillons

À partir de pièces de puzzle représentant des portions de chemins, on forme le graphe d’une permutation que l’on peut interpréter comme un automate à états fonctionnel.

La page présente une vue des permutations sous forme de puzzle, c’est une introduction aux permutations, aux automates à états et tables de multiplication par croisement de fils.
L’idée est de former les permutations et d’autres applications à l’aide de pièces de puzzle que l’on fait glisser dans l’espace de construction.

Automate pour effectuer les multiplications et divisions des nombres par 2 en base dix, construit à partir d’une permutation.

L’automate est fonctionnel : l’utilisateur peut entrer un nombre à traiter, les liens activés sont mis en surbrillance au cours du traitement par l’automate et montre les étapes de la multiplication avec les retenues.

Pour fabriquer un automate, on réserve un nombre de fils égal au produit du nombre d’états possibles de l’automate par le nombre d’entrées.
On relie les états d’entrées en haut aux états de sortie en bas à l’aide des pièces du puzzle. Les états de sortie sont associés à la valeur à délivrer à chaque nouvelle entrée traitée.
Dans la palette d’outils, l’utilisateur a accès à des exemples préfabriqués.
Il peut modifier la structure en ajoutant ou supprimant des lignes et des colonnes.
Il peut définir le plan de travail en fonction de l’automate à construire et spécifier les entrées et sorties de son automate.
La structure ainsi construite peut être sauvée ou partagée sous forme d’URL.

Les pièces du puzzle permettent également de créer des graphes qui ne sont pas des permutations.