jump to navigation

Slide3DToMouse June 14, 2010

Posted by Jose Luis Latorre Millas in 3D, Silverlight.

A Design Interaction Pattern for 3D Interaction – In this case the effect provided is a “companion effect” for the Project 3D to Mouse, this, enables us to slide horizontally and vertically a FrameworkElement regarding the calculated X & Y Angle variation based in a determined X & Y axis amplitude. Simply said moves a UIElement accordingly to how is it turning towards the mouse using the other effect.

Also you can use it to dynamically adjust the position of an element regarding another object angle, so please if you happen to think of another effect this behavior can be applied, let me know..
It has been designed to be used together with Project3DToMouse, behavior that can be located here: http://gallery.expression.microsoft.com/en-us/Project3DToMouse
The configuration is easy, and very similar to Project3DToMouse:

The only thing we add here is the amplitude  for the X & Y, named AmplitudeSlideX and AmplitudeSlideY
 This is good for faking reflections and flares, which you can look how it does look like at http://www.brainsiders.com/playground/slide3dtomouse/default.html.
You can also check how this and other effects look used together here: http://www.bcndev.net
And you can get this behavior here:  http://gallery.expression.microsoft.com/en-us/Slide3DToMouse

As for credits, the original idea of adjusting the position regarding the object’s angle to emulate a light effect is from my friend Edu Couchez, which by the way is a pretty good designer – hopefully he will get a blog soon – do you hear me, Edu? 😉 – and hopefully (again) you will see some work from him in short…

Hope you like  this one and, in short will publish some more 3D Behaviors, based on Interaction Design Patterns I have thought for 3D. By now you have seen three of them :).
To mention that I am pretty open to hear your suggestions on new interactions you might think of :).

Happy coding :)!



No comments yet — be the first.

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

%d bloggers like this: