[AS3]うねうね動く円

circle

GWにうねうね動く円を作りました。

まず、円状にポイントを配置して、そのポイントを利用してcurveToで円を書きます。
あとはENTER_FRAMEで各ポイントをランダムに動かせばオッケー!と思ったら、全然ダメ。

で、考えました。

うねうね→波→サイン波!

そうか!うねうねさせるには各ポイントをサイン波を利用して波打つ感じにすればいいのか!
しかし、うまくいかずwonderflをうろうろしてたらイイ感じのを見つけたので、それを参考に作り直しました。

うんうん。なかなかイイ。

package
{    
	import flash.display.Sprite;
	import flash.events.Event;
	
    public class Main extends Sprite
    {
		private const POINT_NUM:uint = 10;
		private const RADIUS:uint = 150;
		
		private var _centerX:uint;
		private var _centerY:uint;
		private var _pointList:Array;
		
        public function Main():void 
		{
			movableCircle();
		}
		
		private function movableCircle():void 
		{			
			_centerX = stage.stageWidth / 2;
			_centerY = stage.stageHeight / 2;
			
			_pointList = [];
			var i:int;
			for (i = 0; i < POINT_NUM; i++) 
			{
				var angle:Number = Math.PI * 2 * i / POINT_NUM;
				var ptX:Number = _centerX + RADIUS * Math.cos(angle);
				var ptY:Number = _centerY + RADIUS * Math.sin(angle);

				var point:Object = new Object();
				point.x = point.iX = ptX;
				point.y = point.iY = ptY;
				//角度
				point.angleX = 0;
				point.angleY = 0;
				//振幅
				point.rX = (Math.random() * 40) - 20;
				point.rY = (Math.random() * 40) - 20;
				//角度の増加量
				point.sX = Math.random() * 3 + 1;
				point.sY = Math.random() * 3 + 1;
				
				_pointList.push(point);
			}
			
			addEventListener(Event.ENTER_FRAME, onEnterframe);
		}
		
		private function onEnterframe(e:Event):void
		{
			//一つ目の中間点
			var mx1:Number = (_pointList[0].x + _pointList[POINT_NUM - 1].x) / 2;
			var my1:Number = (_pointList[0].y + _pointList[POINT_NUM - 1].y) / 2;

			graphics.clear();
			graphics.beginFill(0x000000);
			graphics.moveTo(mx1, my1);
			
			var i:int;			
			for (i = 0; i < POINT_NUM - 1; i++) 
			{
				_pointList[i].x = _pointList[i].iX + _pointList[i].rX * Math.sin(_pointList[i].angleX * Math.PI / 180);
				_pointList[i].y = _pointList[i].iY + _pointList[i].rY * Math.sin(_pointList[i].angleY * Math.PI / 180);
				
				_pointList[i].angleX += _pointList[i].sX;
				_pointList[i].angleY += _pointList[i].sY;
				
				//各中間点
				var mx:Number = (_pointList[i].x + _pointList[i + 1].x) / 2;
				var my:Number = (_pointList[i].y + _pointList[i + 1].y) / 2;

				graphics.curveTo(_pointList[i].x, _pointList[i].y, mx, my);
			}
			graphics.curveTo(_pointList[i].x, _pointList[i].y, mx1, my1);
			
			graphics.endFill();
		}
	}
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation