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.

Matrix.zip

Comments (10)

  1. dmurillo says:

    Nice, but there’s one catch… the browser’s CPU usage spikes to around 45%… ouch!  🙁

  2. Rudolf Olah says:

    So when can I check this type of thing out on Linux or OS X?

  3. mscherotter says:

    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

    Michael

  4. Synergist says:

    I did something bad. I put some sample code for a Silverlight application on my blog that ate memory

  5. I did something bad. I put some sample code for a Silverlight application on my blog that ate memory

  6. rich says:

    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.

  7. Tony says:

    But really what’s with that CPU hogging?!

  8. Lar says:

    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%.

  9. Meistro says:

    Cool? Why the heck would someone put this on their site when it eats up CPU time?