プログラムですけど、問題はsinθとcosθです

解決済

質問者：persona
質問日時：2009/01/14 22:55
回答数：2件

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yumitsuki
回答日時：2009/01/14 23:32

> Math.sin(n) * r　は縦の長さを

> Math.cos(n) * r　は横の長さを表してる
質問者様はきっと、一般的な数学における座標系に基づいて考えてらっしゃるのだと推察致します。

しかし、このプログラムでは、多少変則的な座標系が用いられているようです。
つまり、角度「n」（単位：ラジアン）は、次のように定義されているようです：
n=0 → 上方向
n=π/2 → 右方向
n=π → 下方向
n=3π/2 → 左方向

なお、コンピュータの画面の座標は、横方向は左から右に進むのですが、縦方向は上から下に進みます。つまり、座標(0,0)は画面の左上にあります。そのため、縦方向の式にはマイナス記号が使われています。

なぜ、このプログラムを書いた方が、このように分かりにくい座標系を用いたのか、という理由は、恐らく、回転方向や座標を変換するための式を使わずに、計算式を出来るだけ簡潔にすることで、計算時間を短くする狙いがあったからだと推察致します。

この回答への補足

ちょっと１つだけどうしても解決できない疑問が生じまして、補足と言う形で書かせてもらいます。
問題点はY座標の位置についてです。
ここに書いたソースコードはサンプルのものでして、実はY座標を導き出す際にも今までプラス(＋)記号を使っていたのです。
しかし、それでも画面上は正常に星が回転してました。
これは、どういった事なのでしょうか。
もし、お分かりになるとしたらその理由を、そうでないにしても今一まだY座標の事でしこりが残っている部分に対する説明を頂ければ、これに勝る幸いは無いと思っています。
先ほどのアドバイスで縦方向は上から下に向かっているという説明を受けました。
それにより、Y軸の式はマイナス(ー)になると。
すると、カーソルより上の位置に表示されている星は負の値になる事になりますが、それは正しいのでしょうか。
誠に失礼は十分承知でお聞きしております。
どうか助けると思って宜しくお願い致します。

補足日時：2009/01/15 15:57

通報する

- 0
- 件

通報する

この回答へのお礼

即レスを頂き、感謝します。後、わざわざ私ごときに様などを使ってもらい、恐縮です。
ラジアンって凄く耳にした記憶があるのですが、今一思い出せません。
プログラマーの道を断って２年あまり。
その間に一生懸命勉強してきた知識をドボドボと垂れ流してしまった事を深く後悔しています。
ラジアンは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さんの再度の見解もお聞きしたいところですが、それは我がままというものでしょうか。
お暇な時間があるときで構いませんので、どうか宜しくお願い致します。

通報する

お礼日時：2009/01/15 04:33

No.2

回答者： t_netbug
回答日時：2009/01/15 14:43

とりあえず、以下の2点を行い動作を確認してみましょう。

１．分かりにくくなっているnを分かりやすいカタチに分解、あるいは一時的に単純な式に変更する。
２．複数の画像ではなく、単一の画像でキチンと動くか調べる。

下記はサンプルになります。
書き方がDOM入ってますが、読める範囲だと思います。
<html>
<head>
</head>
<body>
<div id="star" style="position:absolute;left:0px;left:0px;">☆</div>
<script type="text/javascript">
//
</script>
</body>
</html>

参考URL：http://nkiso.u-tokai.ac.jp/phys/matsuura/lecture …

- 0
- 件

通報する

この回答へのお礼

レスを頂き、ありがとうございます。
まずは貴重な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">
//
</script>
</body>
</html>
上記のように書き換えたらしっかりとカーソルの周囲を回ってくれました。
いろいろとしてもらい、感謝しています。