Worm Hole and White Hole Space Effects in Silverlight

Nov 7, 2010

A good starry background is so much better with a nice wormhole in it. Do you agree?:

Download source code (note: I added the free purple “star spiral thingie”.png – see steps 5-6 below - used for the above effect to the source code download)

I tried to make a “clean” source code (read: slow, not optimized at all) for the sake of the tutorial and because I didn’t have time to speed it up yet. The code is very good candidate for pre-computations – once optimized it should run fine without any performance issues, including for multiple objects on Windows Phone 7.

Here is a step-by-step explanation of how I made the wormhole demo:

Preparing the images:

  1. Open http://fantasia.nokola.com 
  2. Create a nebula background without stars (from Creations). Edit Tint to make it blue-greenish
  3. Add stars (Creations | Stars)
  4. Go to http://www.spiralgraphics.biz/ and get one of their extremely nice planets. I’m using Arid World, but the rest work amazing too. By the time of this writing, their planets are free for commercial use! (note all license info on site)
  5. Note: you can skip steps 5-6 and just do the effect on top of plain background, it still looks nice. In Fantasia, paint a greenish 100x100 star-shape thingie (the base image for the wormhole) using the Sketch brush
  6. Apply Drain Flush effect (light) to make the star curved a bit, so it looks more like a spiral
  7. Open the starry spiral in GIMP (http://www.gimp.org/) and remove the background (Colors | Color to Alpha)
  8. Open Paint.NET (http://www.getpaint.net/) and combine the background with the planet and the spiral thingie to make the final picture!

Writing the source code:

I spent some time deciding on what I’d like to achieve with the effect. From movies, we all know that galaxies look like spiral and worm holes “suck in” matter from nearby stars.

Thus, I decided that the “drain flush” fantasia effect would look as if matter is “sucked in” to the worm hole. This was my first implementation. Once I saw that I decided to also use the ripple effect, which adds a lot to the “sucking matter in” realism (you can experiment by turning those on or off in the source code. Final wormhole is a combination of ripple + drain flush effects.

The white hole came for free Smile After finishing the wormhole, I noticed that doing a reverse ripple (without drain flush), produces nice radiance that seems to shine outwards, which looks like a white hole (supposedly..if you see one in real life let me know!)

Ok, I did one fundamental performance optimization – since the wormhole is 100x100 and the background is much bigger, it makes sense to create a smaller Image element and put the 100x100 wormhole there. This way you can have a nice wormhole without redrawing the whole background on every frame (significant speed improvement, especially if hardware acceleration is enabled for the background image).

  1. Get the Ripple and Swirl (drain flush) effects from http://wpffx.codeplex.com/
  2. Redo them in C# (SwirlHelper.cs) for 2 reasons:
    1. Windows Phone 7 currently does not support custom pixel shaders
    2. I wanted to have few extra parameters (center and radius) and make the effects apply an alpha*2 linear opacity mask so they blend nicely with the background. I chose alpha *= 2 because I wanted a nice visible center and linear mask fadeoff.
  3. Hook up CompositionTarget.Rendering, load the images, cut out the 100x100 wormhole source image
  4. On every frame, Ripple then Swirl (wormhole) or inverse Ripple (white hole)

Some further ways to improve this, would be to spin the worm hole faster or slower depending on various conditions (e.g. if the wormhole is about to appear, animate the opacity and slowly spin it into existence.)

Hope you like it! Please comment!