質問: ''; }); //使用出来るデータを表示 $("#status1").html("X 座標 : " + mx + "Y 座標: " + my + "画面の中央 X: " + xmid + "画面の中央 Y: " + ymid + "画面の横幅: " + svgw + "画面の縦幅: " + svgh + "ランダム値 a: " + random.a + "ランダム値 b: " + random.b + "ランダム値 c: " + random.c); $("#mysvg").html(input); }, 10); ``` やりたいことはマウスの動きに合わせてSVGの "path" を使用して蛇のようなアニメーションを再現したい。 ※Canvasも試してみましたがsvgの方が自由度が高いのでSVGを使用しました。 **問題** ・マウスを動かさないとランダム値が変化されない ※ランダム値が動かない理由は "mousemove" イベントが発生していないと "ランダム値" も変化されないというのは理解しております。 ・"input =" の部分を addEventListener関数の外に出すこともできますがその場合マウスの座標が取得できない。 ※ブラウザの開発者モードの "Console" タブに行き "" の値を確認すると マウスの座標の部分が "NaN" になる。 ※一番下にリンクを張っておきます。 ・マウスを止めた場合 "path" の中央の値が1秒ごとに動いている理由? **最終的にやりたいこと** ・pathに2,3点ほどランダムに値が変化する変数を追加してマウスを動かしていても止めている状態でもランダムに変化させたい やりたいこととしてはこちらの方が望ましいですが開発者ツールのconsoleメッセージでエラーが出る ↑のようなやり方でも動くようですが "NaN" エラーが出ているのでやり方がおかしいのかもしれません。 Javascriptの経験はまだ浅い方なのでもっといい方法があるのかもしれません。 宜しくお願い致します。
回答: ざっくりですが修正してみました。 やったこと ### setIntervalで毎回実行する必要が無い記述はわける。 毎回実行する必要があるのは下記項目なので、それ以外の記述はそとに移しました。 1. randomの数字を撮り直す 2. 情報の取得・描画 3. svgのパスを生成し直す ### パスを作る処理を関数化 マウスを移動した時の処理と setIntervalの場合にパスを生成する処理を 共通しそれぞれで実行するように修正しました。(`createPath`) あとは見ていただければなんとくわかるのではないかと思います。 Pathの生成部分などいまベタで描いてしまっているのですが for文で描いたほうが応用が効きそうかなとは思いました。