Raymond Hill's Web site

My blog: Raymond Hill's blog

Programming projects for fun

• Jigsaw Puzzle using HTML5 <canvas> tag
  • Seventh iteration: Support of arbitrarily complex tessellations?
    • Since a piece can now be a complex polygon (this was a requirement of making pieces snap with each other), this opens the door to create puzzle pieces of pretty much any shape. Performance will be the main limitation (points per polygon.)
    • Currently working on Voronoi tessellations (Updated May 2011)
  • Sixth iteration (3-Jul-2009):
    • Release notes:
      • Now using HTML5 <audio> tag to render sound effects, no longer using Flash-based Sound Manager 2. Firefox 3.5 supports natively the HTML5 <audio> tag.
      • Added persistence. One can now leave the jigsaw puzzle page and come back without losing its progress.
      • This can also be used to exchange partially completed puzzle with others. (Example: Half-done puzzle)
    • Try it:
      • Small: [todo]
      • Best on 1680×1050 monitors:
        • Peterson Cr Bridge: 200 pieces (Picture from Andrea Schafthuizen)
        • Parrot: 200 pieces (Picture from Anna Cervova)
      • Best on 1920×1200 monitors:
        • Garden in Prague: 300 pieces (Picture from Petr Kratochvil)
        • Historical Houses: 300 pieces (Picture from Vera Volsanska)
        • Sarande town: 300 pieces (Picture from Petr Kratochvil)
  • Fifth iteration (29-Jun-2009): New web page (Open Social compatible)
    • Rewrote the web page to be compatible with Open Social such that the jigsaw puzzle can be embedded on people's home page.
  • Fourth iteration: Support of edge profiles
    • Try it:
      • Easy: Autumn Fruits (Image from Petr Kratochvil)
      • Medium: Chalet next to tarn (Image from Petr Kratochvil)
      • hard: Tower in Cesky Krumlov (Image from Petr Kratochvil)
      • nightmare: Melbourne Australia (Image from Michael Stirling)
  • Third iteration (9-Jun-2009):
    • Release notes:
      • Pieces now snap together rather than to the background (this required an ajacent-polygons merging algorithm)
      • Now using HTML5 canvas' isPointInPath() to detect whether a point is inside/outside polygon, no longer need PNPOLY from W. Randolph Franklin
      • Various improvements/rewrite
      • TODO: for polygons with large hole(s) in it, uses polygon as clipping region (Working on it)
    • Try it:
      • Easy: Green Sweat Bee (Image from Jon Sullivan)
      • Medium: Golden Gate Bridge in San Francisco (Image from Jon Sullivan)
      • Hard: Church in Sarande (Image from Petr Kratochvil)
      • Nightmare: Unusual Building (Image from Petr Kratochvil)
      • Nightmare (might be more enjoyable using v3 rather than v2): Church Gable Paintings (Image from Magnus Rosendahl)
  • Second iteration (4-Jun-2009):
    • Release notes:
      • Rotation of pieces added, this add a level of difficulty (configurable: puzzleRotate=number of steps per 360 degrees: 1=no rotation, 8=45 degrees/step, 30=12 degree/step, 90=4 degrees/step, etc.)
      • Thumbnail preview added (with simulated shadow, I couldn't make the built-in shadow implementation work on Firefox, this needs investigation)
      • Code rewrite toward OOP and efficiency (more left to do)
    • Try it:
      • Easy: Bread and Beer (Image from Jon Sullivan)
      • Medium: A Mum (Image from Jon Sullivan)
      • Hard: Ardara, Irland (Image from Jon Sullivan)
      • Nightmare: Church Gable Paintings (Image from Magnus Rosendahl)
  • First iteration (31-May-2009)
    • Release notes:
      • First version
    • Try it:
      • Easy: Apricot colored rose closeup (Image from Magnus Rosendahl)
      • Medium: Los Angeles skyline (Image from Jon Sullivan)
      • Hard: Mountain (Image from Paolo Neo)