共用方式為


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.

Matrix.zip

Comments

  • Anonymous
    September 28, 2007
    PingBack from http://www.artofbam.com/wordpress/?p=3702

  • Anonymous
    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 Michael

  • Anonymous
    October 08, 2007
    I did something bad. I put some sample code for a Silverlight application on my blog that ate memory

  • Anonymous
    October 08, 2007
    I did something bad. I put some sample code for a Silverlight application on my blog that ate memory

  • Anonymous
    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?