Le document présente un éditeur de circuit de train développé en HTML5 par François Crevola, inspiré par des jouets comme GeoTrax. Il permet de manipuler des rails de train dans un espace virtuel, avec des fonctionnalités telles que le zoom, la création et la fusion de rails, ainsi que l'import/export au format XML. Des optimisations ont été mises en place pour améliorer les performances en utilisant plusieurs canevas et les accélérations GPU.

1. Un éditeur de circuit de train
sur un canvas Html5
François Crevola - Juin 2013http://geotrain.crevola.org/

2. Fonctionnalités
● Inspiré par des jouets existants : Geotrax® de
FisherPrice®
● Poser / prendre / déplacer / supprimer des rails sur
le circuit
● Déplacement du circuit vers le haut, le bas, la
gauche ou la droite (monde/carte virtuellement
infinie)
● Zoom avant et arrière
● Creation de nouveaux rails (fusion de rails existants)
● Import / export XML
François Crevolahttp://geotrain.crevola.org/

3. Avant
François Crevola
● Prises de photos des
circuits créés par mes
enfants.
● Papier à petits
carreaux 5mm x
5mm / stylo
http://geotrain.crevola.org/

4. Premiers essais
Drag'n drop d'images bitmap
François Crevola
Pours :
● Facile
ctx.drawImage(...)
Contres :
● Se cale pas très bien (ça
pourrait mais ça prendrait
du temps)
● Moche (Je suis
programmeur, pas artiste)
● Trop de travail pour
ajouter un nouveau type
de rail
● Zoom impossible
http://geotrain.crevola.org/

5. Fortuitude
● Un jour, juste pour s'amuser : recherche d'un implémentation en
javascript / canvas du language de programmation logo. S'amuser
avec la tortue. Dessiner « accidentellement » des rails ...
François Crevola
…. Eurêka ! Je vais utiliser des graphismes vectoriels !!
( http://www.calormen.com/logo/ )
cs repeat 4 [fd 20 rt 90 fd 20 rt 90 fd 20 rt -90]
http://geotrain.crevola.org/

6. Bénéfices
● Rotation, symétrie, ...
● Zoom (tous niveaux)
François Crevolahttp://geotrain.crevola.org/

7. Bénéfices
● Fusion : chaque rail est un polygone, donc il
suffit de faire l'union des polygones.
François Crevola
+ =
Facile !
(merci ClipperJs)
http://geotrain.crevola.org/

8. Optimisation
François Crevola
Utiliser 3 canvas (transparent)
au lieu d' 1 :
- arrière-plan
- circuit de train
- avant-plan (rail en train d'être
déplacé, sélection d'une zone
de fusion, ….)
Permet de bénéficier des
accélérations du GPU !
http://geotrain.crevola.org/
(idée venant de
http://www.html5rocks.com/en/tutorials/canvas/performance/ )

9. Optimisation
François Crevolahttp://geotrain.crevola.org/
(en utilisant Chrome. Plus lent sous Firefox. IE est le pire ! )