Category: behavior

3D (2.5D) Interaction Experimental site

If you have followed me on my latest posts you should have seen some of my Behavior experiments for 3D interaction, trying to emulate already existing Real world & 2D interaction design patterns as MouseOver, Click, etc… in 3D (or Silverlight’s actual 2.5D, for Desktop & Windows Phone).

I have put the site www.bcndev.net as a sample or playground thinking on nothing but on providing a 3D interactive experience, with the points that I am not being paid for (it’s a volunteer work for promoting the Barcelona Developers User’s group event) and I have thought on nothing (I repeat myself but I want this clear) apart from the experience, so do not expect a great degree of indexability, accessibility, usability or even performance… the Matrix background effect is a killer of CPU resources …

Disclaimers: If I had the time, hopefully I will do it “when I can” I will implement a “effect adjuster” for adapting it to reduce depth layers & elements on each layer and, maybe, even the falling speed… to adapt it to get a decent framerate… I’ve got on mind other optimizations but sadly not the time, so sorry in advance if this is going too slow for you to appreciate the 3D interactions.
I have added GPU acceleration & left all the debugging on for you to be able to see the performance. It should not go very bad if you have a decent GPU so please leave me a message if it does not, and include the FPS. Thanks!!!

This site is using the 3D behaviors I have published at the Expression Gallery and some others that I have yet to polish before publishing, some of the new ones are part of an experiment of providing 3D effects to 2D elements (usercontrols in fact) and allowing them to nest their DataContexts and thus providing an interesting way of navigating the information. This has yet to be polished but you can see it working when you press the “+ Info” button and then the “Ver Detalles” button…” then just also press over a session or speaker…
As for the behaviors, you can see & get them here:
• http://gallery.expression.microsoft.com/en-us/Project3DToMouse
• http://gallery.expression.microsoft.com/en-us/Slide3DToMouse
• http://gallery.expression.microsoft.com/en-us/MouseOver3D
• http://gallery.expression.microsoft.com/en-us/Loop3d
• http://gallery.expression.microsoft.com/en-us/Animate3D

I would greatly appreciate any feedback you can provide, thanks!!

And, as always, have fun!

Note: The matrix effect is an evolved version of the original code from Terence Tsang, http://www.shinedraw.com – thanks Terence for all those great samples :).

Animate3D, another Silverlight behavior

Animate3D is a a Silverlight Design Interaction Pattern for making easier to implement 3D Interaction – In this case the effect provided is 3D animation that launches in response to a concrete event providing a PlaneTransform animation which can animate a target object with the three Axis, X, Y, Z and its Global and Local offsets. It also allows us to decide an initial and a final alpha for the animation.

We can also indicate if we want the actual state of the object to be the Final state of the animation, providing on the behavior only the first animation state. We can of course add both states, (initial and final). But, for the sake of displaying a not projected control with text (if it has any projection Silverlight 4.0 actually shows it blurred no matter what we do) this option has been added.
It is inspired trying to implement an easy way of defining & executing very quickly 3D animations  that respond to user actions.

It has been designed to be used together with the other 3D Behaviors, that have been published at the Expression Gallery, including this one:
• http://gallery.expression.microsoft.com/en-us/Project3DToMouse
• http://gallery.expression.microsoft.com/en-us/Slide3DToMouse
• http://gallery.expression.microsoft.com/en-us/MouseOver3D
• http://gallery.expression.microsoft.com/en-us/Loop3d
• http://gallery.expression.microsoft.com/en-us/Animate3D

You can also check how this and the other mentioned effects look used together here: http://www.bcndev.net (it is not published right now but will be in short…)
Also I would love to see places where this behavior(s) are being used or any design/implementation you might have done with them.

If you like the behavior, I’d be appreciated if you could vote some stars for this behavior, my thanks!

Have fun 🙂

Loop3D, a new Silverlight 3D Behavior

Loop3D is a a Silverlight Design Interaction Pattern for 3D Interaction – In this case the effect/behavior provided is a3D Loop – a continuous – animation  on the three Axis, X, Y, Z which enables us to turn an element on a certain speed and easing over a concrete axis.

It is inspired trying to implement a planet and its satellites movement which turn around the planet at different speeds and angles. Anyway it can be used to whatever effect you consider, a halo system, etc..

It has been designed to be used together with the other 3D Behaviors, that have been published at the Expression Gallery, including this one:

You can see how it helps implement different effects at the Expression gallery.

You can also check how this and the other mentioned effects look when used together in a consistent way here: http://www.bcndev.net

I’d like to see or hear if you do like this behavior(s) and if you have used them in any design/implementation or whatever you might have done with them 🙂

Also, if you like this behavior it would be appreciated if you give me some stars at the expression gallery. My thanks!

As for the code, you have it at the Expression Gallery, http://gallery.expression.microsoft.com/en-us/Loop3d