Question

Recently I came across this Pete Blois’s behavior named Explode. This is the link :-

http://blois.us/blog/2009/07/explode.html

When you click on the grid the grid just explodes looking like real 3D effect even though Silverlight doesn’t have a true 3D effect.

I studied the code but couldn’t get the core logic of the behavior. Can anybody explain me what is the function PrepareShards, ApplyForce doing? Also what is the purpose of Shards class? I think it is trying to simulate a point which has X,Y and Z. I studied the code for 1/2 hour but couldn’t get at all what it is doing. I know I don’t need to understand the logic behind this.

But what if I want to create some advanced effects like this? It’s always good to study what’s going under the hood. Has anybody written a blog post explaining what is this code or any book where the author teaches this type of real life stuff? Or if you all have the time can you explain me what is it doing?

Answer 1

The author gives you the code, but it is not commented. That turns it into a puzzle!

The way this code works is:

• It is a Behavior using System.Windows.Interactivity
• The behavior is attached in XAML to the element you want to explode
• Explode hooks the mouse events so it knows the mouse position when clicked
• In StartExplode it first calls PrepareShards
• PrepareShards creates a Popup which contains a Grid which contains a matrix of Rectangle elements
• The new Popup looks exactly like the original but it is no longer interactive: it’s fake
• It “hides” the original interactive element by setting its Opacity to zero
• A Shard is a wrapper around each Rectangle to keep track of its position and animation
• ApplyForce is called to animate all the rectangles

What is ApplyForce doing? Physics. It’s just formulas.

So this is just a combination of fakery and clever 2D and 3D graphics. Once you understand the overall structure of how it works, the individual steps are less daunting: just figuring out how to get the API to do what you want to do.

For example, the author needs to convert the tiny grid region (2, 3) of the original interactive framework element into a bitmap image and draw it onto the corresponding rectangle in the grid. Once drawn, due to the retained-mode nature of the graphics subsystem, it never needs to be worried about again.

Effects like this are not easy to write but they are not impossible either and they can be a lot of fun. You will definitely learn a lot of techniques that will serve you well when write other less “gimmicky” applications!