Matrix Falling Characters in Silverlight
Once you start working with a good design tool enough, it changes the way you think and see the world. Learning to draw nude figures gave me an appreciation for drawing and then seeing shade and shadow. With demonstrating and using Microsoft Expression Blend with Silverlight, that has happened to me. In my previous post, I was explaining how I could see MindManager maps in the XML and how it was similar to the scene in the Matrix. Why couldn't I show what I meant with Silverlight? It was remarkably easy: about 20 minutes of my time.
I created one XAML file for the background and one for a character. The background was just black. The character had the size, coloring, gradient opacity, and animation. All I would do is continually create characters and put them in randomly:
function DropCharacter()
{
var host = m_root.getHost();
var character = host.content.createFromXaml(m_characterXaml, true);
var text = character.findName("Characters");
var Charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890~!@#$%^&*()_+{}|[]\:\";'<>?,./";
text.Text = "";
for (var index = 0; index < 10; index++)
{
var charIndex = Math.floor(Math.random() * Charset.length);
text.Text = text.Text + "\n" + Charset.charAt(charIndex);
}
var dropCharacter = character.findName("DropCharacter");
dropCharacter.addEventListener("completed", function(animation, nullArg)
{
m_root.children.remove(character);
});
var left = Math.random() * m_root.Width;
var top = Math.random() * m_root.Height;
character["Canvas.Left"] = left;
character["Canvas.Top"] = top;
m_root.children.Add(character);
setTimeout(DropCharacter, m_frequency);
}
I have attached the source code so you can see how it's done. If you want to put the falling characters on your site or blog, just put this tag in the HTML:
<iframe align="right" src="http://silverlight.services.live.com/invoke/216/matrix/iframe.html" frameborder="0" width="150" scrolling="no" height="100"></iframe>
All I ask is that you link back here.
Note: 10/8/2007 the code above causes a memory leak in the browser it's hosted in. See this post to download code that doesn't leak.
