2010年10月2日土曜日

その点は囲まれたか?

フリーハンドで描かれた線で囲まれた中に、ある点が含まれるかどうか?それをチェックする方法を実装してみた。

いろいろ調べてみたところ、その点から360度を眺めてみたとき、どの方向にも線が見えたら「囲まれている」というアイデアに感銘を受けたので、それで実装してみた。ActionScriptだったら、囲まれた範囲を塗りつぶして、その図形と点とが交差するかどうか、hitTestするなんてこともできるが、あえてそれは避けてみた。

線上、頂点上に調べたい点がある場合、その点は含まれてないと判定されるようにしてみた。つまり、接しているのではなく「囲まれていること」とした。ただし、きっちり閉じた図形で囲む必要はないように実装している。

マウスの右ボタンを押しながらマウスを動かすと線が描けるようになっている。そうして描いた線で、虫を囲んでほしい。「囲まれた」と判断されると、他の場所に新たな虫が現れる。


2010年9月25日土曜日

四則演算の怪

今回の話題は、ActionScriptでクラスを定義していたときに出会った不思議な現象。四則演算の結果が、クラスのどこに書かれるかによって結果がかわってくるというもの。今回説明のために用いる計算式は、5÷10×3である。計算結果は、1.5となるはずである。

ところが、ActionScriptでは、この式がどこに書かれるかによって、結果がかわってくるのである。次がそれを見るためのサンプルコードである。

