彩音 - AIR - 研究室

日記：彩音UNIX研究室

Wed, 25 Jun 2008 00:37:00 +0900

節：短形領域の衝突 containsPoint()、containsRect()、intersects()

Thu, 19 Jun 2008 04:29:00 +0900

containsPoint() は点と領域を比較する。指定の点が短形領域の中に入っているときtrueになる。containsRect() と intersects() は領域同士を比較する。containsRect() は領域の中に別の領域が完全に入っているとき true になり、intersects() は領域と別の領域が交差しているとき true となる。
以下の例は短形領域 rect1、rect2、rect3 にマウスが入っているかどうかを containsPoint() を使い調べている。領域にマウスが入っていたら領域を囲むboxスプライトを表示し、マウスが領域からでたらboxスプライトを消す。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="256" initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private var rect1:Rectangle = new Rectangle(100, 50, 200, 100);
private var rect2:Rectangle = new Rectangle(320, 20, 160, 100);
private var rect3:Rectangle = new Rectangle(360, 120, 150, 80);
private var rectList:Array = [rect1, rect2, rect3];
private var box:Sprite = new Sprite();
private function init():void {
addChild(container);
box.graphics.lineStyle(1, 0xff0000);
box.graphics.drawRect(0, 0, 100, 100);
container.addEventListener(Event.ENTER_FRAME, enterFrame);
}
private function enterFrame(event:Event):void {
var mousePoint:Point = new Point(application.mouseX, application.mouseY);
var isHit:Boolean = false;
for each (var hitzone:Rectangle in rectList) {
if (hitzone.containsPoint(mousePoint)) {
isHit = true;
box.x = hitzone.x;
box.y = hitzone.y;
box.width = hitzone.width;
box.height = hitzone.height;
container.addChild(box);
break
}
}
if ((contains(box)) && (isHit != true)) {
container.removeChild(box);
}
}
]]>
</mx:Script>
</mx:Application>
]]]

節：短形領域の伸縮 inflate()、inflatePoint()

Wed, 18 Jun 2008 03:46:00 +0900

inflate() は短形領域の伸縮を行う関数である。rect1 の縦横サイズを左右に15、上下に10ずつ広げる場合、rect1.inflate(15, 10)のように実行する。結果、rect1 の幅は30、高さは20広がる。新しい短形領域が生成されるのではなく、rect1自体が変更される点に注意する。

例：inflate()を使って広げる

[[[
var rect1:Rectangle = new Rectangle(50, 80, 200, 150);
rect1.inflate(15, 10);
trace(rect1);
// 出力： (x=35, y=70, w=230, h0170)
]]]

短形領域の伸縮は inflatePoint() でも行える。inflatePoint() は、左右上下に広げるサイズを Point データを使い一個の引数で指定する。

例：inflatePoint() を使い広げる

[[[
var rect1:Rectangle = new Rectangle(50, 80, 200, 150);
var size:Point = new Point(15, 10);
rect1.inflatePoint(size);
trace(rect1);
// 出力：(x=35, y=70, w=230, h=170)
]]]

例：長方形を少しずつ大きくする

節：短形領域の減算 intersection()

Wed, 18 Jun 2008 01:55:00 +0900

intersection() は短形領域の減算を行う関数である。短形領域の面積の引き算をするのではなく、短形領域が重なっている部分、交差している領域を求める。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="256" initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private function init():void {
addChild(container);

var rect1:Rectangle = new Rectangle(100, 50, 150, 120);
var rect2:Rectangle = new Rectangle(150, 150, 160, 80);
var rect3:Rectangle = rect1.intersection(rect2);
var lineColor:uint = 0x000000;
var fillColor:uint = 0xBBBBBB;

var box1:Sprite = new Sprite();
box1.graphics.lineStyle(1, lineColor);
box1.graphics.beginFill(fillColor);
box1.graphics.drawRect(rect1.x, rect1.y, rect1.width, rect1.height);
box1.graphics.endFill();
container.addChild(box1);

var box2:Sprite = new Sprite();
box2.graphics.lineStyle(1, lineColor);
box2.graphics.beginFill(fillColor);
box2.graphics.drawRect(rect2.x, rect2.y, rect2.width, rect2.height);
box2.graphics.endFill();
container.addChild(box2);

var box3:Sprite = new Sprite();
box3.graphics.lineStyle(2, lineColor);
box3.graphics.drawRect(rect3.x, rect3.y, rect3.width, rect3.height);
container.addChild(box3);
}
]]>
</mx:Script>
</mx:Application>
]]]

