はじめに
ある点からある点への画像の移動について考えた時、ただ画像の位置が変わっているだけなのでその動きは瞬間移動に見えてしまいます。ここではその動きが滑らかに見えるような工夫を紹介します。
完成したものはこちら
手順1 画像の位置を決めるための点を作成する
配置した画像を動かすには端っこの2点が必要です。点Aから定まる2点B,Cを配置し、BCを画像の端っこの点としましょう。
B = (x(A)-1,y(A)+1)
C = (x(A)-1,y(A)-1)
手順2 画像を配置する
手順1で配置した2点を利用し、画像を配置します。
ツールボタンから画像を配置し、その画像を選択すると、上の画像のような画面になるので、隅1にBを、隅2にCを選択します。点B,Cは点Aによって定まる点であるので、画像を動かす時にはAを動かせば良いですね。
手順3 右に1動く関数を作成する
亀を右に動かすためにはAのx座標を1大きくする必要があります。ボタンをクリックした時に実行されるJavaScript関数をグローバル関数として作成します。
function moveForward() {
ggbApplet.evalCommand(`A=(x(A)+1,y(A))`);
}
手順4 ボタンを作成し、クリックされた時に関数を呼ばせる
ツールバーからボタンを追加し、先程用意した関数がクリックした時に実行されるようにします。
moveForward();
すると、ボタンが押された時に亀が動きます。
手順5 右に0.1動く関数を作成する
手順3で作った関数に変更を加えます。
function moveForward() {
ggbApplet.evalCommand(`A=(x(A)+0.1,y(A))`);//0.1に変更
}
これを10回呼ぶことで元の関数と同じ挙動をすることになりますね。
手順6 関数を連続して実行する関数を作成する
先程作成した右に0.1動く関数moveForward()について、0.1秒後に実行,0.2秒後に実行,0.3秒後に実行...のようにすることで1秒かけて右に1動く関数を作成することができます。引数にした関数を0.1秒間隔で10回実行するJavaScript関数を作成します。具体的な作成方法はこちら
//0.1秒間隔で10回実行する
function frameAdvance(func) {
for (var i=0; i<10; i++){
setTimeout(func, i*100);
}
}
手順7 関数を組み合わせる
手順5〜6で点Aのx座標を0.1を大きくする関数moveForward()と、引数にした関数を0.1秒間隔で10回実行する関数frameAdvance(func)を作成しました。その関数を組み合わせることで、1秒かけて点Aのx座標を1大きくすることができます。
frameAdvance(moveForward);
これでコマ送りで横に1動く亀の動きを表現することができました。それではここから亀が横に1ではなくn動くように変更していきます。
手順8 スライダーを作成し、変数を用意する
ツールバーからスライダーを作成します。変数の設定は整数にしておきます。
手順9 既存の関数の1をnに一般化する
手順5で作成した以下の関数は1の1/10の0.1だけ動かすものでした。その1がnに置き換わるので、n/10動かせば良いとわかります。
作成した関数に、GeoGebra上の変数nを取得し1/10にする処理を加えます。
function moveForward() {
var distance = ggbApplet.getValue('n');
distance /= 10;
const code = `A=(x(A)+${distance},y(A))`;
ggbApplet.evalCommand(code);
}
完成！横方向にnだけコマ送りで動く亀を作成することができました。これを応用することで、LOGOタートルのようなプロジェクトをGeoGebraで作成することができます。（いつか記事にします）