davidbau.com

Tutorial: Ten Followers

OK, based on comments from Cezar and MichaelW and DavidMay and my kids at home, here is another idea for a javascript tutorial for middle-school kids, with a bit more cowbell.

The program ten-followers.html is another 60-line program that does a simple animation on the screen following the mouse. (view-source)

It uses the excellent Raphael library to simplify use of SVG.

$('body').mousemove(function(event) {
  for (var j = 0; j < circles.length; ++j) {
    var c = circles[j];
    var d = distance(c.attr('cx'), c.attr('cy'),
                     event.pageX, event.pageY);
    c.animate({cx: event.pageX, cy: event.pageY}, d * j * 2);
  }
});

Posted by David at March 30, 2010 07:20 AM