節：短形領域の加算 union()

Mon, 16 Jun 2008 21:21:00 +0900

union() は短形領域の加算を行う。短形領域の面積の足し算をするのではなく、互いの領域を完全に含む１つの広い領域を新規に生成する。ここの短形領域が狭くても、対角線上にはなれた位置にあるほど加算した結果は広い領域となる。
以下の例では、rect1 と rect2 を union() を使い加算した短形領域 rect3 と生成している。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="256" initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private function init():void {
addChild(container);

var rect1:Rectangle = new Rectangle(100, 50, 150, 120);
var rect2:Rectangle = new Rectangle(150, 150, 160, 80);
var rect3:Rectangle = rect1.union(rect2);
var lineColor:uint = 0x000000;
var fillColor:uint = 0xBBBBBB;

var box1:Sprite = new Sprite();
box1.graphics.lineStyle(1, lineColor);
box1.graphics.beginFill(fillColor);
box1.graphics.drawRect(rect1.x, rect1.y, rect1.width, rect1.height);
box1.graphics.endFill();
container.addChild(box1);

var box2:Sprite = new Sprite();
box2.graphics.lineStyle(1, lineColor);
box2.graphics.beginFill(fillColor);
box2.graphics.drawRect(rect2.x, rect2.y, rect2.width, rect2.height);
box2.graphics.endFill();
container.addChild(box2);

var box3:Sprite = new Sprite();
box3.graphics.lineStyle(2, lineColor);
box3.graphics.drawRect(rect3.x, rect3.y, rect3.width, rect3.height);
container.addChild(box3);
}
]]>
</mx:Script>
</mx:Application>
]]]

節：短形領域を扱う Rectangleクラス

Mon, 16 Jun 2008 20:33:00 +0900

Rectangleクラスは短形領域（長方形）を一個の値として扱う。Rectangleクラスでは、短形領域の４点の座標でなく、左上角の座標と幅、高さで短形領域を表す。

例：左上角(50, 80)、幅200、高さ150の場合

[[[
var rect1:Rectangle = new Rectangle(50, 80, 200, 150);
trace (rect1);
// 出力： (x=50, y=80, w=200, h=500)
]]]

Rectangleクラスには短形領域の座標を扱うためのプロパティやメソッド用意されている。

例：短形領域の座標、幅、高さ

[[[
var rect1:Rectangle = new Rectangle(50, 80, 200, 150);
trace (rect1.top, rect1.left, rect1.right, rect1.bottom);
// 出力：80 50 250 230
trace (rect1.topLeft, rect1.bottomRight);
// 出力： (x=50, y=80) (x=250, y=230)
trace (rect1.width, rect1.height);
// 出力：200 150
]]]

サイズを示す size プロパティは width と height の Point データになる。対角線の長さはこの値の length で得られる。

例：短形領域のサイズと対角線の長さ

[[[
var rectSize:Point = rect1.size;
trace (rectSize);
// 出力： (x=200, y=150)
trace (rectSize.length);
// 出力： 250
]]]

節：ベクトルの向きと大きさ polar()

Mon, 16 Jun 2008 17:15:00 +0900

以下の例は Point.polar() と offset() を使い放射状に線を描くものである。
Point.polar(len, angle) は、点までの長さlenと角度 angle を指定し、点の x, y を求める関数である。角度 angle は x軸から時計回り角度（ラジアン）で測る。
offset() は点の座標の基準点を移動させるメソッドである。Point.polar() で得られる点の座標は原点 (0, 0) を基準として座標であるため、 offset() を使い放射状に線を延ばす中心点 center の位置に基準点を移動させる。

日記：ベクトルの向きと大きさ

Fri, 13 Jun 2008 08:41:00 +0900

ベクトルの向きと大きさ normalize()

節：ベクトルの向きと大きさ normalize()

Fri, 13 Jun 2008 08:40:00 +0900

