〜度回転させた後の_xと_yを求める方法

Action Scriptでムービークリップの回転といえば_rotationプロパティですが、今回紹介するのは、別の方法。
回転前のムービークリップのx,y座標と回転軸のx,y座標、回転させたい角度から、回転後のx,y座標を求める方法です。
使う式は

x1 = Math.cos(radian)*x-Math.sin(radian)*y;
y1 = Math.cos(radian)*y+Math.sin(radian)*x;

作例を交えて解説させていただきます。

rotate.swf


上記のサンプルでは、ステージ上の青いボール(ball)が、赤い基準点(point)を中心として30°回転するサンプルです。フレームスクリプトに、以下のように記述します。

var degree:Number = 30;//回転させたい角度
var radian:Number = degree*Math.PI/180;//角度をラジアンに変換
function rotateBall() {//正の方向にdegree度回転させる関数
var x:Number = ball._x-point._x;
var y:Number = ball._y-point._y;
x1 = Math.cos(radian)*x-Math.sin(radian)*y;
y1 = Math.cos(radian)*y+Math.sin(radian)*x;
ball._x = point._x+x1;
ball._y = point._y+y1;
btn.label = "Reset";
}
function resetBall() {//負の方向にdegree度回転させる関数(先程の逆回転)
var x:Number = ball._x-point._x;
var y:Number = ball._y-point._y;
x1 = Math.cos(radian)*x+Math.sin(radian)*y;
y1 = Math.cos(radian)*y-Math.sin(radian)*x;
ball._x = point._x+x1;
ball._y = point._y+y1;
btn.label = "Rotate";
}
btn.onRelease = function() {//ボタンラベルの内容により、回転・逆回転を行う
if (btn.label == "Rotate") {
rotateBall();
} else {
resetBall();
}
};

では、上から順に見て行きます。まず、

var degree:Number = 30;//回転させたい角度var radian:Number = degree*Math.PI/180;//角度をラジアンに変換

回転させたい角度degreeを設定します。今回、Mathクラスのcos()とsin()を使いますが、引数には角度ではなく、ラジアンを与えないといけないので、2行目の変換の公式(重要なので丸暗記必須)で、角度(degree)をラジアン(radian)に変換します。

次に、回転させるための関数、rotateBallの中身を見ていきます。

var x:Number = ball._x-point._x;var y:Number = ball._y-point._y;

作例のガイドを見れば分かりますが、移動前のballのpointからの座標xとyを求めます。

x1 = Math.cos(radian)*x-Math.sin(radian)*y;
y1 = Math.cos(radian)*y+Math.sin(radian)*x;

ここで今回の核となる式を使います。ここでのx1,y1は、先ほど求めたx,yがradianの分だけ回転した後の座標です。

ball._x = point._x+x1;
ball._y = point._y+y1;

求めたx1,y1は基準点pointからの距離です。ballの移動後の座標はFlashの座標空間で考えますのでpointの_x,_yを足したものになります。

btn.label = "Reset";

は、作例用のボタンのテキストを変更するためのものですので、今回は無視して下さい。

以上です。
ちなみに負の方向(反時計回り)に回転させたい時は、resetBall関数にあるように、

x1 = Math.cos(radian)*x+Math.sin(radian)*y;y1 = Math.cos(radian)*y-Math.sin(radian)*x;

+ーの符号を逆転させます。

マウスの座標を回転軸にしたり、onEnterFrameの中に入れて回転させ続けたりして検証してみてください。
この回転のさせ方は、Flashの擬似3D空間での回転にも使えますので、覚えておいて損は無いとおもいます。
さらに深みにハマりたい時は、
Foundation Actionscript Animation: Making Things Move (Foundation)
Keith Peters
1590595181
でテンションが上がります。

このエントリーをはてなブックマークに追加
はてなブックマーク - 〜度回転させた後の_xと_yを求める方法

Comments:3

nk 07-07-23 (月) 4:04

まだ初心者なので、参考にさせてもらっています

一つお聞きしたい事があるのですが
x1 = Math.cos(radian)*x-Math.sin(radian)*y;
y1 = Math.cos(radian)*y+Math.sin(radian)*x;
この式の意味はどういったものなのでしょうか?

ただ式を覚えるのでは無く、一つ一つ式を理解していたいので
この式の意味というか何故この式なのかと考えていたのですが
どうもsin.cosなどが絡むと苦手で苦戦しています・・・

お暇な時でいいのでどうかご教授願えないでしょうか・・・

tera 07-07-23 (月) 9:21

>nk様
こんにちは。コメントありがとうございます。
上の式なのですが、残念ながら僕の脳から抜け落ちてしまいました。
洋書ですが「Making Things Move」(AS2版、AS3版どちらにも記載)の中に、そのまんまの公式(導き方)が、順をおって解説されていますので、そちらを読んでいただくのがよいかと思います。
僕も読み直しますです。

nk 07-07-23 (月) 21:35

お返事ありがとうございます
英語が駄目なので洋書は無理そうです・・・

でも、なんとか頑張ってみます!
ありがとうございました!

やっぱり、英語が出来ると色々と得ですね

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2006/06/27-230619.php/trackback
Listed below are links to weblogs that reference
〜度回転させた後の_xと_yを求める方法 from trick7

Return to page top