ットスパーク移動変化量の考察

2010/03/14

何とタイトルを付ければよいか分からなかった。若干、備忘録的な要素を含む。
相変わらずちまちまとヒットスパークなどを作成しているのだが、今回はそれ関係の記事。
12フレームのヒットスパークを作るとして、時間を示す値「clock」が、0 〜 1の値を取るとする。
nフレーム目のclockの値は、n/12とする。
で、非常に細長い球を20度の角度毎に1つ、合計18個配置し、中心から放射状に飛んでいくように動かす簡単なヒットスパークを作るとしよう。 そこで考えなければならないのが移動量の管理だ。
飛んでいく細長い球が、12フレーム後には120だけ動くものとしよう。100でも良いが、フレーム数の関係で120にする。 1フレーム毎に単に10動かすのなら「移動量 = clock * 120」とすればいい。簡単だ。 実際にやってみると下のようになる。

移動量一定の場合のプレビュー

ヒットスパークとしてのデザインは置いておくとして、少々何か物足りないとは思わないだろうか。
どうも最初の方がもっさりとしているのである。つまり勢いが足りない。
困ったことに1フレームごとの変化量が一定だと、どうしても躍動感に欠けてしまうのだ。
ヒットスパークであれば最初に大きく「バッ!」と動いて、最後の移動量はそう大きくなくても良いのだと思われる。

そこで0〜1の間で等間隔で進んでいく変数をclockの代わりに使えばよいわけだ。
最初は緩やかで後から変化量を大きくするのならclock2を使えばいいが、今回やりたいのは逆のパターンである。
1-(clock-1)2をclockの代わりに使ってみよう。これはclock2のグラフを上下逆にして右上に1ずつ動かしたものになるので、最初の変化量が大きい。展開すると2*clock-clock2だ。

負の2次関数を使用した場合のプレビュー

最初のものと比べるとだいぶ勢いが出て、ヒットスパークらしくなったのではないだろうか。勿論このアニメ時間では実用に供さないのだが、高速化してもブラウザに負担がを掛けるだけだろうからそこはご了承を。
2次関数ではなく3次関数を使えば変化量はもっと極端になる。関数は1+(clock-1)3だ。(展開までやるとclock3-3clock2+3clockとなる)
逆に、1-(clock-1)2よりももうちょっと抑えたい場合はもう少し工夫する必要がある。
ニシャスが上記2つのものに気付く前に思いついたのは1-clock2の積分を使う方法だった。式にするとclock-1/3*clock3である。
ただしここでは0〜1の範囲に合わせるために1.5を乗算している。 積分の式を忘れて高校の定理集をひもといたのは秘密である。(見た後で、微分覚えていた自分にとって無駄な労力だったと悟ったが)

以下にそれぞれの動きを示すアニメgifと、変化量のグラフを示す。
左から、clock(そのまま)、(clock-1/3*clock3)*1.5(積分)、1-(clock-1)2(2次関数)、1+(clock-1)3(3次関数)。

clockclock-1/3*clock^31-(clock-1)^21-(clock-1)^3

ぐらふ

アニメーションgifはご自由に持ち帰って何かのエフェクトに使うなり転載するなりしちゃって構いません。
パレット共有もされています。




前の雑記 次の雑記

雑記トップへ 
サイトのトップページへ