normalize() は、ベクトルの向きはそのままでベクトルの大きさを変更するメソッドである。以下の例ではフィールドをクリックするとその方向にインスタンスが移動する。どの向きに進む場合も移動の速度は speed で指定した速さになる。
インスタンス座標とクリックされたポイントのグローバル座標から進む方向のベクトルを判定し、ベクトルサイズを normalize() を使い speed の大きさに変換する。mc1 が進む方向に向くように Math.atan2() で２点間の角度を計算し、インスタンスを回転させる。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="256" initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private var mc1:Sprite = new Sprite();
private var vector:Point = new Point();
private var speed:int = 10;
private var pt1:Point;
private var pt2:Point;
private function init():void {
addChild(container);
mc1.graphics.beginFill(0xffffff);
mc1.graphics.moveTo(10,0);
mc1.graphics.lineTo(-10, 10);
mc1.graphics.lineTo(-10, -10);
mc1.graphics.endFill();
container.addChild(mc1);
application.addEventListener(MouseEvent.CLICK, onClick);
mc1.addEventListener(Event.ENTER_FRAME, enterFrame);
}
private function onClick(event:MouseEvent):void {
pt1 = new Point(mc1.x, mc1.y);
pt2 = new Point(event.stageX, event.stageY);
vector = pt2.subtract(pt1);
vector.normalize(speed);
mc1.rotation = Math.atan2(vector.y, vector.x)*180/Math.PI;
}
private function enterFrame(event:Event):void {
mc1.x += vector.x;
mc1.y += vector.y;
if (mc1.x < 0) {
mc1.x = application.width;
} else if (mc1.x >application.width) {
mc1.x = 0;
}
if (mc1.y < 0) {
mc1.y = application.height;
} else if (mc1.y > application.height) {
mc1.y = 0;
}
}
]]>
</mx:Script>
</mx:Application>
]]]

節：ベクトルの向きと大きさ interpolate()

Fri, 13 Jun 2008 00:24:00 +0900

Point.interpolate() は点pt1 と点pt2 の間にある点を見つける。この関数は pt1 kara
pt2 の間に点を打ちたい場合や点を移動させたい場合に利用する。 Point.interpolate(pt1, pt2, f)のように３つの引数をとり、f の値（1〜0）により、pt1〜pt2 間の位置を指定する。f が 1 のときは、pt1 の位置となり、0 に近いほどpt2 に近づく。
以下の例は pt1 から pt2 に向けて 10個のスプライトを生成する。pt1 と pt2 の間の点の位置を Point.interpolate() で計算している。

節：ベクトルの加算減算 add()、subtract()、distance()、equals()

Thu, 12 Jun 2008 23:49:00 +0900

点と点の加算は add()、減算は subtract() で計算する。点と点の加算と減算は進む方向と大きさを表すベクトル計算で利用できる。以下の例では vector1 と vector2 をの値は変化しない。
[[[
var vector1:Point = new Point(5, 20);
var vector2:Point = new Point(0, 10);
var vector3:Point = new vector1.add(vectror2);
var vector4:Point = new vactor1.subtract(vector2);
trace (vector3, vector4);
// 出力：(x=5, y=30) (x=5, y=10)
trace (vector3.x);
// 出力：5
trace (vector3.y);
// 出力： 30
]]]

点と点の減算の結果は天童市の水平方向距離、垂直方向距離を示している。点と点の直線距離を求めたい場合は Point.distance() で計算出来る。計算結果は必ず0または正の値になる。つまり、２点を結ぶベクトルの大きさを示す。 Point.distance(pt1, pt2) と Point.distance(pt2, pt1) は同じ値になる。

[[[
var pt1:point = new Point(50, 100);
var pt2:point = new Point(200, 250);
var d:Number = Point.distance(pt1, pt2);
trace (d);
// 出力：212.13203435596427
]]]

Point.equals() は２点が等しいかどうかを調べる関数である。２点が等しいときに true、等しくないときに false となる。

[[[
var pt1:Point = new Point(50, 100);
var pt2:Point = new Point(200, 250);
if (pt1.equals(pt2)) {
trace("同じ位置");
} else {
trace("違う位置");
}

]]]

節：点を扱う Pointクラス

Wed, 11 Jun 2008 06:18:00 +0900

Pointクラスを利用すると、点の座標を一個の値として扱えて便利である。例えば、x=60, y=110の点pt1の座標は次のように表せる。
[[[
var pt1:Point = new Point(60, 110);
trace (pt1);
// 出力： (x=60, y=110)
]]]

Pointクラスには点の座標を扱うためのプロパティやメソッドがある。原点から（0,0）点までの長さは計算しなくてもlengthプロパティで簡単に取得出来る。例えば、点 pt1 までの距離は pt1.length になる。この長さは点 pt1 が（x=-45, y=-100）のように負の領域にあったとしても正の値になる。

