Canvasで描く都会のビル群｜窓の明かりが灯る夜景

終電を逃した帰り道に、ビルの窓を数えるくせがあります。

こんな時間なのに、まだ明かりのついた部屋がいくつもある。

あの一つひとつに人がいて、それぞれの夜があるのだと考えると、なぜか少しだけ救われます。

その景色を、画像も動画も使わずに、HTML・CSS・JavaScriptのCanvasだけで作りました。

高架を電車が走り、空を飛行機が横切り、押せば花火も上がります。

ドラッグすると、街を左右に見渡せます。

夜の街の見方

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

夕暮れから深夜まで、好きな時間の街を探してみてください。

窓の明かりは、0.25秒ごとにどこかの部屋が点いたり消えたりしています。

じっと1か所を見ていると、誰かが帰宅した瞬間や、誰かが寝た瞬間に立ち会えます。

私はこれを眺めながら書いているうちに、また終電を逃しました。

この街のつくり

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

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

いちばん時間を使ったのは、窓の配置でした。

等間隔に並べると、ビルではなく表計算ソフトに見えます。

ビルの上のほうだけ幅を狭める段差を入れ、列ごとに窓の大きさと間隔を変えたところ、ようやく街になりました。