Playing around with Silverlight 1.0 the last week:

(Click image to run demo in a new window). It's fun to watch.

Managing the lines turned out to be slightly tricky and I never came up with a solution I liked a lot. (I didn't spend too much time on it ... there's probably something better). There's no "paint" or draw line command in Silverlight 1.0. So, the code needed to manage all of the lines and properly update them with each frame. Flash makes it easy with a DrawLine function. To reduce flicker, I also wanted to maintain the same line from 'frame' to 'frame' in the Silverlight demo. So, I had to create some arrays and toggle visibility appropriately.

The effect shown is called, "spring." When the distance between 2 particles falls below 100, they begin to act like a spring. That's when the line shows up -- and the intensity (or opacity) of the line indicates the inverse of the distance between the two particles.

For extra fun, press the left mouse button and drag it around. It's a pointless fading airbrush effect.

Since I haven't read anything about how Silverlight manages completed Storyboards and animations, I created a simple 'garbage-collector.' When the number of active animations exceeds 200, I remove the old brush spots and animations.

  animateParticle : function(sender, element)
  {
    var host = sender.getHost();
      
    try     {        
    var xaml = '<Storyboard
      Name="' + ++this.dynmID + '">' + 
    '<DoubleAnimation ' +
      'Storyboard.TargetName="' + element.name + '" ' +
      'Storyboard.TargetProperty="Opacity" ' +
      'From="1.0" To="0.0" Duration="0:0:2" />' + 
    '</Storyboard>';


  var e = host.content.createFromXaml(xaml);

  sender.findName("Page").resources.add(e);


  e.begin();

  return e;

  }

  catch(ex)

  {

  alert(ex);

  }
  

  },

  

    handleMouseMove: function(sender, eventArgs)

    {


        if (this.isMouseDown == true) {

            var e = this.createEllipse2(sender, eventArgs);

            this.particles.push(e);

            e = this.animateParticle(sender, e);

            this.animparticles.push(e);

          

          if (this.particles.length > 200) { 

            var anim = this.animparticles.shift();

            anim.stop();


            sender.findName("Page").resources.remove(anim);

            var particle = this.particles.shift();

            sender.children.remove(particle);


          }


            

        }


    }