Compatibles avec les canvas HTML5
Obelisk.js est un moteur JavaScript permettant de créer des objets isométriques pixelisés.
Avec une API simple et flexible, vous pouvez facilement ajouter des éléments isométriques comme des briques, des cubes, des pyramides, etc. sur des canvas HTML5. Obelisk.js respecte consciencieusement un modèle de pixelisation.
Pour la partie technique : il y a un agencement des lignes d'un pixel de 1:2 conduisant à un angle de 22,6 degrés.
En pratique, ça donne ceci. Pour dessiner un cube, vous devez obtenir une instance d'une dimension, de la couleur et de la primitive Cube. La bibliothèque utilise ses propres classes pour les couleurs et les dimensions afin de définir correctement l'effet isométrique :
| Code javascript : | Sélectionner tout |
1 2 3 4 5 6 7 | var point = new obelisk.Point(270, 120); var pixelView = new obelisk.PixelView(canvas, point); var dimension = new obelisk.CubeDimension(120, 200, 60); var color = new obelisk.CubeColor().getByHorizontalColor(obelisk.ColorPattern.GRAY); var cube = new obelisk.Cube(dimension, color); pixelView.renderObject(cube); |
Vous trouverez sur le site des démonstrations ainsi que des tutoriels expliquant les différentes possibilités que l'outil offre. L'auteur explique d'ailleurs que ce n'est pas uniquement ludique et que ça peut avoir d'autres utilités.
Démonstrations :
- animation en gif : http://codepen.io/nosir/details/mdiHe ;
- input text : http://codepen.io/nosir/details/IxBJn ;
- dessin en pixel : http://codepen.io/nosir/details/rzaLA ;
- un bloc : http://codepen.io/nosir/details/ganrh.
Le site officiel. D'après un article sur DailyJS.Et vous ?
Pour quel type d'application cet outil pourrait-il vous intéresser ? Utilisez-vous une bibliothèque du genre ? Laquelle et pourquoi celle-là ? 
