If you’re at MassArt, you have to stop by the Wentworth gym (just across Huntington Ave.) and check this out: Expresso Fitness has created a stationary bike with moving handlebars, a shifter, and, yes, a 3D graphics engine. And it is awesome.

By providing you with an on-screen avatar and over 50 courses to choose from, the Expresso system prevents your brain from acknowledging the painful, boring, physical fact that you’re really just sitting in one place and pedaling for 30-60 minutes. You’re distracted from any physical sensations when you realize that there are other people on the course with you (a gender-balanced and racially diverse crowd, as it turns out), and, as in a video game, you are motivated to beat them, to do better. So you start passing your fellow cyclists, even though you know that they’re not real, and they don’t care. You can literally ride right through them, and they won’t even blink. Keep an eye on your pacer—he’s really the one to beat, as you’re pedaling through Muir Woods, or an Aztec ruin, or even up in space.

If fake bicyclists aren’t enough to motivate you, maybe real ones will. Like an old-school arcade, Expresso tracks each rider’s performance, presenting a sort of high score list at the end of each ride. Did you beat Tommy M.? Ouch, looks like Jane S. tore through your best time! If you provide the bike with your email address, it will notify you when other, real people beat your times. And of course you can log on to the website at any time (from home, not while on the bike) to track your progress, miles pedaled, calories burned, and so on. Since your motions are being recorded, you can also race yourself—your “ghost”—and improve your mad (stationary bike) skillz.

This Internet-connected bike isn’t just monitoring you, though: it’s recording everyone’s rides, aggregating the data, and generating some interesting factoids. That’s how Expresso knows that people riding its bikes pedaled 1.4 million virtual miles, burning 44 million calories in September, as reported in the company newsletter.

For a long time, gymnasia have been decidedly low-tech places: think medicine balls, stretching mats, and free weights. But with tools like Wii Fit and Expresso bikes, our workouts are going digital.

From Michael Chang, the guy who brought true scalable type to Processing, comes a demo reel of data vis interaction inspiration. In my own work, I’ve focused on just “getting it to work” and display the data, but now I want to make sure the whole experience is as beautiful and fluid as in Chang’s work.

I shared my admiration with the folks at Igloo Games, and got a response from Nathan, the designer and developer behind Dizzy Bee, the company’s first product. He agreed to answer a few questions for me, sharing some of the process behind this innovative game and UI.

Scott: How many others did you work with to create the final product?

Nathan: Three total. I did all of the programming and design. Art was handled by my good friend, and the sounds were contracted out.

How did the concept for the game originate? Can you describe your process for evolving the concept and new ideas?

The game started as a twist on a labyrinth game. I felt there would be a lot of accelerometer-based flat games, so I decided to try a vertical version. (Many people seem to prefer to play it flat, though.) I’m a big fan of character-based action, so I like to put eyes on just about everything—rather than balls and holes, I wanted to have good guys and bad guys. I felt like controlling multiple good guys would be really compelling, so I started with that. It wasn’t clear what was going on, who the main character was, and what you were trying to do, so I decided we’d have a main character to draw your focus, and we would build toward controlling multiple friends—that’s were the cages were born. Then we put in the basic bad guy that moves almost the same as you, and we knew we had a game. After that, it was just playing with different physics aspects to make unique characters. The birds just have a maximum speed that they go, so they kind of fall slowly. The big guy is much larger and heavier than you, so he doesn’t fit in certain places. I tried tons of different enemies/objects out. The ones I could make a cool stage out of stayed, and the rest were tossed.

Once you had the idea for the game play UI (which uses only the accelerometer as input), how did you start thinking about the UI elements that appear between stages?

I often have to make temporary art while I’m prototyping things. I felt I could draw a blob and call it an island, so that’s where the island/sea concept came from. I had originally gone for a more novel approach for unlocking stages. I had wanted each island to have a theme and a port city. After you complete the port city (kind of an introduction to that island), you could play any level on that island. So after beating the first island you would have 3 new port cities, and if you beat those right away you would have 12 new levels to try. I still like the idea, but the difficulty ramping wasn’t working. People would find a stage that was way too difficult, and the unlocking of islands wasn’t really a reward at all, so I changed it to a more traditional progression.

