第11回 アニメーション

Cinderella.2には作図した要素をアニメーションで動かす機能がついています。その例が、ユーザーズガイドにある4節リンク機構です。Cinderella.2のツールを使ったアニメーションは、この例で学んでもらうことにしましょう。

レクチャでは、CindyScriptを使ってコンピュータの内部時計を取得し、これでアニメーションを行なう方法を講義します。ユーザーズガイドでは「特殊演算子」の節の「時間」の項目に、内部時計を使って時計を作るサンプルがあります。これをカットアンドペーストでスクリプトエディタのTimer Tickスロットにコピーすれば時計ができあがります。初めは何も表示されていませんが、プレイボタンを押すと時計がでて、針が動きます。このサンプルはTimer Tickスロットだけを使っていますが、数学でのアニメーションや物理シミュレーションのために、他のスロットも使ってアニメーション作品を構成していきましょう。題材はサイクロイド曲線です。

円が直線上をすべることなく転がるとき、円周上の1点が描く軌跡がサイクロイドです。第７回「媒介変数と曲線」で描きましたが、それは式もわかっている場合で、曲線は描かれますが「円が転がる」というアニメーションにはなりません。これをアニメーションとして作ります。

 (1) 画面下のツールから「座標軸を描く」と「グリッドを描く」をクリックして座標軸とグリッドを表示しておきましょう。

(2) 「半径つき円を加える」ツールボタンを選び、中心を(0,3)とし、半径３の円を描きます。

(3)「点を加える」ツールボタンを選んで、適当なところに点を取ります。実際には円周上の点ですが、CindyScriptで位置をコントロールするので円周上でなくて構いません。

(4)「線分を追加する」ツールボタンを選び、円の中心と(3)でとった点を結んでおきます。

これで部品ができました。あとはCindyScriptです。「スクリプト」メニュー(1123版では Script メニュー)からCindyScriptを選んでスクリプトエディタを開きます。ここでは、Initialization、TimerTick、Simulation Startの３つのスロットを使います。

Initializationスロットには、最初に１度だけ実行すればよいものを書きます。ここでは２つの変数の値をセットします。円の半径と角速度(点が円周上を回るとき角が動く速度)です。角速度omegaが、円の動いていく速さを決めます。

Initialization スロット ---------------------------------------

r=3;

omega=0.5;

---------------------------------------------------------------------------

この内容をそのままカットアンドペーストしてもいいでしょう。

Simulation Start  スロットには、プレイボタンを押したとき実行する内容を書きます。プレイボタン押したときアニメーションが始まるように、時計をリセットします。（コンピュータの内部時計そのものをリセットするわけではありません） CindyScriptの組み込み関数で resetclock();です。組み込み関数は青で表示されます。綴りが違っていると赤で表示されますので注意しましょう。

Simulation Start スロット --------------------------------------

resetclock();

---------------------------------------------------------------------------

メインプログラムは TimerTickスロットに置きます。

Timer Tick スロット --------------------------------------

t=seconds();

P.x=r*(omega*t-sin(omega*t));

P.y=r*(1-cos(omega*t));

C.x=r*omega*t;

C.y=r;

drawtext((P.x+0.5,P.y+0.2),"("+round(P.x*10)/10+","+round(P.y*10)/10+")");

if(omega*t>2*pi+1,resetclock());

---------------------------------------------------------------------------

１行目で内部時計の時間を秒単位で取得します。実際には、プレイボタンを押してリセットしてからの経過時間です。

2行目、3行目で点Ｐの位置を決めます。媒介変数表示は x=r(θ-sinθ ) , y=r(1-cosθ )でしたね。角θは、時間の関数として θ=ωt と表すのが普通です。このω（オメガ）を角速度といいます。ただし、ギリシャ文字ではなく、先ほど omega としたのをお忘れなく。

また、 Pは、(3)で取った点の名前です。名前が違っていますか？ では、点の方の名前を変更しましょう。

点の名前を変更する。

「編集」メニューから「インスペクタ」を選んで、インスペクタを表示します。「要素を動かす」ツールボタンを押しておいて、目的の(たぶんＢ)をクリックして選択します。選択できたら、インスペクタの「要素の情報」(青丸にi) ボタンをクリックします。識別名に点の名前が書かれているので、これを P に書き換えます。画面上の点の名前がＰに変わればOK です。ついでに、点Pを原点に移動しておきましょう。点Ｐをドラッグするではなく、インスペクタの「位置」を[0,0]に書き換えればいいのです。次の図では、円の中心もCに名前を変更してあります。

CindyScriptの4，5行めは、円の中心Cの位置の指定です。θ＝ωt だけ動いたときのx座標はｒθ、y座標は半径ｒですね。

6行目では、点Pの位置を表示しています。この行はなくてもかまいません。

7行目は、画面から出ていったら戻るようにしたものです。もし角ωtが２π+1を超えたら時計をリセットしてやり直します。この行はなくても構いません。なお、円周率を表すpiはCindyScriptであらかじめ円周率として設定してあるものです。

さあ、スクリプトエディタの実行ボタン（歯車アイコン）をクリックし、プレイボタンを押してみましょう。動きましたか。

点Ｐの軌跡を表示したい場合は、点Pを選択しておき、インスペクタの「特別な表示の設定」で「足跡を描く」にチェックを入れます。

プレイボタンを押すと、点Ｐが軌跡を残しながら動いていきます。軌跡の長さなどはインスペクタで変更できます。

この方法だと、足跡は前の方が消えてしまいますね。完全に残すのでしたら、plot()関数で媒介変数表示のグラフを描きます。ただし、いま点Ｐのあるところまでですので、少し工夫が必要です。スタートから今の時刻までを定義域として、start,stopオプションで指定するのです。これは練習問題としましょう。start,stopオプションの使い方は、第８回 関数のグラフ CindyScriptを使う を参照してください。実行前に、インスペクタで点Pの足跡表示のチェックは外しておきましょう。

ところで、ここまで、サイクロイド曲線の媒介変数表示がわかっているものとしてその式を使っていますが、それを使わない手もあります。円の中心Cの位置は、x=rωt , y=r で簡単に求められますね。そうしたら、点Ｐは点Cからの相対的な位置として指定するのです。点Ｐの回転角は反時計回りにωtで、初めの位置は 3/2πのところにありますから、時刻tにおける点Ｐの位置は、x=rcos(3/2π-ωt),y=rsin(3/2π-ωt)ですね。そこでCとPの座標計算を次のように変更します。Cの方を先に計算します。

---------------------------------------------------------------------------------------------------------------------

C.x=r*omega*t;

C.y=r;

P.x=C.x+r*cos(3/2*pi-omega*t);

P.y=C.y+r*sin(3/2*pi-omega*t);

---------------------------------------------------------------------------------------------------------------------

【練習問題】

外サイクロイド曲線（定円上を、外接円が滑ることなく接しながら回転していくときの外接円上の点の軌跡）を、円の中心の位置と、円の中心からの相対的な位置を計算する方法でアニメーション表示してみましょう。二つの円の半径を文字で設定すると式がちょっと面倒なので、３と１にしてしまいましょう。下図の大きい円が半径３，その円周上を滑ることなく回転していく円の半径が１です。

うまく動いたら、半径を文字で置いて考えてみれば、外サイクロイドの媒介変数表示の式が求められますね。（答は第７回 媒介変数と曲線にあります）