このサンプル(画像をY軸回転させる)コードの説明をお願いします。
javascriptに興味がありネットでサンプルを見ながら使い方を
勉強しているものです。
ネットで以下のサンプルをみつけコードを解釈しようとしたのですが
よくわかりません。はじめから多少コメントがついてるのですが
数字の(1)~(8)の部分がわかりませんでした。
これはjavascriptというより数学的な意味を把握できないため
分からないと思うんですが解説をして頂けたらと思い質問させて頂きます。
<HEAD><TITLE>画像をY軸回転させる</TITLE>
<SCRIPT language=JavaScript><!--
iList = ["img0","img1","img2","img3","img4","img5"];
cx = 150; // 回転の中心X座標
cy = 100; // 回転の中心Y座標
cnt = 0;
rx = 140; // 回転半径(横)
ry = 70; // 回転半径(縦)
function rotZIMG()
{
for (i=0; i<iList.length; i++)
{
n = (i * (360 / iList.length) + cnt++) * Math.PI / 180; //(1)?
y = cy - Math.cos(n) * ry;//(2)?
z = 100 - Math.cos(n) * 50; // (3)?
document.images[iList[i]].style.pixelLeft = cx + Math.sin(n) * rx;//(4)?
document.images[iList[i]].style.pixelTop = y;//(5)?
document.images[iList[i]].style.zIndex = z;//(6)?
document.images[iList[i]].style.width = z / 1.5;//(7)?
document.images[iList[i]].style.height = z / 2;//(8)?
}
}
// --></SCRIPT>
</HEAD>
<BODY onload="setInterval('rotZIMG()',100)">
<IMG style="POSITION: absolute" src="0.gif" name=img0>
<IMG style="POSITION: absolute" src="1.gif" name=img1>
<IMG style="POSITION: absolute" src="2.gif" name=img2>
<IMG style="POSITION: absolute" src="3.gif" name=img3>
<IMG style="POSITION: absolute" src="4.gif" name=img4>
<IMG style="POSITION: absolute" src="5.gif" name=img5>
あと、こういった図形を描画するプログラムは大変面白いと思うのですが
文系人間のためsin cos などがでてくると分かりません。
もう一度基礎ぐらいは勉強してみたい気持ちがあるので
どういった分野(例えば高校数学の三角関数とか)の勉強をすればいいのかなども教えていただければうれしいです。
宜しくお願いします。