In Internet Explorer, you need to click once to activate the silverlight control.
When the control is activated, you can click on a blob and move it around. You can also hover over the bottom of the control to display the control panel. Via the control panel you can change the number of blobs and the falloff function used to generate them. When a blob is active (by clicking on it), you can also change its size.| Key | Description |
|---|---|
| space | Start/stop simulation |
| arrow up | Activate next blob |
| arrow down | Activate previous blob |
| arrow right | Increase active blob size, or increase number of blobs if none is active |
| arrow left | Decrease active blob size, or decrease number of blobs if none is active |
| enter | (Try it!) |
| f | Full screen |
| s | Show timing statistics |
| escape | Return to normal with no active blob |
This little project was created in order for me to be able to play around with the Silverlight technology. In particular, generating images on the client. This is however still very difficult, since there is currently only support for using images encoded as png or jpg. So, I had to write a PNG encoder to make it work...
The image is updated 10 times per second. The color of each pixel on a 128x128 grid is evaluated by for each blob passing the distance from the pixel to the blob to the falloff function. The result (a value between 0 and 1) is then multiplied by the blob color and accumulated. The resulting color (three separate values for red, green and blue) is then clamped and used to color the pixel.
When the image update is complete, it is encoded to PNG format and passed to the Silverlight Image control. The Image control has the size 512x512, and will therefore automatically perform a filtered scaling.
Last modified: 2008-04-08