Using the Random command in Silverlight we can simulate rain falling with out risking a repetitive effect.

In the above example a single control houses the rain drop graphic and its storyboard animating from the top of the screen to the bottom. I then use the Random command in Silverlight to decide where the rain drop will fall, what angle it will fall at and how deep (using scale) into the image it will appear to be.


The slider controls the amount of rain drops that fall per second. At the left end of the slider there will be 1 rain drop produced every 40th of a second, at the right end there will be 10 rain drops produced every 40th of a second. This is done using a ‘For’ loop, the amount of loops being controlled by the slider.

Possible enhancements

A control/slider could be added to control the wind direction and speed.
An effect placed on the background to simulate less light as rain fall increases.

Get the code

Feel free to grab the code here and start playing!

Using the Random command in Silverlight we can give the impression that elements are thinking for themselves. By clicking the ‘add a bug’ button in the below example the Silverlight will create a new bug with a ‘bugLife’ value of 100. After that everything else that happens is controlled by the Random command starting off with the colour of the bug and then the direction it faces, the speed it moves at and finally how long it is untill the bug makes a new set of decisions.


The bug will lose 1 point of life every time it makes a new decision and a further 4 points if it bumps into the wall (the edge of the screen). When the ‘bugLife’ value reaches zero the bug will die and cease movement.

Future enhancements

I have already got additional values set up so that I can allow the user to customize each bug a little. For example you could give the bug extra life, tell it to make decisions quicker or speed it up. So I plan on making a popup/interface for the user to interact with these settings.

I also plan on adding a trait to each bug that will decide on how each bug will act when it comes in contact with another bug. For example 2 bugs could fight, run away from each other or reproduce and create more bugs. These new bugs would retain qualities from the 2 that produced them.

Finally I want to add the ability for the user to place food on the stage. This will attract bugs within a certain range and replenish their ‘bugLife’ while the food lasts.

Get the code

Feel free to grab the code here and start playing!

Kuler is an Adobe site allowing you to set up and save your own colour palettes.

So… “Surely Adobe is not producing something for Microsoft Silverlight?” I hear you say…

Well, no. But, the good guys at Codeplex have developed a set of tools called ‘Colorful‘ that allow you to get the Kuler colour palettes inside the Microsoft Expression Design and Blend interface. Once you download the tools and go through a couple of steps that I will explain shortly, you end up with an additional window inside Design and Blend that looks like this;

Installation

Step 1; Download the tools from Codeplex here.

Step 2; Unzip the files and copy the dll files into the required locations – there are 2 dll files for your Expression Design folder and 2 dll files for your Expression Blend folder.

Step 3; Edit the shortcut you use to load your Expression Design application and your Expression Blend application in the following way. 

For Expression Design – Right click on the shortcut you use to launch Design (not the actual Application), select ‘Properties’. Inside the popup window that opens edit the Target field by adding the following after the existing text “ /addin:Colorful.Design.AddIn.dll“. (A key point to make here is that the Codeplex site uses ‘-’ instead of ‘/’. This worked for Expression Design for me but not for Expression Blend, let me know if you find otherwise).

For Expression Blend – Right click on the shortcut you use to launch Blend (not the actual Application), select ‘Properties’. Inside the popup window that opens edit the Target field by adding the following after the existing text “ /addin:Colorful.Blend.AddIn.dll“. (A key point to make here is that the Codeplex site uses ‘-’ instead of ‘/’. This worked for Expression Design for me but not for Expression Blend, let me know if you find otherwise).

Now you can load up either package and explore the additional tools available to you. To leverage the maximum gain from this you will want to head over to the Kuler site and sign up for an account – free of charge.

Once you have an account you can start creating your own colour swatches – but beware, you will be required to use Adobe’s Flash plugin, just be sure to repent for your sins afterwards.

Once you have created your swatches, named, saved and shared them with the community, you can access them inside Expression Design and Expression Blend. You can use the Search field to find your swatches. The example at the top of this post shows a return for the Search ‘Microsoft’, the example below shows a search result for a colleague of mine, whom has a collection of Microsoft colours setup up already.

The first way to use the access the colours for your project is to simply use the eye dropper tool and click on the colour required. Failing that you can click on the ‘#’ button underneath the Colour set.

This will copy the colours into your pasteboard temporarily, simple paste onto your design area and 5 boxes will appear each containing a colour from that palette.

If you are in Blend then doing this will also automatically add the 5 colours as ‘Local Brush Resources’.

The second button in under the Colour swatch allows you to output the palette as a Expression Design swatch. You can then import this in by clicking the ‘More Swatches’ button in the ‘Appearance’ tool set.

Finally the third button is a link to the Kuler site.

Be sure to report any feedback to Codeplex and suggestions for what you would like to see on future updates.