As for the Results Screen, I wanted good replay value, so I decided on 3 things to grade people on. [The three scales that determine one’s score are: fruits saved, flowers collected, and percentage of fruits that exited the level in a chain—meaning, they were saved at the same time. See screenshot above.] I wanted those to be very prominent. Also, if the fruits lived or not and if they chained or not are very important, so I wanted that to be visually represented as well. The rest I just left up to my artist, and what you see is what he came up with.

How would you describe the Dizzy Bee UI?

It’s an up-less spinny UI. As I was making the game, I took care to make sure that nothing after the splash/loading screen had an “up”. The dialog boxes originally could be rotated 360 degrees as well, but unfortunately I couldn’t get the refresh going fast enough to make them smooth, so I had to settle for 90-degree increments.

Another thing I like to do with UIs is take one theme and apply it to everything. For example, I made a level editor in Mario vs Donkey Kong 2, and in that there were lots of things that would scale up and down with an elastic type effect, finally settling on the correct size. In Dizzy Bee, all of the UI elements are like a spinner on a nail with a weight at the bottom, so they like to keep some momentum and eventually settle in the right spot. Also, each weight is a little different, so each individual element moves slightly differently.

What terminology did you use internally to describe all these elements? I tend to use “UI” to refer to more traditional interface elements, like the text and tap-able buttons that appear outside of the stages.

I use UI very broadly to mean anything that’s not the in-game action. There are a few terms to specify which part more closely. I use front end to describe any title screens/credits/file selectors. Level select is the island/sea section screen. HUD is anything that is shown while playing the game, such as players’ lives or health. (Incidentally, Dizzy Bee has no HUD.) Pause menu for… well, you know. Lots of companies use these same terms in different ways, which has caused me some confusion in the past.

I’ve called it an “orientation-independent” UI. Were you or others on the Igloo team thinking in those terms, or did you use other language to describe what you were building?

I was just thinking in terms of Dizzy Bee is an “up-less” game, but I looked back at an old e-mail, and I also used the term “orientation independent”. There are a lot of things I do during development that I question if anyone will even notice. Thanks for recognizing it, and pointing it out.

People have been talking about resolution-independent user interfaces for years—such a UI would gracefully scale larger and smaller, and look good on any display, whether an old 72 ppi CRT or a higher-resolution 163 ppi iPhone.

But I’ve never heard anyone dream of, let alone implement, an orientation-independent interface, one in which text and other elements would always be displayed “upright” from the user’s perspective, regardless of the physical orientation of the display in space.

The creators of the new iPhone game Dizzy Bee have done just that, however, and the execution is completely flawless. Just as the iPhone itself has set the standard for multi-touch interfaces, Dizzy Bee has broken new ground and established a successful structure for future orientation-independent UIs.

Here’s how it works: UI elements rotate freely so that their bottoms point down in the physical world, as detected by the iPhone’s accelerometer. This is appropriate, given that the game itself is played by rotating the physical device in order to direct the bee (and other elements) as they “fall” in the direction of gravity. Here’s an example of the UI shown between levels—this is one of the islands around which Dizzy Bee navigates:

And here’s that same screen, as it appears when I rotate the device around 180 degrees:

Notice how, while the island and compass rose remain fixed on the display (so they appear “upside down” here), all the text elements rotate to stay “upright.” Here’s a shot of the screen that appears when you complete a level:

Here’s that same screen, but I’ve tilted the device 225 degrees clockwise:

From this, I will infer four new guidelines for successful orientation-independent interfaces:

1. Each UI element’s top and bottom edges must be defined.
2. A point at which the rotation occurs must be specified.
3. Elements should be placed so as not to overlap too much, no matter the rotation.
4. Background graphics should be appropriate at any rotation.

And as if a ground-breaking UI weren’t enough, Dizzy Bee is also just really fun to play, with cute graphics, great sound design, and lots of puzzling levels to play through—for only $2.99! See it in action here:

I just found out about this project called “You Move You Interact,” described as:

…an interactive installation, where one is supposed to build up a body language dialogue with an artificial system so as to effectively achieve a synchronized performance between the real user’s body and the virtual object itself. The project aims at exploring a spatial sphere, where the user/performer is invited to develop his own creative inspiration based on his own body gestures and movements. [ymyi.org]

Also interesting: It’s done using Processing.

An innovative use of motion sensors and a familiar video game encourages coordinated action on the part of otherwise non-connected individuals.