Archives par étiquette : html5

Démineur multijoueurs

Voici un démineur multi-joueur que nous avions développé il y a plus d’un an et demi. Il n’utilise pas le webgl, mais seulement l’élément canvas d’HTML5 muni d’un contexte 2D. L’application a été testée avec Chrome.

La partie réseau est gérée avec les websockets et utilise un serveur NodeJS, vieux pentium 4 hébergé dans nos locaux (nous sommes désolés s’il y a d’éventuelles ruptures de service 😉 ). Au cas où personne n’est connecté, des bots peuvent intervenir, avec plus ou moins de dextérité.

L’application est disponible ici : http://www.spacegoo.com/demineur

Application de sténographie avec HTML5

La sténographie est l’art de dissimuler des données. Nous proposons une application utilisant l’élément CANVAS d’HTML5 afin de dissimuler du texte crypté en AES 128 bits dans des images.

Le processus est le suivant pour l’encryptage :

  1. le texte en clair est crypté en utilisant la clef fournie en AES 128 bits. La sortie est en base 64,
  2. chaque caractère du texte crypté s’écrit donc avec 6 chiffres binaires (0 ou 1).  Chaque caractère est séparé en 2 groupes de 3 bits
  3. Chaque groupe de 3 bit va être encodé sur un pixel de l’image, le premier sur le canal rouge, le deuxième sur le canal vert et le troisième sur le canal bleu. La parité de la valeur du pixel doit avoir dans chaque canal la même parité que le bit encodé, quitte à rajouter ou enlever 1 à cette valeur. Cependant cette modification n’est pas perceptible à l’oeil nu.
  4. L’image est affichée sur un canvas qui peut être sauvegardé en .PNG,  format sans pertes liées à la compression.

Le processus de décryptage effectue ces opérations dans l’ordre inverse.

L’application est diponible ici : http://www.spacegoo.com/steganography

 

Pavages de Penrose

Pour notre future démo, nous nous sommes intéressés aux pavages de Penrose.
Il s’agit de pavages non-périodiques du plan construits à partir de règles locales. Ainsi, contrairement aux pavages classiques périodiques qu’on peut voir par exemple dans les mosaïques de l’Alhambra, ceux-ci ne possèdent aucune règle qui permet de déduire l’ensemble du dessin par une suite finie de rotations/translations.
En résultent des motifs surprenants et très beaux.
D’un point de vue scientifique, ils servent à étudier les quasi-cristaux, notamment pour déterminer leurs figures de diffraction. Alain connes s’en sert également comme d’un exemple privilégié pour illustrer sa géométrie non-commutative.

Nous allons décrire un algorithme pour construire de tels pavages à partir de triangles d’or. Un triangle d’or est un triangle isocèle dont le grand côté est \varphi fois plus long que le petit côté. Il n’en existe que deux types :
On définit alors une procédure de découpage de ces triangles. Partant de l’un ou l’autre cas, on le coupe en deux suivant la méthode suivante :

  • A gauche :  \lVert SR\rVert = \lVert RQ \rVert ou de manière équivalente : S = (2-\varphi)*P + (\varphi - 1)*Q
  • A droite :  \lVert RP\rVert = \lVert RS \rVert   ou de manière équivalente : S = (\varphi - 1)*Q + (2-\varphi)*R

Les triangles générés par un tel découpage sont également des triangles d’or, ce qui permet de réiterer la procédure. Il faut noter qu’à chaque subdivision, on a le choix entre une division « à gauche » ou « à droite », ce qui permet de générer autant de façon de paver le plan que nécéssaire.
Nous avons fait le choix d’une méthode particulière, qui génère de beaux pavages, et en voici l’algorithme, en pseudo-code de type javascript, avec une gestion manuelle de la pile de récursion, pour éviter de la faire exploser à l’éxécution :

// lvl donne le nombre de subdivisions
penrose = function(lvl) {
var Q = [100, 100];
var R = [100, 500];
var P = [716, 300];
// lvl désigne la distance qui sépare le triangle de la subdivision maximale autorisée
var root = Triangle(P, Q, R, "aigu", lvl);
var stack = [];

stack.push(root);
// Tant que la pile de triangle non-subdivisés est non-vide :
while (stack.length > 0) {
var zde = stack.pop ();
if (zde.prof <= 1) { // cas terminal
zde.draw ();
}
else {
// split renvoie le point S suivant la procédure décrite plus haut
var S = zde.split ();
if (zde.style === "aigu") {
stack.push(Triangle(zde.R, S, zde.Q, "aigu", zde.prof-2));
stack.push(Triangle(S, zde.P, zde.R, "obtus", zde.prof-1));
}
else {
stack.push(Triangle(zde.R, zde.P, S, "aigu", zde.prof-1));
stack.push(Triangle(S, zde.P, zde.Q, "obtus", zde.prof-2));
}
}
}
}

Ce code termine puisqu’à chaque étape, on ne génère que des triangles dont la profondeur est strictement inférieure au triangle courant et que le cas terminal ne renvoie rien.

Nous l’avons utilisé en javascript en dessinant un tel triangle découpé avec 16 niveaux de profondeurs :

La démo est disponible ici :http://www.spacegoo.com/penrose

Convertir ses applications HTML5 en Flash

html5 to flash icon

Le gros problème des jeux HTML5/Flash est que l’on ne peut pas les proposer à la majorité des sites internet regroupant des jeux flash.
Ce problème est résolu en utilisant notre convertisseur HTML5 to Flash.

Le .SWF produit remplace l’élément OBJECT ou EMBED par une IFRAME menant vers le jeu HTML5. Cependant plusieurs restrictions existent concernant la page affichant le SWF :
– la taille de l’élément OBJECT/EMBED doit être d’au minimum 450×350 pixels
– l’élément OBJECT/EMBED ne doit pas avoir l’attribut allowscriptaccess='never'. C’est peu fréquent mais présent sur certains sites de jeux flash (par exemple sur kongregate.com).

Le SWF produit peut être compressé d’environ 50% en utilisant SWFTOOLS. La commande à exécuter est la suivante : swfcombine -dz file.swf -o file_new.swf.

Accéder à notre convertisseur HTML5 to Flash

Une petite démo de SPACEGOO MAZE en faux Flash :

Editeur de circuits en html5

Nous voulons créer un jeu de voitures en 3D en WebGL.  Nous avons donc commencé par créer un éditeur de circuits.

Créé en html5 et php, ce logiciel permet à l’utilisateur d’importer une image de fond (vue aérienne ou tracé d’un circuit connu) puis d’en créer une représentation 3D sous la forme d’un fichier ply (stanford).

Voici un exemple du résultat [circuit de Dijon] L’essentiel de la procédure consiste à définir des courbes de Bézier qui représenteront le bord du circuit. On peut alors éditer les points de contrôle de chaque courbe par simple clic/glisser. On dispose à tout moment de la touche ‘u’ pour revenir en arrière.

On peut ensuite calculer le maillage et l’exporter en ply, comme présenté dans la vidéo ci-dessous :

Spacegoo Circuit Editor
Runtime
1:20
Compteur de vues
203