Particle effects like fire, fog, snow, ripples in water are very captivating. I love the way Max OSX uses these effects to create a great user experience. For example OSX has a nice ripple effect in the background when you add a Dashboard Widget. That effect has been my inspiration for creating something similar in WPF. Fortunately WPF makes it a lot simpler to create effects like that using the 3D API.

I had done effects like fire, plasma, jello and also water using the VGA graphics. Back then it was pretty cumbesome but the techniques employed are still valid. Unfortunately I don’t have any of the source code so it was back to Google for help. After a bit of searching I found a great tutorial for creating the water effect.

In short the tutorial suggests that the ripple is a change in the elevation of the different points on the surface. The elevation changes happen sinusoidally (like a sine wave) coupled with a damping effect. The way I created the effect is by using a MeshGeometry3D and subdividing it into a grid of points. More the number of points in the mesh, more smooth is the effect. Once we have the mesh of points, the next step is to change their elevation. In my case my mesh was positioned at Z=0 (ie. in the XY-plane), so all I had to do was to change the Z-coordinate. To get an animated effect, I set up a DispatcherTimer at an interval of 100 milliseconds and at every interval I use the technique from the tutorial to manipulate the Z-coordinate.

The end result can be seen in this Quicktime movie. You can also download the binary and check it out on your own machine. Make sure you have the RC1 release of .Net Framework 3.0 installed.

Reusability

One of the challenges I have right now is in making these effects reusable. Making 2D effects reusable is more simpler since most of them can be encapsulated into a Storyboard but effects which require 3D Mesh deformations and morphs are more challenging. There are couple of options however:

• Subclass Viewport3D and use the CompositionTarget.Rendering event
• Use Attached Properties to attach to different UI controls

I will explore these and put up some posts once I have the desired results.