Un éditeur de circuit de trainsur un canvas Html5

François Crevola - Juin 2013http://geotrain.crevola.org/

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/

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/

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 impossiblehttp://geotrain.crevola.org/

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/

Bénéfices● Rotation, symétrie, ...● Zoom (tous niveaux)

François Crevolahttp://geotrain.crevola.org/

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/

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/ )

Optimisation

François Crevolahttp://geotrain.crevola.org/

(en utilisant Chrome. Plus lent sous Firefox. IE est le pire ! )