HTML、CSS、JavaScriptで作る惑星の公転軌道シミュレーター

投稿日：2021年2月23日

ようやくできました！

先日から制作中と言っていた、水星〜土星までの公転軌道のシミュレーターがようやくできました

▲iframeで配置してます。
元のhtml内、pxで大きさを指定しています。
画面が小さいとはみ出してしまうのでXGAサイズ以上での閲覧をお勧めします。

太陽からの距離は下表。

惑星名	実際の距離（約）	画面上（半径）
水星	57,910,000 km	57.91/4px
金星	108,200,000 km	108.2/4px
地球	149,600,000 km	149.59787/4px
火星	227,900,000 km	227.9/4px
木星	778,300,000 km	778.3/4px
土星	1429,400,000 km	1429.4/4px

1/1,000,000×0.25（1/4の大きさ）をピクセルで再現。

公転周期については下表。

惑星名	年数	周回日数	1日の角度（360/周回日数）
水星	0.240847	87.9675603975	4.092417686397849°
金星	0.615	224.6241375	1.602677272383517°
地球	1	365.2425※1	0.985646522515863°
火星	1.881	687.0211425	0.524001341050432°
木星	11.87	4335.428475	0.083036775275136°
土星	29.45	10756.391625	0.033468472750963°

※1 グレゴリオ暦での平均日数
こうしてみると、水星は約88日、金星は約225日、火星は2年弱、木星は約12年、土星は約30年で一周するのが分かります。

ページ読み込み時、2020年1月1日の地球の位置を0°としたときの、各惑星の位置は内外合、衝から算出しました。
例えば、2020年7月1日に、水星が内合でした。
2020年7月1日は2020年1月1日から計算して183日目に当たります。
しかも、2020年はうるう年なので、183日目はちょうど366日の半分、つまり360°の半分の180°の位置に当たります。
(219.91890099375(水星の2.5年の日数)-183(7月1日は183日目))*4.092417686397849(水星の1日分の角度)=151.087563389193623
つまり151.087563389193623°左方向に回転させた位置を水星のスタート位置としました。
※地球が半周するのに水星は2周以上公転します。

金星の場合
2020年6月4日が内合でした。
156(6月4日は156日目)*0.985646522515863(地球1日分の角度)=153.760857512474628(156日分の角度)
153.760857512474628/1.602677272383517(金星1日分の角度)=95.940000000000004*-1
つまり右方向に95.940000000000004°回転させた位置を金星のスタート位置としました。
※少々おおざっぱですが、2020年6月4日の内合に合わせるような式にしました。

火星の衝は、2020年10月15日でした。
0.985646522515863(地球1日分の角度)-0.524001341050432(火星1日分の角度)=0.461645181465431
289(10月15日は289日目)*0.461645181465431=133.415457443509559
左方向に133.415457443509559°回転させた位置を火星のスタート位置としました。

木星の衝は、2020年7月14日でした。
0.98564622515863(地球1日分の角度)-0.083036775275136(木星1日分の角度)=0.902609449883494
196(7月14日は196日目)*0.902609449883494=176.911452177164824
左方向に176.911452177164824°回転させた位置を木星のスタート位置としました。

土星の衝は、2020年7月21日でした。
0.985646522515863(地球1日分の角度)-0.033468472750963(土星1日分の角度)=0.9521780497649
203(7月21日は203日目)*0.9521780497649=193.2921441022747
左方向に193.2921441022747°回転させた位置を土星のスタート位置としました。

上の表の角度通り、各惑星setTimeoutで1秒づつ回転させてます。

前回と同じですが仕様を載せておきます。

・起点は2020年1月1日になっています。

・1秒で1日進行します。

・カレンダーを手動で変更すると進行が止まります。

・カレンダー右隣の数値は、1年間の進行日数（左）とトータル（年跨ぎ）の進行日数（右）です。

・自動進行したい場合は再開をクリックします。

・x1ボタンをクリックすると10倍づつ速度が速くなります。最大はx1000です。

・シフトボタンを押しながらだと下がるようになっています。

・停止をクリックすると進行が停止します。再開をクリックすると再開します。

・逆回転をクリックすると日数を遡さかのぼります。

遡っている最中に再度クリックすると昇順に進みます。

開始年月日の2020年1月1日以前になるとトータル日数はマイナス値になります。

・うるう年※の計算ロジックも組み込んであります。

※うるう年：4または、400で割り切れる年はうるう年。100で割り切れる年は平年。

・二至二分は年によって変化するので今回は実装していません。

・惑星は本来ならば楕円軌道を公転しますが、太陽を中心に正円で公転させています。

・軌道面の傾斜も考慮していません。

・各惑星間は再現してますが、惑星の大きさ比率は再現していません。

まとめ

公転の図はiframeを使ってますが、元のhtmlで距離などpxで指定しているのでレスポンシブ対応できませんでした。
惑星間を均一に再現したら、小さい領域で表示できるので折を見て対応したいと思います。

前回のカレンダーのロジックもそうですが、各惑星を連動させるのに苦労しました。
setTimeoutで自動的に回転させるのは案外スムーズにできましたが、カレンダーを手入力し、その日付の位置に惑星を配置させ、さらに再開ボタンクリックで再回転させるロジックとか、かなり苦労しました。
欲を言えば春分点を起点にしたかったです。

天文学的確率と言われている惑星直列が再現するのか調べたいと思います。
楽しんでいただけたらと思います。
天文に関する情報はAstroArtsさまのサイトがお勧めです。

お断りとして、このシミュレーターは個人で楽しむために作ったものです。
私の計算方法も正確ではありませんし、グレゴリオ暦や、公転周期も時間の経過とともにズレが生じます。
ご了承ください。

最後まで読んでくださりありがとうございました。

宇宙関連の記事