• Like
  • Save
Track layout designer on an html5 canvas
Upcoming SlideShare
Loading in...5
×

Track layout designer on an html5 canvas

  • 569 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
569
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. A train layout editor on an Html5 canvas François Crevola - June 2013http://geotrain.crevola.org/
  • 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. 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. 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. 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. Benefits ● Rotate, mirror, .. ● Zoom (any level) François Crevolahttp://geotrain.crevola.org/
  • 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. 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. Optimization François Crevolahttp://geotrain.crevola.org/
  • 10. Optimization François Crevolahttp://geotrain.crevola.org/