So I've been hacking on the Akihabara HTML5 video game engine. I'm trying it out while I put together a platformer. I think I've come to an answer for the question, "Why does Mario have a wide stance?" Being from Minneapolis, MN I've heard my fair share of wide stance jokes (thanks Larry Craig) … in this video I talk about video game sprites with wide stances and why that is important for platformers. I also discuss how I applied this new knowledge to some code improvements in Akihabara.
I'm sorry to have recorded you such a long video, I didn't have time to record a shorter one. ;)
Galaxy Box is a CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, I used 3D CSS properties available in Safari 5 and on the iPhone and iPad. Check out this video of the demo in action and then interact with the 3D CSS3 Galaxy demo yourself.
Each star is a div with border-radius applied to make it round and a white or light blue box-shadow to add glow.Since the stars are actually flat 2D objects, normally when you rotate them this would become very apparent and destroy the illusion. The trick is that when the galaxy is being rotated each individual star is being rotated in the exact opposite direction so that it is always facing the viewer.
The stars are placed procedurally by JavaScript, and I also used JavaScript to add interaction to the demo. You can rotate or spin the galaxy with some momentum on the desktop. On iOS you can also rotate and spin the galaxy with your fingers, or pinch to zoom. Try the demo now in Safari!
I was feeling inspired after seeing the cool pure CSS pulsing rings on the Transmit 4 website that launched this morning so I put together this demo. (Did you notice the rings? You had to browse there with Safari to see them.)
I lead the team of people for Student Unions & Activities at the University of Minnesota who built this touch screen building directory installed in Coffman Memorial Union. The directory is a web app running in WebKit on a Mac Mini attached to a touch screen monitor. No Flash was used. Many of the graphic elements like the panels and buttons are generated entirely with CSS3. The 3D floor diagrams were created with Google SketchUp. Here's a first look at the project which launched early on Friday, January 15th:
We used a usability test driven design process. We were able to completely redesign portions of the project in the week before it launched based on direct user feedback. We are continuing to test and make iterative improvements to the directory. Special thanks to the totally epic team that made this possible: Ellie, Ethan, Kamran, Ken, Sungho, and Trent. My leadership role included project management, creative direction, information architecture (IA), and user experience (UX). My development role included core PHP and MySQL work, as well as JavaScript work on the drag-and-drop administrative tool for the map data.
Update: This project won 4th place overall in the University of Minnesota 2011 Quality Fair! That's a huge honor, and I want to congratulate my former team at Student Unions & Activities for their continued work on this application.
FlipBox is another LightBox clone (a JavaScript photo gallery tool) where the new twist is a fun "3D" tile flipping animation effect. It is much easier to demonstrate than to explain, so I decided to do my first screencast with audio (be gentle!) so I could show you what FlipBox is all about. Incidentally, Mac OSX 10.6 Snow Leopard has a great free screen capture tool built into QuickTime. Sorry in advance if the volume is a little low. Real action starts at 0:45:
More About FlipBox
FlipBox is jQuery-based and makes use of my rotate3Di plugin to create a 3D-like isometric tile flipping effect using the CSS3 transform property currently only supported by Safari, Chrome, and Firefox 3.5+. (That's another reason why I wanted to record a video demo.) If you happen to have an awesome web browser, you can check out a live demo of FlipBox.
In it's current state, with only a little preparation by the user, FlipBox is already a simple to use LightBox-like tool. There's a few other demos with this concept I hope to put together, and I would also like to write proper documentation and do a release.