GeoJigsaw
GeoJigsaw is a community driven geographic jigsaw puzzle. If you are feeling creative you can create a puzzle and share it with the puzzle community. If you are feeling competitive, try beating the high score on someone else's puzzle.
Click here to view the live application.(works best in Microsoft Internet Explorer and Mozilla Firefox)
Click here to download the source code from ArcGIS Online. A simpler version of this application is available on github here.
GeoJigsaw is a JavaScript-based web application inspired by a Silverlight application developed about two years ago called Puzzle Map. Unlike a recently published geogame that uses Facebook, in this application we wanted to explore anonymous collaboration. That is, anyone can anonymously create, share and play puzzles.
Voronois
In the app developed two years ago, the puzzle design was static. In this application we wanted to offer puzzles of varying difficulty and size so we needed to implement a technique of dynamic puzzle creation. After a little research we discovered this example of a voronoi tessellation using D3. D3's voronoi implementation and associated SVG-based visualization library are the basis of this game.
Unlike the D3 sample, our app did not use completely randomized points. If a user created or selected an "impossible" puzzle then a 10 by 10 grid of points is created and nudged slightly before being turned into 100 piece voronoi diagram using D3. This was only part of the puzzle (excuse the pun), each piece needed the addition of one or more tabs. Tab addition is essential to give the game its recognizable jigsaw look. Through a process of iteration, tabs are appended to any side of sufficient length and reversed if an opposing tab exists.SVG Filters
The finishing touch to give the puzzle a realistic look is the application of an inner bevel using a SVG filter. SVG filters are hardware accelerated in Internet Explorer and Mozilla Firefox but not in Google Chrome. Unfortunately the Chrome's software rendering of SVG filters makes complex puzzles almost unplayable. This may change in future releases of Chrome.
Security
Puzzles designs, ratings and scores are stored in ArcGIS Online (AGOL) hosted services. We intended the application and associated services to be accessed by non-AGOL users. This meant that AGOL user credentials could not be used to restrict access to prevent unanticipated malicious activity. As such, we used the security model discussed in the previous post, that is, app registration and an intermediate web proxy.
Libraries Used
- ArcGIS API for JavaScript by EsriEsri’s JavaScript library for mapping and analysis.
- Bootstrap by Twitter IncA useful and comprehensive UI framework. This application leveraged a subset of bootstrap pertaining to buttons and input elements.
- D3.js by Mike BostockPowerful data visualization library based on HTML, SVG and CSS.
- jQuery-SmartResize by Louis-Rémi BabéDebounced and throttled resize events for jQuery
- iQuery by jQuery Foundataion IncA JavaScript framework for DOM manipulation and a foundation for many other frameworks.
- Sylvester by James CoglanVector and Matrix mathematics modules for JavaScript.
Conclusion
This project demonstrations that modern browsers are more than capable of impressive visualizations without the need of plugins such as Silverlight or Flex. We also wanted to experiment with anonymous game play, time will tell if the lack of user identification is an incentive or disincentive to play. Good luck!
