Pirika logo
JAVA,HTML5と化学のサイト

Pirika トップ・ページ

Pirikaで化学
 物性化学
 高分子化学
 化学工学
 分子軌道
 情報化学

 その他の化学
 アカデミア
 MOOC講義資料
 プログラミング

ハンセン溶解度パラメータ(HSP):
 HSP基礎
 HSP応用
 ポリマー
 バイオ・化粧品
 環境
 物性推算
 分析
 化粧品の処方設計
 その他
 自分でやってみよう

雑記帳

Ad Space for you

 

Ad Space for you

 

 

 

Last Update

26-May-2017

プログラミングHTML5でアニメーション

非常勤講師:山本博志 講義補助資料

 

アニメーションは、最初は、分子を描いて、消して、動かして描くをループで繰り返せばいいと思っていたが、実際は結構大変だった。そして、動かし始めると止まらなくなった。また、アニメーションしている間にも、ドラッグ操作、分子の拡大、縮小、移動の操作は受け付けてくれないと困る。

最終的にはこんな形にしておくと、他の操作を受け入れながら、アニメーションもできるようだ。ポイントはsetInterval関数だ。ネットで調べてみて欲しい。

var timer1;
function MyVibstart(){
clearInterval(timer1);
ReDraw();// 分子の描画ルーチン
timer1 = setInterval("TimeSpend()", 25);
if(VivOn==0){return;}
}

function TimeSpend(){
if(VivOn==0){return;}
vib_animate();// 振動したあとの座標を得る。
ReDraw();// 分子の描画ルーチン
toDoSign();//振動方向の逆転
}

ストップボタンが押されたらVivOnに0をセットするとアニメーションは止まる。

次に、困ったのが、この遷移状態は20*20で400データ、構造と振動を合わせると800データある。これを全てプログラムの中に入れ込むのは意味が無いだろう。データだけで5Mを超える。これをJavaScriptでサーバーからとってこれるようにしたかった。データはテキストファイルなのだから、普通にブラウザーで表示することもできるのに、テキストデータをJavaScriptのプログラム上で利用出来るように読み込むやり方が分からなかった。いろいろネットで調べたところ、

loadTextFile(ファイルネーム);

function loadTextFile(fName){
httpObj = createXMLHttpRequest(displayData);
if (httpObj){
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}

function displayData(){
var textAreaToChange = document.getElementById("textarea1");
if ((httpObj.readyState == 4) && (httpObj.status == 200)){
textAreaToChange.value = httpObj.responseText;
}else{
textAreaToChange.value = "Loading...";
}
}

function createXMLHttpRequest(cbFunc)
{
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
return XMLhttpObject;
}

とやれば、テキストはhttpObj.responseText;に入ってくるので、プログラム中で再利用可能になる。これを行に分割して、スペース区切りで分割して座標データと振動データにすれば良い。ところがiPadでは、ここのXMLhttpObjectのところでこけている。httpObj.readyState が4を返さないため延々とloading..が表示される。それについてはもう少し調べてみよう。

2011.6.20

原因が分かった。サーバーにあるテキスト・データは、同じサーバーにあるhtmlファイルから呼ばれたときにだけ読み込むことができる。自分は自分のサーバーを、"www.pirika.com"と呼んでいるのだが、ホームページ作成ソフトはリンクを勝手に"pirika.com"とwwwを外してしまう。そこで、異なるサーバー扱いになりエラーになっている。相対リンクではなく、絶対リンクにしたら解決した。もちろんiPadでもOKだ。

プログラミングのトップページへ

 

メールの書き方講座