Animate Graphics.lineTo()

Actionscript:
  1. // line thickness, line color, start point, end point, divisor, callback
  2. function animateLineTo( thick:Number, col:uint, sp:Point, ep:Point, div:Number=4, callback:Function=null):void {
  3.      var s:Shape  = Shape(addChild(new Shape()));
  4.      var ap:Point = sp.clone();
  5.      div = Math.max(2, div);
  6.      setTimeout(runLineAnimation, 1000/stage.frameRate, s.graphics , thick , col , sp , ep , ap, div, callback);
  7. }
  8.  
  9. function runLineAnimation(g:Graphics , thick:Number, col:uint, sp:Point, ep:Point, ap:Point, div:Number, callback:Function):void {
  10.      ap.x += (ep.x - ap.x) / div;
  11.      ap.y += (ep.y - ap.y) / div;
  12.       with(g){
  13.         clear();
  14.         lineStyle(thick, col);
  15.         moveTo(sp.x, sp.y);
  16.         lineTo(ap.x, ap.y);
  17.       }
  18.        if (Math.abs(ap.x - ep.x) <1 && Math.abs(ap.y- ep.y)  <1){
  19.            // done
  20.            if (callback!=null){
  21.                callback();  
  22.            }
  23.        }else{
  24.             setTimeout(runLineAnimation, 1000/stage.frameRate, g , thick , col , sp , ep , ap, div, callback);
  25.        }
  26. }
  27. //
  28. // test out the animateLineTo function:
  29. //
  30. var a:Point = new Point(100,100);
  31. var b:Point = new Point(150, 200);
  32. var c:Point = new Point(300, 190);
  33. var d:Point = new Point(280, 90)
  34.  
  35. animateLineTo(0, 0xFF0000, a, b, 4, line2);
  36.  
  37. function line2():void{
  38.     animateLineTo(0, 0xFF0000, b, c, 4, line3);
  39. }
  40.  
  41. function line3():void{
  42.     animateLineTo(0, 0xFF0000, c, d, 4, line4);
  43. }
  44.  
  45. function line4():void{
  46.     animateLineTo(0, 0xFF0000, d, a, 4);
  47. }

The above demos a function called animateLineTo() that will draw a line using zeno's paradox.

There are a couple weird/interesting tricks going on here. I'm using setTimeout() over and over rathaer than using setInterval(). This makes it so I don't need to store an interval id. I'm also using a delay of 1000/stage.frameRate, this attempts to cause the setTimeout() to run at the same frequency as an enter frame would. This is important because having a setTimeout()/setInterval() that is doing animation and attempting to run more frequently than the framerate can cause problems and is a waste of cpu power.

This snippet was spurned by a student question about how to animate a Graphics.lineTo() from point A to point B. Here is the original snippet, which is easier to read and more bare bones:

Actionscript:
  1. var p0:Point = new Point(100,100);
  2. var p1:Point = new Point(400,200);
  3. var dp:Point = new Point(p0.x,p0.y);
  4.  
  5. var s:Sprite = Sprite(addChild(new Sprite()));
  6.  
  7. addEventListener(Event.ENTER_FRAME, onLoop);
  8. function onLoop(evt:Event):void {
  9.     s.graphics.clear()
  10.     s.graphics.lineStyle(0,0x000000);
  11.     s.graphics.moveTo(p0.x, p0.y);
  12.     s.graphics.lineTo(dp.x, dp.y);
  13.     dp.x += (p1.x - dp.x) / 4;
  14.     dp.y += (p1.y - dp.y) / 4;
  15. }

This entry was posted in motion and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Posted April 6, 2010 at 8:38 am | Permalink

    Great script. The problem I have now is that once the line draws between 2 points (in my case, 2 circles), I need the line to redraw as the two circles animate. When I say, redraw, I mean the line needs to stay visible between the two points, not animate again from a to b. Any ideas on how to modify this code to do that?

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*