Canvasアニメーションで自転する地球と月を描く

夜中にふと、宇宙から地球を眺めたくなる時があります。

残念ながら私の給料では宇宙に行けないので、ブラウザの中に地球と月を浮かべてみました。

画像や動画は使っていません。大陸・雲・夜の街の明かり・オーロラ・月のクレーターまで、HTML・CSS・JavaScriptのCanvasでその場で描いています。

地球はゆっくり自転し、そのまわりを月が回り、低い軌道を人工衛星が横切ります。

ドラッグで地球を好きな向きに回せます。

地球と月の楽しみ方

ボタンは画面の下にまとめてあります。

眺めるだけでも十分ですが、いじってみると見える景色が変わります。

夏至では太陽が沈まず、冬至では一日中夜のままになります。

地軸が23.4度傾いているという一行の知識が、目で見える形になります。

この地球と月のつくり

見た目重視で作ったので、しくみは簡単なメモだけにしておきます。

大陸の形だけ地図データとライブラリの力を借りています。

大きさと動きは、実物どおりの部分と、見やすさのために変えた部分があります。

実物の距離のまま描くと、月は画面の外のはるか遠くで、点のように小さくなってしまいます。

「宇宙は思ったよりスカスカ」という事実を、作りながら改めて思い知りました。