WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:マウスにゆっくりと近づくスクリプト

ひろ [WriteDate : Wed May 2 14:25:13 2001]

はじめて投稿させていただきます。
現在JavaScriptを勉強中です。
マウスを追っかけてくるスクリプトでこのサイトのログにある
http://www06.u-page.so-net.ne.jp/wa2/mugi/js/love_mouse1.htm
のようなものではなく、マウスを動かすとゆっくりと近づいてくるものを見たことがあるのですが、どうやって作るのでしょうか。わかる方がいらっしゃいましたら教えてください。

このサイトのログにあるものはonmousemoveでマウスの座標を取得してオブジェクトのスタイルシートに代入すれば良いのですが、ゆっくりと近づいてくるものは・・・・・???


バギンズ [WriteDate : Wed May 2 18:47:28 2001]

同じ58番の一番下にあるようですけど...

http://hp.vector.co.jp/authors/VA013453/js/001005.htm


ひろ [WriteDate : Wed May 2 23:33:39 2001]

ありがとうございます。
タイマーで時間差を設けたものですね。こんなのもあるんですね。勉強になります。
ただ実を言うと私の考えたものとちょっと違うんです。マウスを速く動かしても物体はゆっくりとマウスに近づくものなのです。


ひよこ [MAIL] [URL] [WriteDate : Thu May 3 19:06:47 2001]

たぶんこんなのかな?
http://obnet.3nopage.com/sample/Mouse_Trail/index.html

3番当たりが雰囲気に近いかも


バギンズ [WriteDate : Fri May 4 03:39:54 2001]

>ひろさん
すいません。
動きだけ見てソースまで見ていなかったので、てっきり、ひよこさんが提示したサンプルと同じ処理なのだと思っていました。(^_^;)

なので、私も勉強になりました。(^_^;)


ひろ [WriteDate : Mon May 7 17:59:32 2001]

遅くなって済みません。
いろいろなご意見ありがとうございます。
雰囲気としてはひよこさんのご紹介の3番目に近いです。

私も調べてみました。(ひよこさんのものとも微妙に違います。)
http://www.people.or.jp/~takoten/okkake.html
http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ja-index.htm の3-1
(両者はほとんど同じ物です。)

こんなにいろいろなものがあるとは思いませんでした。

こんな質問をしても良いものかとは思うのですが、ソースの処理内容がよくわかりません。
 ひよこさんのご紹介の3番目のものならば、function trailer(){...}
の中のループの内容、
 私の挙げた例では「移動距離からxy座標を算出する部分」と「メイン関数の部分」です。(「メイン関数の部分」三平方の定理を使っているらしいことはわかるのですが…。)

どちらか片方だけでも説明していただけませんでしょうか。


ひよこ [MAIL] [URL] [WriteDate : Tue May 8 00:20:15 2001]

> 私も調べてみました。(ひよこさんのものとも微妙に違います。)
> http://www.people.or.jp/~takoten/okkake.html
> http://www2s.biglobe.ne.jp/~club_tom/java-kouza/ja-index.htm の3-1
>(両者はほとんど同じ物です。)
この両者はソースは見てないですが動きから見て処理は同じ様ですね。
基本は画像の現在位置からマウスの座標までの距離をある数値で分割
しているだけですので、マウスに最短距離で近づきます。

私の処理法方は複数の画像の座標を使うところです。
ですから画像1つでも本当は2つの座標を使っています。(わかりますよね)
マウスを移動すると直に付いてくるダミー(非表示)画像の座標の位置と画像現在位置の差をもとに近づく加速度を変化させています。

function trailer() {
    if (flag==1 && document.all) {
       for (i=1; i<=img_max-1; i++) {
               xpch[i]=(xpch[i]+(xpos[i-1]+step-xpos[i])/a)/b;
               ypch[i]=(ypch[i]+(ypos[i-1]-ypos[i])/a)/b;
              xpos[i]=xpos[i]+xpch[i];
            ypos[i]=ypos[i]+ypch[i];
       }
        xpos[0]=x+step;
        ypos[0]=y;

これがメインの処理ですね。

stepは画像同士のx間距離です。xpixh[i]が加速度から算出した現座標からの移動される差分です。
たぶんわかりづらいのは

xpch[i]=(xpch[i]+(xpos[i-1]+step-xpos[i])/a)/b;
ypch[i]=(ypch[i]+(ypos[i-1]-ypos[i])/a)/b;

の部分だと思いますが、上記2行目はY座標なのでstepが無いだけです。
単純に    xpos[i-1]-xpos[i] は現在位置とその一つ隣の画像位置との
差(距離)を出しています。
この差を単純に足すと先の2例のサイトの様な処理に近くなります。(少し違うけど)
この差を定数aで割ることで画像がスコンと近づかないようにしています。
次ぎに、その算出された(差/a)と現在の移動量(xpch[i])と足し合わせ定数bで割ることで加速度を算出しています。
要するに今までの移動量と次ぎに移動する所までの両者から次の移動量を決めています。

まとめると
(1)次の座標の位置はマウスでなく1つ先の画像座標を基準にしている。
(2)移動する量は以前の移動量と次の移動量を按分し加速をスムーズにする。

こうすることによって、移動先は引っ張られる方向のベクトルの様な形になり
いかにもゴムかバネで引っ張られているように見えるわけです。

こんな説明でわかりますでしょうか?


ひよこ [MAIL] [URL] [WriteDate : Wed May 9 17:51:37 2001]

すみません。
サンプル置いていたサイトが先日からダウンなのかつながらなくなったので
サイトを移動しました。

http://members.jcom.home.ne.jp/1633348312/

途中で見にこられた方申し訳ないです。
今度は@homeだから大丈夫と思う(たぶん)


ひろ [WriteDate : Wed May 9 19:03:08 2001]

詳しいご説明ありがとうございました。まだ正直言って完全に理解したとは言えない段階ですが(加速度関係の定数aとかb)…処理の流れはつかめました。。

ただ1つ大きな疑問があります。複数画像の場合
http://members.jcom.home.ne.jp/1633348312/sample/Mouse_Trail/sample1_2.html
は画像の数が6個のはずなのに表示は5個です。ダミーはないようですが残りの1個はどう言う意味を持っているのでしょうか。(画像名を変えたり、ポジションを変えたりして実験してみると画像6が表示されていないようです。)


ひよこ [MAIL] [URL] [WriteDate : Wed May 9 23:16:36 2001]

> 画像の数が6個のはずなのに表示は5個です。
すみません。単純ミスです。(^^;

誤: for (i=0; i<img_max-1; i++) {
正: for (i=0; i<=img_max-1; i++) {

等号が抜けてました。

1個の画像で旨く行っていたのは、img[1]に対してspa0のスタイルが対応していたためです。
単にfor文をコメントアウトしていたのでわかりにくくなっていました。(すみません)
ですので、<body>内のimage表示部分

document.write("<span id='span"+i+"' class='spanstyle'>");
document.write("<img src='" +img[1].src+ "' name='img'>");

document.write("<span id='span0' class='spanstyle'>");
document.write("<img src='bullet.gif' name='img'>");
でもいいわけです。

両者ともアップし直しました。


ひろ [WriteDate : Fri May 11 18:56:37 2001]

ありがとうございました。
たいへん勉強になりました。定数a,bの値を変えたり、タイマー遅くしたりすると動きがよくわかります。(^ ^)

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]
ChaichanPAPA's World