一度だけ、夜明け前の山に登って雲海を見たことがあります。
寒くて眠くて、正直あと5分寝ていたかった。
それでも、白い海の向こうから光が差した瞬間のことは、10年たっても忘れていません。
あの景色を、画像も写真も使わず、HTML・CSS・JavaScriptのCanvasだけで描きました。
「ご来光」を押すと、20秒かけて日が昇ります。
時刻を動かすと、夜明けから星空まで移り変わります。
SEA OF CLOUDS雲海の展望台
ドラッグで見渡せます
絶景の眺め方
ボタンは画面の下にまとめてあります。
このページ自体も空の色になっていて、本文は雲の上に浮かんでいます。
- ご来光：夜明け前から始まり、稜線の向こうから太陽がせり上がります。光条が放射状に伸び、空が一気に明けます
- 時刻：スライダーで夜明け→朝→夕焼け→星空と移り変わります。右下に今の時刻が出ます
- 雲海：雲の量を変えられます。少なくすれば谷底まで見え、多くすれば峰だけが島のように残ります
- 鳥の群れ：13羽がV字の編隊で渡っていきます
- ドラッグ：手前の稜線ほど大きく動いて、展望台から首を振ったように見渡せます
- 風の音：高いところの風が鳴り、明るいあいだはときどき小鳥の声が混ざります
- 星空：星がまたたき、ときどき流れ星が走ります
- 全画面：PCならモニターいっぱいに雲海が広がります
ブロッケン現象と呼ばれるもので、輪の中心には自分の影が映ります。
実際の山でも、条件がそろった時にだけ見られる現象です。
この絶景のつくり
見た目重視で作ったので、しくみは簡単なメモだけにしておきます。
外部ライブラリは使っていません。
いちばん手こずったのは雲の量でした。
最初は雲を厚く敷きすぎて、山が全部隠れた「ただの白い霧」になりました。
雲を減らして稜線と稜線のあいだにだけ置き、さらに量をスライダーで選べるようにして、ようやく落ち着きました。
- 画面の外にあるときは描画を止めています
- OSで「動きを減らす」設定をオンにしている人には、止まった状態で表示します
- 手元の環境では60fpsで動いています