[[[
var pt1:Point = new Point(60, 110);
trace (pt1.length);
// 出力：120.83045973594572
]]]

節：MouseEventクラスのイベント通知からマウスのローカル座標を取得する

Wed, 11 Jun 2008 06:11:00 +0900

MouseEventクラスのイベント通知を受けるハンドラを使用した場合、クリックした位置のローカル座標がeventオブジェクトの localX, localY プロパティとして送られる。
以下の例では mc1インスタンスをクリックするとその位置に mc1 の中に入っている mc2 を移動させる。 mc2 の座標は mc1 を基準としたローカル座標で設定する必要があるので、eventオブジェクトの localX, localY プロパティを利用する。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="192" initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private var mc1:Sprite = new Sprite();
private var mc2:Sprite = new Sprite();
private function init():void {
addChild(container);
mc1.graphics.beginFill(0x000000);
mc1.graphics.drawRect(0,0,250,120);
mc1.x = 150;
mc1.y = 40;
container.addChild(mc1);
mc2.graphics.beginFill(0xffcc00);
mc2.graphics.drawCircle(0,0,40);
mc1.addChild(mc2);
mc1.addEventListener(MouseEvent.CLICK, click);
}
private function click(event:MouseEvent):void {
mc2.x = event.localX;
mc2.y = event.localY;
}
]]>
</mx:Script>
</mx:Application>
]]]

節：マウスの座標

Wed, 11 Jun 2008 06:02:00 +0900

マウスの座標もグローバル座標、ローカル座標という概念で考える。
Flexでのマウスのグローバル座標は application.mouseX, application.mouseY で取得する。
各オブジェクトからのローカル座標は、mc1.mouseX, mc1.mouseY という風に取得する。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="192" initialize="init()">
<mx:Label x="10" y="10" id="mc1Label" text="" />
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private var mc1:Sprite = new Sprite();
private function init():void {
addChild(container);
mc1.graphics.beginFill(0x000000);
mc1.graphics.drawRect(0,0,250,120);
mc1.x = 150;
mc1.y = 40;
container.addChild(mc1);
application.addEventListener(Event.ENTER_FRAME, enterFrame);
}
private function enterFrame(event:Event):void {
mc1Label.text = "マウスのグローバル座標は：x=" + application.mouseX + ",y=" + application.mouseY
+ "／mc1からみたマウスのローカル座標は：x=" + mc1.mouseX + ",y=" + mc1.mouseY;
}
]]>
</mx:Script>
</mx:Application>
]]]

日記：グローバル座標とローカル座標

Sun, 08 Jun 2008 05:00:00 +0900

グローバル座標とローカル座標についての記述を追加。

グローバル座標、ローカル座標

節：グローバル座標、ローカル座標

Sun, 08 Jun 2008 04:57:00 +0900

座標にはグローバル座標とローカル座標がある。グローバル座標はアプリケーションの左上角を基準と下座標で、ローカル座標はスプライトやムービークリップの中心点を原点とした座標である。ムービークリップの中にムービークリップインスタンスが入っている場合、入れ子で入っているインスタンスの座標は親のムービークリップの中心点を座標の原点としたローカル座標である。

ローカル座標をグローバル座標に変換するには localToGlobal関数で、 mc.localToGlobal(Point) のようにする。引数はPointクラスのオブジェクトである必要がある。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="192" initialize="init()">
<mx:Label x="10" y="10" id="mc1Label" text="" />
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private var mc1:Sprite = new Sprite();
private function init():void {
container.graphics.beginFill(0x000000);
container.graphics.drawRect(0,0,250,120);
container.x = 50;
container.y = 40;
addChild(container);
mc1.graphics.beginFill(0xFFFFFF);
mc1.graphics.drawCircle(0,0,16);
mc1.x = 150;
mc1.y = 60;
container.addChild(mc1);
var mc1Point:Point = new Point (mc1.x, mc1.y);
var mc1GPoint:Point = mc1.localToGlobal(mc1Point);
mc1Label.text = "グローバル座標は：" + mc1GPoint + "／ローカル座標は：" + mc1Point;
}
]]>
</mx:Script>
</mx:Application>
]]]
逆にグローバル座標をローカル座標に変換する場合は globalToLocal() 関数を利用する。

節：値を順に取り出す for each .. in

