In the summer of 2009, members of the Disney Branded Network Group at Disney Online were given a "HTML5 Challenge" project. The purpose of the contest was to educate ourselves on new elements of HTML5 and develop a cool application using elements of HTML5. Doing some research, I discovered an awesome use for the Canvas feature of HTML5, after happening across a demo by a programmer in Denmark named Jacob Seidelin. Similar to the old "Doom" videogame, it allowed you to render a 3D map using JavaScript. It was super cool, but, I wasn't really sure what practical use it had. Passing an intern in the hallway who needed help in finding a cubicle for a meeting, the idea suddenly became obvious - why not create a fun game-like interactive map of the 4th floor of Disney Online!? The task was daunting. First I had to build a replica of the entire office in Photoshop under a grid pattern and draw every single wall - consisting of more than 1200 squares. Once that was complete, I had to label X and Y coordinates for every single square on the grid - that's over 22,000 numbers. Due to the nature of the way the code is written, modifying the JavaScript would mean entering over 1000 coordinates for cube numbers and landmarks and starting-points. None of this could be automated - it all had to be done by hand. It also entailed plotting over 1500 points for every single wall of the office, on a grid of over 11,000 squares, and creating over 220 individual images in Photoshop for every office on the floor. In the words of Han Solo, "She may not look like much, but she's got it where it counts, kid. I've made a lot of special modifications myself." Unfortunately, by taking this road, I disqualified myself from the "HTML5 Challenge" project, because I knowingly broke half the rules. One rule was that our application had to use 2 elements of HTML5. Mine only uses one element - Canvas. Another rule stated we had to personally write all the code from scratch - no using prebuilt libraries. I broke that rule too. As I mentioned earlier, the base of all this code was modified from open-source-code I found elsewhere. Finally, the application was required to run in Firefox 3.5 and that is the only browser unable to render it at all! Nevertheless, I forged ahead, because I knew this HTML5 application would not only be cool and fun to create, but it would actually be very practical and serve to help all Cast Members in navigating the "maze" of Disney Online. Plus, it would offer the solution in a creative and entertaining way! And creative entertainment is what Disney is all about! Whether you are a seasoned Cast Member, and know your way around the office very well, or are brand new to Disney, I hope you find this application to be a fun and entertaining way to help you find your way around Disney Online!
Parts of southernmost section of the map (cubes near the top of the page) can sometimes "lock up" when navigating. If you encounter this problem, play around with it. Reload the page and try to move your avatar on a slightly different trajectory, and you should be able to avoid the coordinates which cause the map to "freeze" and stop functioning. In the lower 2/3 of the map, there are no known errors.
This page uses nothing but HTML and CSS and JavaScript to render the map and 3D screen. There is no Flash. There are no database calls. There are no server-side languages. Everything is written completely in standalone, editable code, running entirely in your browser. You can "View Source" and see everything and change any parameters you want. Create new graphics. Rearrange walls. Alter colors. Make new cube numbers. Reposition cube numbers. Change starting coordinates. You name it, everything can be modified with code changes.
In the tradition encouraged by Walt, any Disney Online Cast Members are invited to "plus" this map. Offer suggestions. Write cleaner code. Fix bugs. Whatever you can contribute to improve the project, please feel free to do so. Everyone from the highest executive-level down to the newest intern has ownership in this and should feel free to plus it. If you plus the map, you should add yourself to the credits below and specify what you improved. Please reference this floorplan guide to triangulate coordinates for adding items. (Trust me, you can't do it just by looking at code. With over 11,000 possible coordinates, you're gonna need a visual cross-reference.)
Original Design & Programming:
Open-Source Code Libraries: |