A train layout editor
on an Html5 canvas
François Crevola - June 2013http://geotrain.crevola.org/
Features
● Inspired by real world toy : Geotrax® from
FisherPrice®
● Put / get / move / remove tracks on the layout
● Move...
Before
François Crevola
● Eventually take pictures
of layouts created by my
children.
● Graph paper (« papier
à petits car...
First tries
Drag'n drop of bitmap pictures
François Crevola
Pro :
● Easy
ctx.drawImage(...)
Cons :
● Doesn't nicely fit (c...
Eurêka !
● One day, just for fun : looking for a javascript/canvas
implémentation of the logo programming language. Playin...
Benefits
● Rotate, mirror, ..
● Zoom (any level)
François Crevolahttp://geotrain.crevola.org/
Benefits
● Merge : each track is a polygon, so we just 
have to make the union of polygons
François Crevola
+ =
Easy !
(th...
Optimization
François Crevola
Use 3 canvas (transparent) 
instead of only 1 :
- background
- track layout
- foreground (tr...
Optimization
François Crevolahttp://geotrain.crevola.org/
Upcoming SlideShare
Loading in …5
×

Track layout designer on an html5 canvas

1,133 views

Published on

The "making-of" a track layout software running on an html5 canavs, writtten in javascript.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,133
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Track layout designer on an html5 canvas

  1. 1. A train layout editor on an Html5 canvas François Crevola - June 2013http://geotrain.crevola.org/
  2. 2. Features ● Inspired by real world toy : Geotrax® from FisherPrice® ● Put / get / move / remove tracks on the layout ● Move map up, down, left or right (virtually infinite world/map) ● Zoom in or out ● Create new tracks (merge existing tracks) ● XML Import / export François Crevolahttp://geotrain.crevola.org/
  3. 3. Before François Crevola ● Eventually take pictures of layouts created by my children. ● Graph paper (« papier à petits carreaux ») 5mm x 5mm / pencil http://geotrain.crevola.org/
  4. 4. First tries Drag'n drop of bitmap pictures François Crevola Pro : ● Easy ctx.drawImage(...) Cons : ● Doesn't nicely fit (can but is time consuming) ● Ugly (I'm a programmer, not a graphic artist) ● Too much work to add a new type of track ● Can't zoom http://geotrain.crevola.org/
  5. 5. Eurêka ! ● One day, just for fun : looking for a javascript/canvas implémentation of the logo programming language. Playing with the turtle. François Crevola …. conclusion : I will use vector graphics !! ( 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. 6. Benefits ● Rotate, mirror, .. ● Zoom (any level) François Crevolahttp://geotrain.crevola.org/
  7. 7. Benefits ● Merge : each track is a polygon, so we just  have to make the union of polygons François Crevola + = Easy ! (thanks to ClipperJs) http://geotrain.crevola.org/
  8. 8. Optimization François Crevola Use 3 canvas (transparent)  instead of only 1 : - background - track layout - foreground (track being  moved under mouse pointer,  selecting area for merge, ….) Take full advantage of GPU ! http://geotrain.crevola.org/ (idea from  http://www.html5rocks.com/en/tutorials/canvas/performance/ )
  9. 9. Optimization François Crevolahttp://geotrain.crevola.org/
  10. 10. Optimization François Crevolahttp://geotrain.crevola.org/

×