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);
    }

Floating PV3D Planes

Here is something I made a while back. I was mimicking a sequence from a TV ad which meant splitting up a 2D image and mapping them onto 3D planes for animation. This idea was abandoned in the end for something more substantial. It was cool to accomplish it, at least.

So here’s how its done:

  • Get the size of the image and break it up into segments depending on the number of rows and columns you want.
  • Apply each segment of the bitmapdata onto its own bitmap material, then apply it to a primitive plane.
  • Calculate the target x/y position depending on where the top left corner of the image should sit.
  • Cue all 3D planes from scale 0, and the start xy position.
  • Create a bezier path for the tween on the XYZ axis.