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="https://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.
Comments
Anonymous
September 28, 2007
PingBack from http://www.artofbam.com/wordpress/?p=3702Anonymous
September 28, 2007
Nice, but there's one catch... the browser's CPU usage spikes to around 45%... ouch! :-(Anonymous
September 28, 2007
So when can I check this type of thing out on Linux or OS X?Anonymous
September 28, 2007
Rudolf, Silverlight works today using Safari on OSX. On Linux you can take a look at the Moonlight project: http://www.mono-project.com/Moonlight MichaelAnonymous
October 08, 2007
I did something bad. I put some sample code for a Silverlight application on my blog that ate memoryAnonymous
October 08, 2007
I did something bad. I put some sample code for a Silverlight application on my blog that ate memoryAnonymous
December 05, 2007
I love all the MS haters looking for something to hate here. Personally i've never been a computer lover.. let alone a platform lover, but silverlight rocks. Good work MS.Anonymous
July 21, 2008
But really what's with that CPU hogging?!Anonymous
September 18, 2009
Cool. I'm just started do dev in SL. I also noticed Firefox went to ~40% cpu when the small version is visible in my browser. When I scrolled down to comment, FF was no longer taking more than 1-2% cpu. When I went to full screen on the Matrix, FF cpu went to ~60%.Anonymous
October 16, 2009
Cool? Why the heck would someone put this on their site when it eats up CPU time?