- ベストアンサー
プログラムですけど、問題はsinθとcosθです
<script language="JavaScript"> <!-- iList = ["img0","img1","img2","img3","img4","img5"]; mx = my = cnt = 0; r = 35; function rotIMG(){ for (i=0; i<iList.length; i++){ n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; document.images[iList[i]].style.pixelLeft = mx + Math.sin(n) * r; document.images[iList[i]].style.pixelTop = my - Math.cos(n) * r; } } // --></script> これで document.images[iList[i]].style.pixelLeftは横の位置を document.images[iList[i]].style.pixelTop は縦の位置を 導き出しているんですよね。 そうすると、Math.sin(n) * r は縦の長さをMath.cos(n) * r は横の長さを表してる訳ですから mx + Math.sin(n) * r とmy + Math.cos(n) * r は 長さを導き出すのに矛盾してないでしょうか。 ここまで頭が悪くて相当ショックを受けているんですけど。 詳しい説明を含めて宜しくお願い致します。
- persona
- お礼率95% (588/614)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> Math.sin(n) * r は縦の長さを > Math.cos(n) * r は横の長さを表してる 質問者様はきっと、一般的な数学における座標系に基づいて考えてらっしゃるのだと推察致します。 しかし、このプログラムでは、多少変則的な座標系が用いられているようです。 つまり、角度「n」（単位：ラジアン）は、次のように定義されているようです： n=0 → 上方向 n=π/2 → 右方向 n=π → 下方向 n=3π/2 → 左方向 なお、コンピュータの画面の座標は、横方向は左から右に進むのですが、縦方向は上から下に進みます。つまり、座標(0,0)は画面の左上にあります。そのため、縦方向の式にはマイナス記号が使われています。 なぜ、このプログラムを書いた方が、このように分かりにくい座標系を用いたのか、という理由は、恐らく、回転方向や座標を変換するための式を使わずに、計算式を出来るだけ簡潔にすることで、計算時間を短くする狙いがあったからだと推察致します。
その他の回答 (1)
- t_netbug
- ベストアンサー率34% (15/44)
とりあえず、以下の2点を行い動作を確認してみましょう。 １．分かりにくくなっているnを分かりやすいカタチに分解、あるいは一時的に単純な式に変更する。 ２．複数の画像ではなく、単一の画像でキチンと動くか調べる。 下記はサンプルになります。 書き方がDOM入ってますが、読める範囲だと思います。 <html> <head> </head> <body> <div id="star" style="position:absolute;left:0px;left:0px;">☆</div> <script type="text/javascript"> //<!-- mx = 0; // 回転の中心に設定する座標ｘ(マウスの座標ｘなど) my = 0; // 回転の中心に設定する座標ｙ(マウスの座標ｙなど) rad = Math.PI/180; // 角度形式に変換 r = 100; // 回転の中心からの距離 i = 0; // 角度(360で一回転) obj = document.getElementById('star'); timeId = setInterval('circle()',10); //circle関数を呼び出し続ける function circle(){ obj.style.posLeft = (mx + r*Math.cos(rad*i)); obj.style.posTop = (my + r*Math.sin(rad*i)); i++; //角度を1度プラスする } // --> </script> </body> </html>
お礼
レスを頂き、ありがとうございます。 まずは貴重なURLを貼り付けてもらい、物凄く参考になりました。 Wikipediaでも見たんですが、数式ばかりで手がつけられずに諦めてしまいました。 それ以上に、わざわざ自分ごときのためにプログラムを書いて下さり、感謝の念に絶えません。 ソースコードは一応読めました。 このソースで試してみた結果ですが、onMousemoveイベントが抜けているため、星は座標(０,０)を中心とした半径１００ピクセルをずっと回転している様子が永遠を続いていました。 そこで、 <html> <head> </head> <body onMousemove="mx=event.x;my=event.y"> <div id="star" style="position:absolute;left:0px;left:0px;">☆</div> <script type="text/javascript"> //<!-- mx = 0; // 回転の中心に設定する座標ｘ(マウスの座標ｘなど) my = 0; // 回転の中心に設定する座標ｙ(マウスの座標ｙなど) rad = Math.PI/180; // 角度形式に変換 r = 100; // 回転の中心からの距離 i = 0; // 角度(360で一回転) obj = document.getElementById('star'); timeId = setInterval('circle()',10); //circle関数を呼び出し続ける function circle(){ obj.style.posLeft = (mx + r*Math.cos(rad*i)); obj.style.posTop = (my + r*Math.sin(rad*i)); i++; //角度を1度プラスする } // --> </script> </body> </html> 上記のように書き換えたらしっかりとカーソルの周囲を回ってくれました。 いろいろとしてもらい、感謝しています。
お礼
即レスを頂き、感謝します。後、わざわざ私ごときに様などを使ってもらい、恐縮です。 ラジアンって凄く耳にした記憶があるのですが、今一思い出せません。 プログラマーの道を断って２年あまり。 その間に一生懸命勉強してきた知識をドボドボと垂れ流してしまった事を深く後悔しています。 ラジアンはWikipediaを見ても、いくら記憶の糸を手繰り寄せてもどうやって使ったのか思い出せません。 こうも知識が無くなるとは物凄く頑張って勉強していた努力が言葉どおり水の泡です。 あ、また愚痴ってしまいました。私の悪い癖です。 何だかソースコードを読まれただけなのに全てを把握された感じを受けました。 実は、このプログラムはマウスのカーソルの周りを数個の星(あくまでサンプルです)が回転するというものです。 それで、本に書かれている解説によると、 function rotIMG(){ for (i=0; i<iList.length; i++){ n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; document.images[iList[i]].style.pixelLeft = mx + Math.sin(n) * r; document.images[iList[i]].style.pixelTop = my - Math.cos(n) * r; } } のmxはカーソルのX座標を、Math.sin(n)はカーソルから見た星のX座標を表しているとの事です。 それと、同じくmyはカーソルのY座標を、Math.cos(n)はカーソルから見た星のY座標を表しているという事なのですが。 今一分かりかねますが、まず、どういう風に三角形を想像すればいいのかは少しずつ分かってきた気がします。 初めから角度nの位置がずれてたんですね。 そうすると、解釈ができなくもないですが、その三角形が的を射てるのかどうかは何とも断言できません。 まぁ、自分にとっては少しランクが上のプログラムだったのかもしれませんね。 もっと初歩のプログラムから積み上げないといけない。 昔学んだ知識を糧にすれば、これくらいのレベルぐらいできると奢っていたのかもしれません。 ただ、もし問題無ければ、yumitsukiさんの再度の見解もお聞きしたいところですが、それは我がままというものでしょうか。 お暇な時間があるときで構いませんので、どうか宜しくお願い致します。
補足
ちょっと１つだけどうしても解決できない疑問が生じまして、補足と言う形で書かせてもらいます。 問題点はY座標の位置についてです。 ここに書いたソースコードはサンプルのものでして、実はY座標を導き出す際にも今までプラス(＋)記号を使っていたのです。 しかし、それでも画面上は正常に星が回転してました。 これは、どういった事なのでしょうか。 もし、お分かりになるとしたらその理由を、そうでないにしても今一まだY座標の事でしこりが残っている部分に対する説明を頂ければ、これに勝る幸いは無いと思っています。 先ほどのアドバイスで縦方向は上から下に向かっているという説明を受けました。 それにより、Y軸の式はマイナス(ー)になると。 すると、カーソルより上の位置に表示されている星は負の値になる事になりますが、それは正しいのでしょうか。 誠に失礼は十分承知でお聞きしております。 どうか助けると思って宜しくお願い致します。