Canvasアニメーションで風に揺れる森を作る

仕事の合間に、ちょっとだけ森へ行きたくなる日があります。

でも平日の夜に山へ行けるはずもないので、ブラウザの中に森を1つ作りました。

画像も動画も使っていません。HTML・CSS・JavaScriptのCanvasだけで、木も風も光も雪もその場で描いています。

四季・時刻・天気を切り替えられます。

ぼーっと眺めるだけでも大丈夫です。

森の楽しみ方

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

右上に、いまの季節・時刻・天気が出ます。

• 四季：春は桜色の花びら、夏は濃い緑、秋は紅葉と落ち葉、冬は葉を落とした枝と雪です
• 時刻：朝霧 → 昼 → 夕暮れ → 夜。夜になると星と月が出て、木漏れ日は消えます
• 天気：晴れ・霧・雨。雨の日は空が灰色に寄り、足元にしぶきが上がります
• 風：強くすると枝が大きくしなり、舞うものも速く流れます
• 音：風の音に加えて、昼は小鳥の声、夜は虫の音が混ざります。雨のときは雨音になります
• マウスを動かす：手前の木ほど大きくずれて、奥行きが出ます
• 全画面：作業用の背景としてどうぞ

いちばん好きなのは、夏の夜です。

時刻を右端まで動かすと、木々のあいだに蛍が点滅し始めます。

春・夏・秋の夜に出ます（秋は控えめで、冬と雨の日は出ません）。探してみてください。

この森のつくり

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

外部ライブラリは使っていません。

いちばん苦労したのは見た目より重さでした。

最初は1フレームごとに葉を約6,600回描いていて、確認用のブラウザでは1秒に1.5コマしか動きませんでした。

遠くの3列は揺れても数ピクセル以下で目に見えないため、1枚の画像にまとめて描くことにしました。

これで、季節や時刻を切り替えても60fpsを保てています。

• 森が画面の外にあるときは描画を止め、スクロール中の負荷を抑えています
• OSで「動きを減らす」設定をオンにしている人には、止まった状態で表示します
• iPhoneのSafariは要素の全画面表示に対応していないため、全画面ボタンは出ません