This application is optimized for Google Chrome (with browser dimensions at 1920 pixels wide and 1080 pixels high).
A significant part of my duties at Museum Arts involved developing digital interactives mostly with touchscreen monitors. This was the first touchscreen I was assigned to design and develop. A museum in Lubbock, TX needed an exhibit to teach the intricacies of irrigation. This particular interactive was intended to bring awareness to one of the largest sources of fresh water for farming in central United States, the Ogallala Aquifer. The interactive is broken up into three different ‘games’ that were created to help solidify the information presented in the graphic surrounding the touchscreen.
The first game is a rotatable 3D depth map of the aquifer developed using HTML5 Canvas and three.js. It’s important to note that the model is scaled vertially to exaggerate the depth. If I had left the scale even in all direction the aquifer would have appeared almost paper thin as it covers such a vast area of the US and is at its deepest around a thousand feet. The interactive also includes information overlays available to toggle in the bottom center menu. The overlays include information on depth and a map showing the states the aquifer lies under. The bottom right menu allows the guest to read additional information about the aquifer. Some of which is used in the other two games.
The final game is a test of knowledge combined with speed. I designed this game with a bit of competitive spirit in mind. The mechanics are that of a simple matching game with a timer displayed at the bottom. To achieve the highest score (100) you must be able to complete the matches without a single incorrect match within a handful of seconds. To add to the difficulty the fact pairs are chosen at random from a large list and sorted randomly, there’s no way to memorize any particular pattern!
Using HTML5’s Canvas I was able to create an animated green line linking every correctly matched pair. Once you’ve completed all 8 pairs you’ll be prompted to save your score, just like an old arcade! For this I developed a 9 button keyboard style interface since no keyboard is included with the interactive. The scores are stored in an array using HTML5’s local storage and the highest score is displayed on the main menu to encourage competition! The version you see through the link above is currently being used in the museum.