javascriptで太陽系を作る

ベクトルの勉強のために、

javascriptで太陽系を作ってみることにしました。

太陽系と言っても太陽〜地球までの間ですが。

座標軸は真ん中をx=0,y=0にしたかったので

adjustPointでx方向に+ 300、y方向に+300足しています。

[ここに座標画像上と左から矢印が出て300ずつ圧迫されている図]

canvasサイズが600なのでこれで真ん中が0,0になります。

教科書で習う座標と同じように、

X軸は右にプラス、左にマイナス

Y軸は上にプラス、下にマイナスにしたかったので

Y軸だけ指定された座標に-1をかけています。

(javascriptだと下に伸びれば伸びる程プラスになるので教科書とは逆なのです)

[Y軸の隣に1,2,3,4,5...が下向きに並んでるのが矢印で5,4,3,2,1...と上向きになる図]

あと、計算も簡単にして暗算しやすくしたかったので

(太陽の位置が0,0で地球が3,3とか)座標の単位も20倍にしてみました。

[座標の0,0の1ピクセルが20倍してグリッド一マス分の大きさに広がる図]

太陽を回る地球の座標は太陽から8マス離れた座標にします。

setIntervalで1フレームごとにカウントを1増やし、

一周360度(=6.28ラジアン)をperiodで割って、

1フレームごとの移動する角度を変えます。

例えばperiodが4だと1フレームの角度が90(1.57ラジアン)になって、4回で1周します。

ラジアンが出せたところで、Math.cos(引数はラジアン)を出せば

円の中心(太陽)から地球までの斜めの線を1とするx座標の数が出ます

Math.sin(ラジアン)はy座標です。

あとはそれを太陽(x:0,y:0)から地球(x:8,y:8)の半径でかければ

太陽を回る地球の軌道を表示出来るようになります。

月の軌道はそれぞれのx,yに地球の座標(x:8,y:8)を足してやれば出来ます。

太陽から光を受ける美しいグラデーションの作り方

惑星のどこに太陽光があたっているかを出します。

惑星の座標を出します。[10, 10]とかだったら惑星は右上にあるので光が当たってるのは右下です。

それから座標から太陽に向けたベクトルの長さを出します。

惑星が右上にある時は太陽光の当たる位置は左下と、惑星がベクトルと逆なので

[0,0] -[惑星のx, 惑星のy]と計算します。

三平方の定理から、ベクトルの長さは以下になります。

Math.sqrt(   (x * x) + (y + y)   )

x座標/ベクトルの長さ

y座標/ベクトルの長さ

でベクトルの長さが1のx,y座標が出せます。

xとyに惑星の大きさの半径をかければ、

惑星の円周の左下あたりにある座標を中心とした円が出来ます。

あとは惑星と同じ大きさ、同じ座標の円と重ねれば

半円同士重なってるグラデーションが出来るはずなのですが、

createRadialGradientは片方の円にもう片方の円の中心座標が重なっていないと

グラデーションを作ってくれないらしく、

円周上ではなく、少し座標をもう片方の円に寄せてやる必要があります。

そこで中心座標のx,yを0.5とかにかけてやると、

惑星半径の4かけたせいで円周上にあった中心座標が

半分右上に上がってもう一つの円の中に中心座標が入るようになります。

これでグラデーションは完成です。

今回の難所はcos,sinでした。

中の処理がどうなってるのかわからなくて、

自分が求めなきゃいけないのか角度なのか何なのかで脳内カオスになってましたが

「角度を渡せば座標が出る」 とわかってからはすっきりしました。