feb19.jp

Nobuhiro Takahashi
Designer / Engineer

ActionScriptで極座標を用いて星を描く

ActionScriptで極座標を用いて星を描く

ActionScriptには、Point.polar(距離, 角度)というメソッドがあって、座標(0, 0)からみた任意の距離と角度にある点の座標を算出してくれるので、これを使って正多角形を作ったり星を描いたりします。というわけで正多角形や星を描くクラスを作ってみました。

仕組みは単純。正多角形ならば、距離は一定なので、Point.polar()の第一引数は一定の任意の値を一つ。第二引数には360を頂点数で割った度数をラジアン化したものを入れてやる。すると、原点(0, 0)を中心とした、正多角形が描けます。

まずは正多角形。Polygonクラスを以下に示します。AS3です。ちなみにPlayer8以降ならAS1でもPoint.polarはありますので、同様に作ることができます。

/*
* Polygon
* @author Nobuhiro Takahashi
* @version 1.0
*/
	
package {
	import flash.display.Shape;
	import flash.display.Graphics;
	import flash.display.GradientType;
	import flash.geom.*;
	public class Polygon extends Shape {
		public function Polygon(size, color=0xff0000, alpha=1.0, vertex=5) {
			var g = this.graphics;
			
			//rotation value
			var ro;
			if(vertex%2==0) {
				//Even Number
				ro = 0;
			} else {
				//Odd Number
				ro = 180/vertex*Math.PI/180/2;
			}
			
			//point
			var points = new Array();
			for(var i:Number=0; i<vertex; i++) {
				var p = new Point();
				var vertexDegree = 360/vertex*i*Math.PI/180 - ro;
				p = Point.polar(size, vertexDegree);
				points.push(p);
			}
			
			//draw
			g.beginFill(color, alpha);
			//g.beginGradientFill(GradientType.RADIAL, [0xffffcc, 0x000000], [1, 1], [0x00, 0x10])
			g.moveTo(points[0].x, points[0].y);
			for(i=1; i<points.length; i++){
				g.lineTo(points[i].x, points[i].y);
			}
			g.lineTo(points[0].x, points[0].y);
			
			g.endFill();
		}
	}
}

シェイプクラスを継承した、「正多角形表示クラス」です。
使い方はこんな感じ。

var p = new Polygon(20, 0x00ffff, 1, 8);
addChild(p);
p.x = 100;
p.y = 200;

new Polygon()の引数は、正多角形の外接円の半径(用は大きさ)、色、アルファ値、頂点数です。

ちなみにPolygonクラスのコードの前半にある、rotation valueっていう行からのブロックでは、正多角形の頂点数が奇数のときは図形が若干傾いてしまうので、その分を補正しています。

次に星を描く、PolyStarクラスです。

/*
* PolyStar
* @author Nobuhiro Takahashi
* @version 1.0
*/
	
package {
	import flash.display.Shape;
	import flash.display.Graphics;
	import flash.display.GradientType;
	import flash.geom.*;
	public class PolyStar extends Shape {
		public function PolyStar(size, color=0xff0000, alpha=1.0, vertex=5, pointsize=.5) {
			var g = this.graphics;
			
			//rotation value
			var ro;
			if(vertex%2==0) {
				//Even Number
				ro = 0;
			} else {
				//Odd Number
				ro = 180/vertex*Math.PI/180/2;
			}
			
			//point
			var points = new Array();
			for(var i:Number=0; i<vertex; i++) {
				var p = new Point();
				var vertexDegree = 360/vertex*i*Math.PI/180 - ro;
				p = Point.polar(size, vertexDegree);
				points.push(p);
				
				var p2 = new Point();
				var innerDegree = 360/vertex*(i+.5)*Math.PI/180 - ro;
				p2 = Point.polar(size*pointsize, innerDegree);
				points.push(p2);
			}
			
			//draw
			g.beginFill(color, alpha);
			//g.beginGradientFill(GradientType.RADIAL, [0xffffcc, 0x000000], [1, 1], [0x00, 0x10])
			g.moveTo(points[0].x, points[0].y);
			for(i=1; i<points.length; i++){
				g.lineTo(points[i].x, points[i].y);
			}
			g.lineTo(points[0].x, points[0].y);
			
			g.endFill();
		}
	}
}

これはPolygon.asの応用です。頂点数を倍描き、一個飛ばしの頂点がどれぐらい凹んでるかを指定しているだけです。

使い方はPolygonクラス同様。引数が一つ、「ポイントサイズ=へこんでいるところはへこんでないところの頂点に比べ、どれくらい凹んでいるかの割合」(取る値は0〜1)というのが増えています。

var s = new PolyStar(20, 0xffff00, 1, 5, .5);
addChild(s);
s.x = 200;
s.y = 100;

Flashのソフトウェアで、正多角形を描くときと同じような感じ(頂点数と、ポイントサイズと、星か多角形か)で作れることを目指しました。ただし、Flashで星のポイントサイズを1とすると、ちょっとだけ凹んでいるけど、PolyStarクラスで1を指定すると、ちょうど頂点数二倍の、正多角形と同じような感じになります。なぜならポイントサイズを2とか100とかを指定することもできるようになっているためです。

というわけでこんなものをつくってみました。

サンプル

ランダムな頂点数、カラー、サイズの星をステージ上にばらまくサンプルです。ステージ上でマウスを動かしてみてください。


Tweet Share Bookmark

Navigation

prev: デフォルトのコンテキスト(右クリック)メニューを非表示にする
next: MacBook Proを買いました。

Recently Entries