package {
  import flash.display.Sprite;

     public class Arithmetic extends Sprite {

     private var a:Number = 5 / 10 * 3;
     private var b:Number = 5 * 3 / 10;
     private var c:Number = 5.0 * 3.0 / 10.0;

     public function Arithmetic() {
       var d:Number = 5 / 10 * 3;
       var e:Number = 5 * 3 / 10;
       trace("a =", a);
       trace("b =", b);
       trace("c =", c);
       trace("d =", d);
       trace("e =", e);
       trace(”5/10*3 =", 5 / 10 * 3);
       trace("5*3/10 =", 5 * 3 / 10);
    }
  }
}


このコード内にはaからeまでの変数が定義されており、それぞれに先述の計算式の結果が代入されるようになっている。したがって、すべての変数の値は同じ1.5になると予想される。最後の2行のtraceは変数を媒介しない場合の結果を念のため出力している。もちろん、この結果も1.5となるだろう。では、結果である。


a = 0
b = 1
c = 1.5
d = 1.5
e = 1.5
5/10*3 = 1.5
5*3/10 = 1.5


なんと、変数abは、予想外の結果である。どうも整数として計算されているようだ。あえて小数点以下を記述してみると、cにあるように1.5になる。しかし、コンストラクタ内の式では、小数点などつけなくてもちゃんと実数として計算されている。とんだ落とし穴である。メンバー変数の定義に初期値を計算式で記述する場合には、注意が必要なようだ。どうしてこうなるのか理由は不明だ。

ちなみに、a=0となる理由は、最初の割り算の結果が0になっているからで、その後は何をかけ算しようと結果は0である。一方、b=1となる理由は、先にかけ算が実行される事で値が0になる事を防いでいるからである。

2010年9月11日土曜日

モーション あれこれ その5

前回まで、モーションの中で、とくにイージングを扱ってきた。今回は、バウンドしながら止まるモーションを扱ってみたい。ヒントになる関数は、反比例とsin関数を合成したもの。グラフにすると、次のようなイメージ。赤い破線が反比例のグラフで、緑の破線がsin関数。これらを掛け合わせたグラフが青い実線のグラフである。これのx>0の部分を使おうというアイデアである。

ちなみに、x=0のときは、計算不能である。少なくともActionScriptでは。幸いな事に、このときの値を1とすると、グラフが滑らかにつながる事が知られている。x=0のときは、1として計算するようにプログラミングすればよい。

これを、今まで同様、物体の初期座標をp0t秒後の座標をp(t)とする。そして、物体は、t1秒後にp1の位置で停止するものとした。これらの記号を用いて式を書き直すと、となる。ここで、nは物体が到着地で止まらずに行き過ぎる回数である。時間と移動距離のグラフは、のようになる。これは、n=3のときの例で、p1の位置を3度通り過ぎている事がわかる。止まるときにバウンドしながら止まるわけだ。

最初の到着時刻(すなわち、最初にと着地点を通り過ぎる時刻)t0は、t0=t1/(n+1)である。また、最初の到着時刻からt1を求めるには、t1=(n+1)t0となる。

2010年9月4日土曜日

モーション あれこれ その4

前回の続き、n次関数を使って始点終点の両方でイージング効果を得られる式を考察してみる。今まで同様、物体の初期座標をp0t秒後の座標をp(t)とする。そして、物体は、t1秒後にp1の位置で停止するものとする。

式は、今までのように1つの式では書けず、tの値によって次のようになる。
この式は、t=t1/2のところで、ちゃんと滑らかにつながっている。グラフにすると、となる。赤い線がn=2、黄色い線がn=3、緑の線がn=4のときのものである。参考までに、等速運動と単振動を合成した場合のグラフ(青い線)も載せておいた。どうやら、n=2では、等速運動と単振動を合成したものと比べて、強いイージング効果を得る事はできないようだ。n=3以上ならば、より強いイージング効果が得られる。必要に応じて、使い分ければよい。

2010年8月28日土曜日

モーション あれこれ その3

前回の予告通り、n次関数を使っても、イージング効果を付加した式が作れる事を見てみたい。ご覧の通り、この視点では、緩やかに動き出すようにはとても見えない。しかし、xの範囲を0以上1未満に限定してみると、ご覧の通り緩やかに動き出す式を作れそうに見える。次数をあげる程、ゆっくりと動き出すのだ。
これを、物体の初期座標をp0t秒後の座標をp(t)とする。そして、物体は、t1秒後にp1の位置で停止するものとした、記号で式を書き直すと、となる。これをグラフにするととなる。
赤い線がn=2で、黄色い線がn=3のときのものである。参考までに、等速運動と単振動を合成した場合のグラフ(青い線)も載せておいた。ただし、このままで始点でのイージング効果しかえられない。

ひっくり返せば、終点でだけのイージング効果が得られる。その式は、となる。これをグラフにするととなる。
赤い線がn=2で、黄色い線がn=3のときのものである。参考までに、等速運動と単振動を合成した場合のグラフ(青い線)も載せておいた。

では、次回、n次関数を使って両端でイージング効果を得る式を考察してみる。

2010年8月21日土曜日

モーション あれこれ その2

前回は、単振動のイージング効果を出せる数式を見てみた。今回は、以前このブログでも考察した等速運動と単振動をあわせたイージング効果を出せる式を紹介する。

前回と同じ記号、すなわち、物体の初期座標をp0t秒後の座標をp(t)とする。そして、物体は、t1秒後にp1の位置で停止するものとする。

等速運動と単振動をあわせた式は、となる。ここで、単振動の振幅は、始点および終点を超えない範囲で最大のものを選んである。時間と移動距離のグラフは、となる(赤い線)。比較のために、単振動のグラフも載せてある(青い線)。始点と終点でのグラフの傾きから、等速運動と単振動をあわせた今回の式の方が、より大きなイージング効果が出ている事がわかる。

ところで、次のようなn次関数を使ってもイージング効果を得る事ができる。一見すると、位置として扱う縦軸の値が急激に大きくなりすぎるようで、さらに、nが大きな数になれば、とてもゆっくりと動き出すようには思えない。ところが、視点をかえると、うまい具合に使える事がわかる。次回はそれを見てみたい。

2010年8月15日日曜日

モーション あれこれ その1

アクションスクリプトで物体に動きをつけるとき、単純に座標を増やしたり減らしたりでは、味気ないものになりがちである。イージングと呼ばれるゆっくり動き出したり、ゆっくりと止まったりする効果をつけたりする。また、止まるときに、跳ね返るような効果をつける事がある。ここでは、それらに使えそうな数式を考えてみたい。

まずは、記号の説明から。ここでは、物体の初期座標をp0t秒後の座標をp(t)とする。そして、物体は、t1秒後にp1の位置で停止するものとする。ここでは、tを秒数(=時間)としたが、アクションスクリプトでのフレーム数に置き換えてもよい。

最初に、単純に座標を増やす例から。つまり、先に味気ないと言ったものである。これは、等速運動と呼ばれる。先の記号を使って書けば
となる。これを時間と移動距離のグラフにすると、のようになる。線の傾きが速さに示しているグラフである。

さて、イージングの効果が着いた場合、グラフはどうなるのか?始点、終点での線の傾きが水平に近くなるような曲線になると思われる。そのような形のグラフが描ける数式として、真っ先に思い浮かぶのは三角関数である。先の、記号を使って、式を書けば、となる。単振動と呼ばれる運動だ。これを時間と移動距離のグラフにすると、のようになる。両端で線はほぼ水平になっている。つまり、ゆっくりと動き始め、ゆっくりと止まる。しかし、これを実際に使ってイージング効果を付加してみるとわかるが、意外と効果が小さいのである。次回は、他の方法を考察してみる。