Fri, 06 Jun 2008 03:19:00 +0900

for .. in がプロパティ名またはインデックス番号を取り出すのに対し、for each .. in の書式は配列や配列オブジェクトの値を取り出す。以下の例は配列の値を変数vに取り出している。
[[[
var vList:Array = ["f", "l", "a", "s", "h"];
for each (var v:String in vList) {
trace (v);
}

]]]

出力結果

[[[
f
l
a
s
h
]]]

以下の例では myObj の値を変数 v に取り出している。
[[[
var myObj:Object = {"id":"c007", "name":"クリス", "size":235};
for each (var v:* in myObj) {
trace(v);
}

]]]

出力結果

[[[
235
c007
クリス
]]]

節：インデックス番号やプロパティ名を順に取り出す for .. in

Fri, 06 Jun 2008 02:59:00 +0900

for .. in の書式は配列および配列オブジェクトからインデックス番号やプロパティ名を順に取り出すときに利用する。変数に入る値に注意すること。
対象が配列の場合、配列のインデックス番号を取り出す。変数に入る番号のデータ型はStringである点に注意すること。配列の値を取り出したい場合、for each .. in のほうが合理的である。
以下の例は配列vList から値を取り出している。vListの長さは５なので、処理を繰り返すごとに、"0", "1", "2", "3", "4" のインデックス番号が no に入る。no はストリング型であるため、int(no) で数値に変換し、indexに格納する。このindexを使い配列の値を順に取り出す。

[[[
var vList:Array = ["f", "l", "a", "s", "h"];
var no:String;
var index:uint;
for (no in vList) {
index = int(no);
trace (no, vList[index]);
}

]]]

出力結果

[[[
0 f
1 l
2 a
3 s
4 h
]]]

対象が配列オブジェクトの場合、オブジェクトのプロパティ名が順に取り出される。以下の例では myObj を走査する。変数 prop に myObj のプロパティ名が入るので、これを使いプロパティの値を取り出す。

[[[
var myObj:Object = {"id":"c007", "name":"クリス", "size":235};
var prop:String;
var v:*;
for (prop in myObj) {
v = myObj[prop];
trace (prop, v);
}

]]]

出力結果

[[[
size 235
id c007
name クリス
]]]

節：配列のインデックスを順に取り出す

Fri, 06 Jun 2008 01:11:00 +0900

配列からすべての値を１つずつ取り出し、処理を行うときは、some()、every()、filter()、map()、forEach()などの関数を利用すると便利だ。

[[[
var myList:Array = ["a", "c", "t", "i", "o", "n"];
var cnt:uint = myList.length;
var i:uint;
for (i = 0; i < cnt; i++) {
var char:String = myList[i];
trace(i, char);
}

]]]

出力結果

[[[
0 a
1 c
2 t
3 i
4 o
5 n
]]]

次の例は配列の値を後ろから逆順に取り出している。この例ではカウンタとして使う変数 i が for を抜ける直前にマイナスになってしまうので、 i のデータ型は uint でなく int でなくてはならない。

[[[
var myList:Array = ["a", "c", "t", "i", "o", "n"];
var cnt:uint = myList.length;
var i:int;
for (i = cnt - 1; i >= 0; i--) {
var char:String = myList[i];
trace (i, char);
}

]]]

出力結果

[[[
5 n
4 o
3 i
2 t
1 c
0 a
]]]

節：配列の値を使って指定のメソッドを実行する forEach()

Thu, 05 Jun 2008 23:17:00 +0900

forEach() は配列の値を引数にして指定のメソッドを実行する。以下の例では配列に５つの縁の座標、半径、線の太さ、線の色を指定したデータが格納されている。このデータを１つずつ makeCircle() に渡し、５つの円スプライトを生成する。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="320" height="250" initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private function init():void {
addChild(container);
var data1:Object = {x:50, y:100, r:40, ls:15, lc:0xFFCC00};
var data2:Object = {x:100, y:150, r:50, ls:20, lc:0xFFCCFF};
var data3:Object = {x:130, y:140, r:100, ls:10, lc:0x00CCCC}
var data4:Object = {x:220, y:160, r:40, ls:30, lc:0x0055BB};
var data5:Object = {x:250, y:100, r:40, ls:20, lc:0x55FF55};
var circleDateList:Array = [data1, data2, data3, data4, data5];
circleDateList.forEach(makeCircle);
}
private function makeCircle (element:*, index:int, arr:Array):void {
var dateObj:Object = element;
var cx:int = dateObj.x;
var cy:int = dateObj.y;
var cr:int = dateObj.r;
var lineSize:int = dateObj.ls;
var lineColor:int = dateObj.lc;
var circle:Sprite = new Sprite();
circle.graphics.lineStyle(lineSize, lineColor);
circle.graphics.drawCircle(cx,cy,cr);
container.addChild(circle);
}
]]>
</mx:Script>
</mx:Application>
]]]

