Invention: pseudo 3-D visual control cues on accelerometer-equipped display devices

Which is a fancy way of saying tablet or mobile phone.  This is so simple that it’s probably been done.

Image an on-screen control like a button object.  Typically I’d use a bit of a false drop-shadow to give the illusion of 3D.  With a phone that can sense movement, though, you could vary the position of the drop shadow in response to changes in position.  With devices that support ambient light sensors, you could also vary the strength of the shadow.

Imagine a UI with a single, “3D” button in the middle of the screen, with the device being held level.  The in-UI light source is coming from directly above the button, which is to say roughly where the user’s head is IRL.  As the device it tilted right (right side down, left side up), a simulated shadow is displayed on the right side of the button, growing longer as the tilt angle increases.  If you wanted to get gnarly about it, you could also begin to foreshorten the button image itself.

I whipped up a demo of how this works, deliberately exaggerating the side-to-side movement of the light source.  Take it from me, even a fast laptop makes a sucky render farm.  If, for some reason, you want the source for this, it’s a Blender file: http://gutenberg.vsi.dom/wp-content/uploads/2010/04/3d-button-shadow.blend.

Note: Depending on your version of Quicktime, your settings therefore, and the phase of Jupiter’s odd-numbered moons, you may have to single/double/context click the movie to get it to play.  You may have to wait for a month with two blue moons and then sacrifice an insurance sales rep to get it to play.  In case it’s not playing, you can download/watch it from here: http://gutenberg.vsi.dom/wp-content/uploads/2010/04/3d-button-demo.mov

http://gutenberg.vsi.dom/wp-content/uploads/2010/04/3d-button-demo.mov

…later…

Huh.  I’ve been Googling for something on this but am not having any luck.  This seems incredibly obvious.  What am I missing?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s