ボールのバウンドができるまで:2. Math.PIとかMath.exp

前回に続いて、今のところ、ここまでできた。

var amplitude=100;
var x=transform.position[0];
var y=transform.position[1]-(amplitude*Math.cos(time));
[x,y]


バウンドの大きさを大きくします。

var amplitude=300;
var x=transform.position[0];
var y=transform.position[1]-(amplitude*Math.cos(time));
[x,y]

変数frequencyを使って、バウンドの回数をコントロールします。
数値が大きいほうがたくさんバウンドします。

var amplitude=300;
var frequency=1;
var x=transform.position[0];
var y=transform.position[1]-(amplitude*Math.cos(frequency*time));
[x,y]

ココまでできたところで、グラフエディタを見てみると、こうなってます。
20120815_1

一応周期的に動いているものの、その周期が6秒ちょっと。
これを切りのいい1秒にします。

var amplitude=300;
var frequency=1;
var x=transform.position[0];
var y=transform.position[1]-
(amplitude*Math.cos(frequency*time*2*Math.PI));
[x,y]

2*Math.PIというのは、「2×3.1415…」のこと。
frequency*time*2*Math.PIは1秒あたりのバウンド回数を決めます。
20120815_2

どうしてそうなるかについては、角度(degree)とラジアン(radian)の関係を知らないといけないのですが、それを理解するだけでひと仕事なもので、省略。

とりあえず分からなくても、frequency*time*2*Math.PIが1秒あたりの回数を決めるって丸覚えしておけばいいんだよ、とエクスプレッションの教則本にも書いてました。
これで、バウンドの大きさ/回数/周期はできました。

でも、プレビューすると分かりますが、いつまでたっても同じ勢いでバウンドし続けています。
これを時間が経つに連れて、バウンドが小さくなるようにします。
そこでMath.expで割り算して(’/’=スラッシュは割り算のこと)、バウンドを徐々に小さくします。

var amplitude=300;
var frequency=1;
var x=transform.position[0];
var y=transform.position[1]-
(amplitude*Math.cos(frequency*time*2*Math.PI)/Math.exp(time));
[x,y]

どうなったかグラフエディタで見てみると…
20120815_3

バウンドの大きさをオレンジ色の太線でなぞってますが、急激に小さくなってます。
この変化をコントロールするために、さらにdecayという変数を使います。

var amplitude=300;
var frequency=1;
var decay=0.5;
var x=transform.position[0];
var y=transform.position[1]-
(amplitude*Math.cos(frequency*time*2*Math.PI)/Math.exp(decay*time));
[x,y]

decay=1だと、何も変わりません。
数値を大きくすると、より急激に変化し、数値を小さくすると緩やかに変化します。
ここでは、ゆっくりとバウンドを鎮めたいので0.5にしてみました。
グラフエディタであらためて見てみると、こうなります↓
20120815_4

/Math.exp(time)だけに比べて、バウンドが長持ちしていますね。
さて、仕上げです。

今のボールのバウンドは、落下地点のピクセル(高さ)が一定していません。
Math.cosの「1→0→-1→0→1」という周期的変化を基にしているので、仕方ないのですが。
20120815_4b

この問題は、Math.absを使うことで解決します。
abs=absolute value(絶対値)からきてますので、なんとなく役割がイメージできますね。

var amplitude=300;
var frequency=1;
var decay=0.5;
var x=transform.position[0];
var y=transform.position[1]-
[amplitude*Math.abs(Math.cos(frequency*time*2*Math.PI)
/Math.exp(decay*time))];
[x,y]

丸括弧を角括弧に変えたのは、最後に丸括弧が3つ続いて、ややこしかったから。
別に丸括弧のままでも支障はなかったです。

いちおう、角括弧のほうが丸括弧より優先度が高いはずだったので、変えてみました。
これで、グラフエディタを確認してみますと↓
20120815_5

スパッとオレンジライン(地面)から下(ピクセル数が大きい側)が消えてます。
正確には反転したんですけど。
これでボールのバウンドが完成しました。

実際のモーションは過去記事にあるのでそっちでどうぞ。
長々と書き連ねましたが、これでおしまい。


コメントを残す

メールアドレスが公開されることはありません。