Back in the early days of computer gaming one may remember the Comanche flight simulator. The simple 3D engine used for this and other games is based on a so called voxel rendering engine. Searching the Internet for this technique I found this nice article from Alex Champandard and this one from Codermind. Putting two and two together, again I paid attention to the WriteableBitmap class that is part of Silverlight 3.

To emphasize the .NET Open Space 2009 that is starting tomorrow here in Leipzig, I used a special background texture for the sky. Just press the start button and use W-A-S-D of your keyboard to fly around the terrain. I will clean up the sources after the upcoming and put it here on my blog. So stay tuned.

WASD

Fire with WriteableBitmap

Playing around with the new WriteableBitmap class in Silverlight 3 I remembered the time I started with VGA programming in assembler. After a quick research I found this simple algorithm to visualize the effect. I added the interactivity via mouse click and keyboard input to create new fire initiators.

The source is available for free: FireEffect.zip (12 kB)

Tunnel Effect with Silverlight

Another small sample using dynamic generated animations in Silverlight.

The source are available for free: TunnelAnimation.zip (7 kB)

Release of Silverlight Whiteboard

image

After a long run on a bumpy road our Trian.Whiteboard finally found it's way to the MSDN Code Gallery. Even if Microsoft Silverlight 3 is knocking on our doors this smart sample is a good start to get in touch with this technology. It shows how to use XAML to create a Rich Internet Application that communicates with a Windows Communication Foundation service in the background.

Check it out: http://code.msdn.microsoft.com/whiteboard
Play with it: http://playground.pixelplastic.de

.NET Bootcamp zu Silverlight und WPF

Am 20. März 2009 wird unter meiner Regie das dritte .NET Bootcamp der .NET User Group Leipzig stattfinden. Wie sollte es anders sein, geht es dabei um Microsoft Silverlight und die WPF. Die Registrierung ist ab heute aktiviert. Die Plätze sind limitiert, daher schnell anmelden. Falls ihr nicht wisst, was hinter den Bootcamps steckt und wie diese ablaufen, kann ich diesen Artikel von Torsten empfehlen.

IMG_3361

A new sample about BezierSegment usage in Silverlight

You may know about the good old Windows screen safer Mystify. Thinking about my last post about the BezierCurve element I tried to rebuild this waving stroke animation. And here is the result:

Once again: feel free to download the sources.

For a long time I was looking for an elegant way to present my tons of pictures to friends and visitors of my blog. I played around with Silverlight to implement my own picture viewer, but wasn't happy with all my attempts. Last week I gave Deep Zoom a chance and now think that I found the right solution for my problem. You may have seen those fancy samples about the Deep Zoom technology like the Hard Rock Memorabilia. If you just don't know what Deep Zoom is I can recommend this presentation of Blaise Aguera y Arcas at TED.

Deep Zoom Composer - compose modeDeep Zoom Composer is a nice and handy tool to generate the tile patterns for each zoom level of a big image collection and to build up the so called sparse image scene graph with visual support. This graph contains the layout information (origin and scaling) of each image that is part of a Deep Zoom scene. Running the export process (3rd and last step) an XML file named SparseImageSceneGraph.xml will be produced. This is the source for the sparse image generation process that will create the tiles tree containing all the small image assets and an Deep Zoom Collection XML file (dzc_output.xml). The dzc_output.xml file in turn can be interpreted by a Silverlight application using the MultiScaleImage element to get access to all image tiles in the tree structure. That's the way Deep Zoom Composer works.

The problem and its solution

This process has a small problem for me. Looking at the large amount of pictures I've shoot since 2001 (around 30.000) it would be a hassle to manually arrange those (collection by collection) using the Deep Zoom Composer, where you have to drag & drop and scale each image on the surface. Okay there is the "Arrange in a Grid" feature that (in my opinion) does not result in a very eye-catching layout. That's why I came to the conclusion of writing a small .NET console application that will manage this issue for me in an automatic way. SparseImageSceneGenerator was born.

Compared to the process of Deep Zoom Composer this tool will help you to automate the composing process to generate the SparseImageSceneGraph.xml. The command line application only needs at least two arguments: a path to the location of your images and an output path to the resulting SparseImageSceneGraph.xml file. SparseImageSceneGenerator reads and analysis the properties of all images to create a nearly square shaped layout for all images. Before going into detail here is the result:

How it works in detail

image

(1) After reading all properties (size and metadata) of all pictures the sum and the square root of this sum for all aspect ratios will be calculated.

image

(2) The square root now limits the width of a rectangle where each image will be aligned row by row (including a cell padding between each image). In the figure above the sum of the aspect ratios of the two portrait images results in 1.333 (plus padding). The 3rd landscape image (AR = 1.5) does not fit into the row, because it will overflow the limit of 1.87 (plus padding). So it wraps to the next row. This generated grid now contains the final layout of all images.

image

(3) In a final step we have to adjust each rows width to be 1.0. This means scaling the width and origin of each image and row. That's it.

As you can see in the above sample the result is not a perfect square. It depends on the number of images. The more, the better (as you can see in the sample above). In addition SparseImageSceneGenerator supports the SparseImageTool that is part of the DZC installation to merge smoothly into the whole generation process. SparseImageTool is the command line version of the export process of DZC to create the final result based on the SparseImageSceneGraph.xml. The result is (as we know from the DZC export process) the dzc_output.xml file and the tree of tiles.

Download

Feel free to download the current version and please give me feedback on this tool:

After Microsoft released the final version of Silverlight 2.0 last week I decided to update some of my samples I published before. Converting the Silverlight 2.0 Beta 2 based samples (physics attractor and the bending bezier curve) was straight forward without any problems. Instead the Silverlight 2.0 alpha based clock sample made some more work. That's why I decided to setup a new solution and start from scratch by rewriting the code behind files.

Feel free to download the source files:

Clock-2.0.zip

Handling the BezierSegment as path in Silverlight

This small sample will show you the possibilities of Silverlights (and WPFs) BezierSegment class. To draw a bezier curve you have to encapsulate the BezierSegment as part of a Path element as shown in the following lines of code:

1 <Path x:Name="Curve" Stroke="#FFFFFFFF" StrokeThickness="2"> 2 <Path.Data> 3 <PathGeometry> 4 <PathGeometry.Figures> 5 <PathFigureCollection> 6 <PathFigure x:Name="Figure" StartPoint="27,56"> 7 <PathFigure.Segments> 8 <PathSegmentCollection> 9 <BezierSegment x:Name="Bezier" Point1="227,156" Point2="267,36" Point3="380,30" /> 10 </PathSegmentCollection> 11 </PathFigure.Segments> 12 </PathFigure> 13 </PathFigureCollection> 14 </PathGeometry.Figures> 15 </PathGeometry> 16 </Path.Data> 17 </Path> 18

The curve itself is rendered using four points: the StartPoint attribute of the PathFigure element and the three points Point1, Point2 and Point3 of the BezierSegment. Try to play around with this sample and feel free to have a look into the sources.

Get Microsoft Silverlight

Very simple Silverlight physics demo

This is the result of a 3h implementation of a simple physical sample. Each dot is attracted by the mouse cursor. So just move your mouse over the field to see the effect. The sources of this very small sample can be downloaded here.