Circles!

Ok, this post is a bit random. I was playing about with animating circle outlines using trig, then just went overboard making it scale and stuff. Then I remembered Seb Lee-Delisle wrote a simple drawing api for Flash 10, so then I made made a similar thing in 3D space.

Be patient with the 3D version, It does this cool wavy effect when it finishes.

Flash 10 CirclesWeird 2D Circles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
    private var _startPoint:Point = new Point(0, 0); // The centre point of the circle.
    private var _circleTween:TweenMax; // Tween used for drawing the circle.
    private var _canvas:Sprite; // The container for the graphics.
    private var _maxLines:int = 400; // The maximum number of lines to draw.
    private var _lineCount:int = 0;      
   
    public function WierdCircles():void
    {
      _canvas = new Sprite();
      _canvas.x = stage.stageWidth/2;
      _canvas.y = stage.stageHeight/2;
      addChild(_canvas);
           
      TweenMax.to(_startPoint, 30, {x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight, ease:Quad.easeIn, overwrite:2});
      TweenMax.to(_canvas, 10, {scaleX:.2, scaleY:.2, yoyo:true, repeat:-1, ease:Quad.easeInOut, overwrite:2});
     
      _drawCircle(120, 150, .2, 80);
    }
   
    private function _drawCircle($angle:int, $rad:int, $increment:int, $totalFrames:int):void
    {
      _circleTween = TweenMax.to(_canvas, $totalFrames, {rotation:-360, useFrames:true, onUpdate:_circleStep, onUpdateParams:[$angle, $rad, $increment], onComplete:_circleComplete, onCompleteParams:[$angle, $rad, $increment, $totalFrames], ease:Linear.easeNone});
    }
   
    private function _circleStep($angle:int, $rad:int, $increment:int):void
    {
      if(_lineCount < _maxLines)
      {
        var nextX:Number;
        var nextY:Number;
        var angle:Number;
        var theta:Number = 0 * Math.PI/180;
     
        nextX = _startPoint.x + (Math.cos(theta) * ($rad + _lineCount));
        nextY = _startPoint.y + (Math.sin(theta) * ($rad + _lineCount));
       
        if(_lineCount == 0) _canvas.graphics.moveTo(nextX, nextY);
        else _canvas.graphics.lineStyle(3, 0xFF0000, 1);
     
        angle = 360 * (_circleTween.currentProgress);
        theta = angle * Math.PI/180;
     
        nextX = _startPoint.x + (Math.cos(theta) * ($rad + _lineCount));
        nextY = _startPoint.y + (Math.sin(theta) * ($rad + _lineCount));
     
        _canvas.graphics.lineTo(nextX, nextY);
     
        _lineCount++;
      }
    }
   
    public function _circleComplete($angle:int, $rad:int, $increment:int, $totalFrames:int):void
    {    
      _drawCircle($angle, $rad, $increment, $totalFrames);
    }

This entry was posted on Thursday, January 21st, 2010 at 14:34 and is filed under AS3, Play. You can follow any comments to this entry through the RSS 2.0 feed. You can skip to the end and leave a comment. Pinging is currently not allowed.

Leave a comment