feb19.jp blog - life is creative!

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

ブックマークに追加する tags:      

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とかを指定することもできるようになっているためです。

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

サンプル

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


2008年05月14日09:59

Webデザインブログ

「ActionScriptで極座標を用いて星を描く」の関連エントリー

 iTunes Store(Japan)

コメントを投稿

トラックバック

このエントリーのトラックバックURL:
http://feb19.jp/mt/mt-tb.cgi/145

Navigation

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

Recently Entries
Mac でファイルの関連付けを変える(Mac で AIR アプリがアップデート出来ないを解決する方法)
ファイルを右クリックして「情報を見る」を選び、表示されたウィンドウの...
Mac OS X 10.6 Snow Leopard から入ってるフォント「Menlo」がコーディング作業にいい感じ
Xcode でコード書いているとき、Eclipse でコード書くより...
AIR で JSON 形式ファイルの入出力
AIR 祭り開催中。今回はファイル入出力。AS3 で扱っている Ob...
Adobe CS5 ティザーサイトオープン
カウントダウンが始まっています。いよいよ CS5 ですね。globa...
AIR でファイルがドラッグアンドドロップされたことを NativeDragEvent で検知する
最近また AIR が楽しい気がして触っているのですが、 Google...
iPhone アプリ "iBeat - BPM Counter" を発売しました & iPhone インタラクションデザインについて
BPM 計測アプリです。既に似たようなアプリはいくつか発売されている...
AS3 の演算子 ||= について
AS3 だけでつかえるものではないのですが、AS3 での動作を確認し...
iPhone SDK 「カテゴリ」について+NSString の空白文字を除去する
Objective-C では、高位のフレームワークで、低位のフレーム...
Flash CS4 で Flex SDK (mx パッケージ、クラス) を使う
Flex 用のライブラリとかを見ると mx パッケージとか使われてい...
Flash CS5 を予習 ~Text Layout Framework (TLF) 編~
Text Layout Framework (TLF) を使って、F...