スタートページ＞ Javascript＞ CANVAS

アニメーション（３）疑似sleep機能

アニメーション（１）で示した setInterval()/clearInterval() は、繰り返しの内部には記述できないなど、利用しにくいものでした。アニメーションには、任意の箇所に記述できる sleep() のような関数があると便利です。ところが、Javascriptの標準仕様にはないので自作する必要があります。

人手介入による遅延

画面表示のたびにカウンタを増していき、立て続けにクリックさせることによりアニメーション的な効果を実現することができます。例えば、ループ内部で次のように記述します。
　　　　count++;
　　　　if (count % interval == 0) {
　　　　　　var itval = prompt("表示間隔の指定", interval); 　　　　　　interval = eval(itval);
　　　　}
　　　　y = x*(x-1)*(x-2);
　　　　drawLine(x0,y0, x,y, "white", 4);
しかしこれでは、人手の介入が必要なので不適切です。

自動遅延

sleep()機能を実現する最も単純な方法は、非常に時間のかかる処理を実行させることですが、近年のパソコン機能は非常に高速なので効果がないこと、環境により遅延時間が異なることなど不適切です。

Javascriptの標準機能に、
　　　　t1 = new Date().getTime(); があります。これにより、現在の時刻をt1に取り込むことができます。
　これを用いて、次のようにすれば、dt時間だけ遅延させることができます。
　　　　while（ t2 < t1 + dt ) {
　　　　　　t2 = new Date().getTime();
　　　　}
　具体的には、ループの部分を次のように記述します（★）。
　　　　var t1 = new Date().getTime();
　　　　var t2 = 0;
　　　　alert("２回目以降「このページ～」にチェックを入れてください");
　　　　while( t2 < t1 + dt ){
　　　　　　t2 = new Date().getTime();
　　　　}

私は理由を理解できないのですが、次の事項に留意してください。
　Google Chrome以外のブラウザだと、遅延が起こりません。
　alert()がないと、遅延が起こりません。この割り込みによる時間遅れが影響しているのでしょうか。

関数 sleep()

上の★の部分を、関数 sleep() として、xycoordinate.js に加えました。ループ部の記述は次のとおりです。これなら違和感がないでしょう。
　　　　dt = 20;
　　　　for (x=xmin; x<=xmax-dx; x=x+dx) {
　　　　　　sleep(dt);
　　　　　　y = x*(x-1)*(x-2);
　　　　　　drawLine(x0,y0, x,y, "white", 4);
　　　　　　x0 = x;
　　　　　　y0 = y;
　　　　}