節：配列の値を指定の関数で変換する map()

Thu, 05 Jun 2008 02:41:00 +0900

map() は配列のすべての値を指定の関数で変換し、新しい値の配列を生成する。元の配列は変更されない。
以下の例は値が２ならば002、43ならば043のように三桁の数字に変換する関数 maezero() を使い、配列 noList のすべての値を３桁の数字に変換した新しい配列 zeroNoList を生成している。

[[[
function meazero(element:*, index:int, arr:Array):String {
var keta:uint = 3;
var no:uint = element;
var zero:uint = Math.pow(10, keta);
var zeroNo:String = String(zero+no);
zeroNo = zeroNo.substr(1, keta);
return zeroNo;
}

var noList:Array = [2, 43, 5, 121, 65];
var zeroNoList:Array = noList.map(maezero);
trace(zeroNoList);
// 出力： 002, 043, 005, 121, 065
]]]

以下の例ではアルファベットの一文字目だけを大文字に、他は小文字にする関数capUpperを使い、配列oldListに入っている文字を変換し、新しく配列newListを生成している。

[[[
function capUpper(element:*, index:int, arr:Array):String {
var myString:String = element;
var cap:String = myString.charAt(0);
var other:String = myString.substring(1);
var newString:String = cap.toUpperCase()+other.toLowerCase();
return newString;
}

var oldList:Array = ["yellow", "RED", "s-Class"];
var newList:Array = oldList.map(capUpper);
trace (newList);
// 出力： Yellow, Red, S-class
]]]

節：配列にフィルタをかけて新しい配列を作る filter()

Wed, 04 Jun 2008 23:38:00 +0900

filter() は配列にフィルタをかけ、指定の条件に合致した値だけを取り出し、新しい配列を作る。フィルタの条件は Boolean値で返す関数でなくてはならない。

以下の例は配列 students の生徒オブジェクトのpoint プロパティを調べ、pointが80以上の生徒のみの配列 passStudents を生成する。

[[[
function isPass(element:*, index:int, arr:Array):Boolean {
var u:uint = element.point;
var pass:Boolean = (v>=80);
return pass;
}var st1:Object = {name:"鈴木", point:59};
var st2:Object = {name:"高橋", point:87};
var st3:Object = {name:"中村", point:81};
var st4:Object = {name:"田中", point:65};
var st5:Object = {name:"井上", point:93};
var students:Array = [st1, st2, st3, st4, st5];
var passStudents:Array = students.filter(isPass);
for (var i:uint = 0; i < passStudents.length; i++) {
var stObj:Object = passStudents[i];
trace(stObj.name, stObj.point);
}

]]]

出力結果

[[[
高橋 87
中村 81
井上 93
]]]

節：配列の値をチェックする some() every()

Wed, 04 Jun 2008 23:14:00 +0900

some()、every() は配列のすべての値を指定の関数でテストし、その結果が true なのか false なのかを返す。some() は一つでもテスト結果が true ならば true を、すべてのテスト結果が false ならば false を返す。every() はすべてのテスト結果が true のとき true を、一つでもfalseがある場合 false を返す。引数として指定する関数は、引数を Boolean値で返す関数でなくてはならない。関数を引数にする場合、some(hoge) のように括弧をつけない関数名だけで指定する。

some()、every() で引数に指定する関数は、以下の例で示すように element、index、arr の３つのパラメータが送られる。

