Tag Archives: KineticJS



I don’t usually write about what goes on at our staff meetings (“what happens at the staff meeting, stays at the staff meeting”), but today the possibility of a staff lottery for the prime parking spot behind the office piqued my interest (and I don’t think this a trade secret). So, I spent a grand total of five minutes finding the original KineticJS code (sorry, HTML5 browsers only), modifying it with staff initials, and uploading for live use the “EDI Wheel of Parking”. Give it a spin here.

KineticJS Map


Here‘s the start of my vision for a web map of FRI‘s offices. Next steps include finding a current floor plan (the Foothills Model Forest became the Foothills Research institute in 2007), expanding contact information, and adding email links.

*note: the code for this map was almost entirely stolen from this KineticJS lab.

HTML5 Robot


My big plan a while ago, before I realized WordPress themes are much nicer than anything I could ever come up with myself, was to design my own home page for my website (darrenwiens.net). It was going to include an HTML5 robot with moveable parts (powered by KineticJS) that would reveal navigational links on mouseovers. Here is as far as I got before abandoning the project. It’s kinda fun, though, so check it out.

*note: must use a modern browser (i.e. no IE).

edit: it appears changes to the KineticJS library have made this example unusable, although it’s probably something I’ve done…

Random Movement Game!


Building off of last week’s Friday fun, this afternoon I made this quick HTML5 game. It’s basically the same as a game on Kongregate called Particles. The rules are simple: keep your mouse cursor (haven’t tried this on iPad yet) inside the playing area as long as possible without letting a circle hit it. It’s also fun just to watch the circles move around. Enjoy!

Google Maps API/HTML5 Interaction


Although this map looks simple, I have a feeling it will be a game-changer for me (actually, it is pretty simple once you figure it out). The map itself is fairly basic: the entire world (256 x 256 pixels). You can’t interact with it directly (ie. no pan, zoom, etc.) because it’s underneath an HTML5 canvas. Everything else is made with HTML5 and KineticJS: longitude lines, circle marker, and textbox.

The real beauty of this map is the ability to pass HTML5 events (in this case, “dragstart” and “dragend” ) to the Google Map. Specifically, you can send pixel coordinates of where you drag objects to (“clientX” and “clientY”) and convert them to Lat/Long coordinates on the map.

circle.on('dragend', function(event)
            var proj = map.getProjection();
            var point = new google.maps.Point(event.clientX, event.clientY);
            var location = proj.fromPointToLatLng(point); // lat/long coordinates

That’s the meat and potatoes of it. I added a geocoder to figure out the name of the state/province of the coordinates, and, why not, some KineticJS animations as an example of actually using the HTML objects.

Note: this example requires an HTML5 compliant browser – that means no Internet Explorer or you’ll blow its mind.