Silverlight 2 Real-time Physics Website

It's been 5 years since I developed my previous website in 2004 with Macromedia (Adobe) Flash. A couple of months ago I decided to work on a makeover, which was long overdue. As a media & computer scientist and .Net developer it was a matter of course to give Microsoft's Silverlight 2 a try. I love the ability to write the code in my favorite language C# and having most functionality of the .Net library at hand.

Lightning it up

However, the first Show Stopper was the lack of basic HTML or rich text support in Silverlight 2. I was quite surprised and disappointed that Silverlight Text controls don't provide basic HTML formatting or at least WPF's Inline Hyperlink. I think a lot of people need such a feature. Some guys on Twitter told me that there isn't really a demand for this and it could be done with other techniques, but sometimes performance does matter and an overlayed DIV using Silverlight's windowless mode is just terribly slow.

HTML Link support is essential for this project, because the HTML formatted text is stored in XML files and loaded asynchronously by the ContentPages and then deserialized to POCOs. The controls in turn use Silverlight's great Data Binding mechanism to present the data and load the images.

This XML-based approach gives me the ability to change the content of my site without any recompilation. I also have a fallback solution for non-Silverlight visitors and all that without a redundand information storage. Non-Silverlight visitors could use the POH (Plain Old HTML) version, which is simply the XSL transformation of the underlying XML data. And there's another advantage: If I ever decide to store the data in a database, I just need to change the internal functionality of the data assembly and integrate an ORM framework like NHibernate. The domain models and therefore the DataBinding won't be touched.

My Silverlight website uses the Dependency Injection framework NInject. The whole project, including the physics engine, is developed keeping a contract first design in mind. The usage of the DI pattern and a appropriate framework helps a lot to separate the concerns and produce code with a high maintainability.

Extended Silverlight LinkLabel Control

As I mentioned earlier I was really annoyed by the lack of HTML support in Silverlight and it forced me to extend the Silverlight LinkLabel Control so it supports HTML tags. I was also able to improve the performance of it. TextBlock's performance is still bad, but that's not the fault of the LinkLabel control.

Here is how it works: The original LinkLabel control "parses" the input text and creates a HyperlinkButton for each of the links it founds. The rest of the text is splitted into single words and for each word (!) a TextBlock is created. These many controls are then all added to a WrapPanel, which provides the word wrapping functionality.

I measured the LinkLabel control and encountered that the high number of TextBlocks are killing the performance. Therefore I extended the LinkLabel control by a word grouping functionality. Single words are now grouped to n words and assigned to one TextBlock. This modification reduced the number of TextBlocks and in turn increased the performance significantly. However, a lot of text has still a huge negative impact on the performance. So please Microsoft, implement WPF's Inline Hyperlink into Silverlight. WPF is a desktop technology and has the Inline Hyperlink, but Silverlight as a subset of WPF and RIA platform doesn't come with Inline Hyperlink?! I don't get it.

Soft Body Physics Engine

With my passion for computer graphics and physical simulations it was also a must that my new website simulates real-time physics. That's why I developed a flexible Silverlight soft body physics engine and a simple Renderer. The soft body physic is based on a Newtonian mass-spring system and also implements the Pressure Soft Body Model by Maciej Matyka. The resulting differential equations are solved numerically with a Verlet integration. The engine is flexible designed and could easily be extended. It comes with a constraint system, various types of bodies and force generators, basic collision detection and so on.

The work on the engine is in progress and there's still a lot to be done, but if you want to see it in action, just go to my website click near the balloon and throw it around or grab a corner of the content element. If I find the time, I will continue my work on the engine, hack some demos, release it as open source and blog about it. But I demand high standards of myself and I currently have other projects in the queue, so don't expect a release soon. Especaillay the implemented collision detection is just basic and the development of a proper collision detection system takes some time.

Conclusion

It was a long and tricky task for my first Silverlight and XAML project, but mostly it was a lot of fun and Silverlight 2 is an awesome step in the right direction. I don't regret that decision. Silverlight is definitely now my favorite platform.


Update 08-07-2009

I submitted my website to the Summer Silverlight Coding Competition. Feel free to vote for it here.