[[[
function isPlus(element:*, index:int, arr:Array):Boolean {
return element > 0;
}

var listA:Array = [5,2,3,8];
var listB:Array = [4,3,9,-6];
trace (listA.some(isPlus); // 出力：true
trace (listB.some(isPlus); // 出力：true
trace (listA.every(isPlus); // 出力：true
trace (listB.every(isPlus); // 出力：false
]]]

節：万有引力の公式の応用その１

Sun, 01 Jun 2008 03:10:00 +0900

cc.xion.Star.as [[[
package cc.xion {
import flash.display.Sprite;
public class Star extends Sprite {
public var nRadius:Number;
public var uColor:int;
public var nAlpha:Number;
public var nSpeedX:Number = 0;
public var nSpeedY:Number = 0;
public var nMass:Number = 1;
public function Star(nRadius:Number, uColor:uint = 0xFFFFFF, nAlpha:Number = 1) {
this.nRadius = nRadius;
this.uColor = uColor;
this.nAlpha = nAlpha;
graphics.beginFill(uColor, nAlpha);
graphics.drawCircle(0, 0, nRadius);
graphics.endFill();
}
}
}

]]]

メインソース

参考文献 Web creators 2008年 06月号

節：万有引力の公式の応用その２

Sun, 01 Jun 2008 03:10:00 +0900

]]]

メインソース

for (var i:uint = 0; i < nHoshi; i++) {
var hoshi:Star = new Star(1,0xffffff, 0.2);
container.addChild(hoshi);
hoshi.x = 0;
hoshi.y = i - 300;
hoshi.nSpeedX = 1;
hoshi.nSpeedY = 0;
hoshi.nMass = 1;
hoshi_array.push(hoshi);
}
application.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
for (var i:uint = 0; i < nHoshi; i++) {
var hoshi:Star = hoshi_array[i];
hoshi.x += hoshi.nSpeedX;
hoshi.y += hoshi.nSpeedY;
gravitate(hoshi, sun);
}
myBitmapData.draw(this);
}
private function gravitate(starA:Star, starB:Star):void {
var dx:Number = starB.x - starA.x;
var dy:Number = starB.y - starA.y;
var dist2:Number = dx*dx+dy*dy;
var force:Number = starA.nMass*starB.nMass/dist2;
var rad:Number = Math.atan2(dy,dx);
var forceX:Number = force * Math.cos(rad);
var forceY:Number = force * Math.sin(rad);
starA.nSpeedX += forceX;
starA.nSpeedY += forceY;
}
]]>
</mx:Script>
</mx:Application>
]]]

参考文献 Web creators 2008年 06月号

日記：万有引力の公式の応用その２

Sun, 01 Jun 2008 02:52:00 +0900

万有引力の公式の応用その２

日記：カーソルからの距離とオブジェクトを連動させる配列版

Sat, 31 May 2008 22:54:00 +0900

カーソルからの距離とオブジェクトを連動させる配列版

節：カーソルからの距離とオブジェクトを連動させる配列版

Sat, 31 May 2008 22:53:00 +0900

cc.xion.Circle_DocClass.as [[[
package cc.xion
{

import flash.display.Shape;
import flash.display.Sprite;

public class Circle_DocClass extends Sprite
{
private var radius:Number;
private var weight:Number;
private var color:Number;
private var posX:Number;
private var posY:Number;
private var pixelHinting:Boolean = false;
private var scaleMode:String = "none";
public function Circle_DocClass(radius:Number = 30, weight:Number = 10, color:Number = 0x33cc33, posX:Number = 275, posY:Number = 200)
{
super();
this.radius = radius;
this.weight = weight;
this.color = color;
this.posX = posX;
this.posY = posY;
init();
}
private function init():void {
var myCircle:Shape = new Shape();
myCircle.graphics.lineStyle(weight, color, 1, pixelHinting, scaleMode);
myCircle.graphics.drawCircle (0, 0, radius);
myCircle.x = posX;
myCircle.y = posY;
addChild(myCircle);
}

}
}

]]]

