Draw circle by Quadratic Bezier curve

by kenz 15 Apr 2010

• Related works: 2

Tags

+ ark basic bezier bspline chain circle draw drawCircle loading motion organic quadratic spring
Embed

/**
 * Copyright kenz ( http://wonderfl.net/user/kenz )
 * MIT License ( http://www.opensource.org/licenses/mit-license.php )
 * Downloaded from: http://wonderfl.net/c/wKKm
 */

package
{	
    import flash.display.Sprite;
    import flash.events.Event;
    
    import net.hires.debug.Stats;
    
    	[SWF( width="465", height="465", backgroundColor="0xffffff", frameRate="30" )]
    
    import flash.display.Graphics;
    public class DrawBezierCircle extends Sprite
    {
    		// ポイントの数
    		private const POINT_NUMBER:uint = 8;
    		
    		// 円の半径
    		private const RADIUS:uint = 150;
    		
    		// 中心点
    		private var _centerX:uint, _centerY:uint;
    		
    		// radian
    		private var _radian:Number;
    		
    		private var _list:Array;
    		
    		// canvas
		private var _apCanvas:Sprite;
		private var _cpCanvas:Sprite;
		private var _lineCanvas:Sprite;
    		
        public function DrawBezierCircle()
        {
        		_centerX = stage.stageWidth >> 1;
        		_centerY = stage.stageHeight >> 1;
        		
        		_list = [];
        		_radian = 2 * Math.PI / POINT_NUMBER;
        		
        		// 円の中心からコントロールポイントまでの距離
        		var _rc:Number;
        		
        		// コントロールポイントn とコントロールポイントn+1 の間の角度
        		var _d:Number;
        		
        		var _cp:p;
        		for ( var i:int = 0; i < POINT_NUMBER; i++ )
        		{
        			_d = ( _radian * ( i + 1 ) ) - ( _radian * i );
        			_rc = RADIUS / Math.cos( _d * .5 );
        			_cp = new p( _centerX + _rc * Math.cos( _radian * ( i + 1 ) - _d * .5 ), _centerY + _rc * Math.sin( _radian * ( i + 1 ) - _d * .5 ) );
        			_list.push( _cp );
        		}
        		
			_apCanvas = new Sprite();
			_cpCanvas = new Sprite();
			_lineCanvas = new Sprite();
			
			addChild( _lineCanvas );
			addChild( _apCanvas );
			addChild( _cpCanvas );
        		
        		addEventListener( Event.ENTER_FRAME, loop, false, 0, true );
        		
        		addChild( new Stats() )
        	}
        	
        	private function loop( e:Event ):void
        	{
        		// コントロールポイント
        		var _cp:p;
        		var _np:p;
        		
        		graphics.clear();
        		graphics.beginFill( 0x0000ff, 1 );
        		graphics.moveTo( ( _list[0].x + _list[1].x ) * .5, ( _list[0].y + _list[1].y ) * .5 );
        		
			_apCanvas.graphics.clear();
			_apCanvas.graphics.lineStyle( 1, 0xff3300 );
			_cpCanvas.graphics.clear();
			_cpCanvas.graphics.beginFill( 0, 1 );
			_lineCanvas.graphics.clear();
			_lineCanvas.graphics.lineStyle( 1, 0xcccccc );
        		
        		var i:int = POINT_NUMBER;
        		while ( --i >= 0 )
        		{
        			_cp = _list[i];
        			
        			_cp._radX = _cp._ax * Math.PI / 180;
        			_cp._radY = _cp._ay * Math.PI / 180;
        			
				_cp.x = _cp._cx + _cp._rx * Math.sin( _cp._radX );
				_cp.y = _cp._cy + _cp._ry * Math.sin( _cp._radY );
				_cp._ax += _cp._sx;
				_cp._ax %= 360;
				_cp._ay += _cp._sy
				_cp._ay %= 360;
				
				_np = _list[ ( i + 1 ) % ( _list.length ) ];
				
				graphics.curveTo( _np.x, _np.y, ( _cp.x + _np.x ) * .5, ( _cp.y + _np.y ) *.5 );
				
				_apCanvas.graphics.drawCircle( ( _cp.x + _np.x ) * .5, ( _cp.y + _np.y ) * .5, 4 );
				_cpCanvas.graphics.drawCircle( _np.x, _np.y, 2 );
				_lineCanvas.graphics.moveTo( _cp.x, _cp.y );
				_lineCanvas.graphics.lineTo( _np.x, _np.y );
        		}
			
			graphics.endFill();
			
			_apCanvas.graphics.endFill();
			_cpCanvas.graphics.endFill();
			_lineCanvas.graphics.endFill();
        	}
    }
}


import flash.geom.Point;

class p extends Point
{
	public var _cx:Number, _cy:Number;
	public var _radX:Number, _radY:Number;
	public var _rx:Number, _ry:Number;
	public var _ax:Number, _ay:Number;
	public var _sx:Number, _sy:Number;
	
	public function p( x:Number, y:Number )
	{
		this.x = _cx = x;
		this.y = _cy = y;
		_rx = ( Math.random() * 40 | 0 ) - 20;
		_ry = ( Math.random() * 40 | 0 ) - 20;
		_ax = _ay = 0;
		_sx = Number( ( Math.random() * 4 + 1 ).toFixed(1) );
		_sy = Number( ( Math.random() * 4 + 1 ).toFixed(1) );
	}
}