メインソース

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="550" height="400" initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import cc.xion.Circle_DocClass;
private var container:UIComponent = new UIComponent();
private var myCircle:Circle_DocClass;
private var circles:Array = new Array();
private var stageW:uint;
private var stageH:uint;
private var myRadius:uint = 30;
private var myWeight:uint = 1;
private var myColor:uint = 0x333333;
private var xNum:uint = 16;
private var yNum:uint = 11;
private var defX:int = 40;
private var defY:uint = 40;
private var intervalX:int = 30;
private var intervalY:int = 30;
private var red:int = 0;
private var green:int = 0;
private var blue:int = 0;
private var alphas:int = 0;
private function init():void {
addChild(container);
stageW = application.width;
stageH = application.height;
putCircle(xNum, yNum);
application.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function putCircle(xNum:uint, yNum:uint):void {
for (var i:int=0;i<yNum;i++) {
for (var j:int=0;j<xNum;j++) {
var xPos:int = j * intervalX + defX;
var yPos:int = i * intervalY + defY;
myCircle = new Circle_DocClass(myRadius, myWeight, myColor, 0, 0);
myCircle.x = xPos;
myCircle.y = yPos;
container.addChild(myCircle);
circles.push(myCircle);
}
}
}
private function onEnterFrame(event:Event):void {
for (var i:int=0;i<circles.length;i++) {
var circle:Circle_DocClass = circles[i];
changeScale(circle);
}
}
private function changeScale(c:Circle_DocClass):void {
var d:Number = distanceMouse(c);
var K:Number;
var R:Number = 20;
var T:Number = 0.9;
K = R/d + T;
if (K > 1) {
c.scaleX = c.scaleY = K;
} else {
c.scaleX = c.scaleY = 1;
}
red = K * 300 - 300;
green = K * 150;
alphas = (K * 120 - 250) / 2;
c.transform.colorTransform = new ColorTransform(1,1,1,1,red,green,blue,alphas);
}
private function distanceMouse(c:Circle_DocClass):Number {
var c:Circle_DocClass = c;
var mX:Number = mouseX - c.x;
var mY:Number = mouseY - c.y;
var d:Number = Math.sqrt(mX*mX+mY*mY);
if (d<myRadius) {
d = myRadius;
}
return d;
}
]]>
</mx:Script>
</mx:Application>
]]]

参考文献 Web creators 2008年 05月号

節：カーソルからの距離とオブジェクトを連動させる

Sat, 31 May 2008 21:15:00 +0900

cc.xion.Circle_DocClass.as [[[
package cc.xion
{

import flash.display.Shape;
import flash.display.Sprite;

]]]

メインソース

参考文献 Web creators 2008年 05月号

節：原点からのマウスの距離 C=Math.sqrt(AA+BB)

Sat, 31 May 2008 20:32:00 +0900

原点からのマウスの距離はピタゴラスの定理 C=Math.sqrt(A*A+B*B) を使い求める。

[[[
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="550" height="400" initialize="init()">
<mx:Label x="10" y="10" id="xLabel" text="" />
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var container:UIComponent = new UIComponent();
private function init():void {
addChild(container);
application.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void {
var mX:Number = mouseX;
var mY:Number = mouseY;
var d:Number = Math.sqrt(mX * mX + mY * mY);
xLabel.text = "原点からのマウスの距離 = " + d;
}
]]>
</mx:Script>
</mx:Application>
]]]

彩音 - AIR - 研究室

日記：彩音UNIX研究室

節：短形領域の衝突 containsPoint()、containsRect()、intersects()

節：短形領域の伸縮 inflate()、inflatePoint()

節：短形領域の減算 intersection()

節：短形領域の加算 union()

節：短形領域を扱う Rectangleクラス

節：ベクトルの向きと大きさ polar()

日記：ベクトルの向きと大きさ

節：ベクトルの向きと大きさ normalize()

節：ベクトルの向きと大きさ interpolate()

節：ベクトルの加算減算 add()、subtract()、distance()、equals()

節：点を扱う Pointクラス

節：MouseEventクラスのイベント通知からマウスのローカル座標を取得する

節：マウスの座標

日記：グローバル座標とローカル座標

節：グローバル座標、ローカル座標

節：値を順に取り出す for each .. in

節：インデックス番号やプロパティ名を順に取り出す for .. in

節：配列のインデックスを順に取り出す

節：配列の値を使って指定のメソッドを実行する forEach()

節：配列の値を指定の関数で変換する map()

節：配列にフィルタをかけて新しい配列を作る filter()

節：配列の値をチェックする some() every()

節：万有引力の公式の応用 その１

節：万有引力の公式の応用 その２

日記：万有引力の公式の応用 その２

日記：カーソルからの距離とオブジェクトを連動させる 配列版

節：カーソルからの距離とオブジェクトを連動させる 配列版

節：カーソルからの距離とオブジェクトを連動させる

節：原点からのマウスの距離 C=Math.sqrt(A*A+B*B)

節：万有引力の公式の応用その１

節：万有引力の公式の応用その２

日記：万有引力の公式の応用その２

日記：カーソルからの距離とオブジェクトを連動させる配列版

節：カーソルからの距離とオブジェクトを連動させる配列版

節：原点からのマウスの距離 C=Math.sqrt(AA+BB)