「宇宙ぼんやり」ができるウェブ時計、『夜の軌道』を紹介します。
(orbit.ggoban.com)こんにちは！
今朝からAIと一緒に「バイブコーディング」で作ったサイドプロジェクト、美しい宇宙背景の時計『夜の軌道（Orbit of Night）』を紹介します。
作っていたウェブ機能の1ページだったのですが、そのまま1ページのままにしておくのはなんだか少しもったいない気がして作り始めました。眺めながらしばらく「ぼーっ」としたくなる体験を目標に作りました。
主な特徴
- 生きている背景壁紙: 星、星雲、流星が絶えず動き続ける背景
- リアルタイムISS追跡: 実際のISS位置データをもとに補正され、画面内で安定して動く正弦曲線の軌道
- インタラクティブ要素: 惑星をクリックして仮想的にスキャンしたり、UFO、ブラックホール効果などのちょっとした遊びを追加
- ユーザー設定: 好みに合わせて惑星、UFO、ISSなどの要素をオン／オフでき、3種類のテーマを提供
別途フレームワークなしで純粋なJavaScriptとCSSアニメーションで実装しており（AIが実装しましたが、レビューしながら「細かい」とAIに言われました？）、特にISS軌道は安定したシミュレーションとリアルタイムデータ補正を組み合わせるハイブリッド方式で作ってみました。
TMI: 40代のおじさんがAIと出会って開発した話
実は私は、いつの間にか40代になった息子と娘の父親です。
簡単に自己紹介すると、ある程度年季も入っているので、昔のテキストやMUDベースのゲームから触れてきた世代で、ウェブゲームにも強い愛着を持つゲーマーでもあります。
コンピュータ工学を学び、仕事もIT系ではありましたが、どちらかというとサーバーエンジニア寄りでした。そのため、ミドルウェア、バックエンド、フロントエンドもある程度は触れる、ごく普通の会社員です。
ただ、以前からゲームを作りたいという夢がずっとあり、進化したAIの性能を体験して「もう今がその時だ！」と思い、昨年10月から余暇の時間ごとに、いわゆる今どきのバイブコーディングを主にやっています。
現在は3つ目のウェブゲームのトイプロジェクトを進めているのですが、その途中で1つの機能ページを作る中、即興のひらめきで気合いを入れた画面がありました。ふと思うと、それだけに使うのは少しもったいないと感じたんです。そこでこのプロジェクトが生まれました。
一度訪れて、「宇宙ぼんやり」をしてみませんか？
フィードバックはいつでも歓迎です！
21件のコメント
すてきなプロジェクトです
ご関心をお寄せいただき、ありがとうございます！
素敵ですね！
ご関心をお寄せいただき、ありがとうございます！
ブラウザの壁紙としてすごく良さそうですね！ iPhoneの壁紙に宇宙を入れておいた感じと似ています。
温かいご関心ありがとうございます！ 私は家にある使っていない少し古めのタブレットに表示して、簡単なフレームを付けて時計用として使ってみようと思っています（笑）！
いいですね〜
これを参考にして惑星もアップグレードすると、さらに良くなりそうです
https://codepen.io/jamesfinn180/pen/VwzENbR
わあ！ 世の中には本当にすごい方がたくさんいらっしゃるんですね。ご関心ありがとうございます。地球から眺める感覚なので地球そのものがそのまま表示されるわけではありませんが、応用してアップグレードに挑戦していきます！
本当に癒やされて幸せでした。
素敵な作品を作ってくださってありがとうございます。 :)
温かいお返事ありがとうございますT_T さらに元気が出ます。
ご意見を反映して修正しました！ 1. 惑星は生成時に固定された情報を持ちます。 2. 流星雨オプションは個人の好みに合わせて設定から変更できます。（発生頻度、速度、数） 3. 星雲と、わかりにくいですが天の川、そして星明かりが調整されました。 4. ブラックホールのオプションをオフにすると、もう動作しません。 5. スxウォxのワープに似た効果をオマージュとして追加しました。 6. 惑星の上に時々変わった仲間たちが現れます。 皆さまのたくさんのご関心に感謝します！
些細なことですが、ブラックホール効果をオフにしてもそのままブラックホール効果が動作します。^^ 素敵なプロジェクトですね〜！
はい、ありがとうございます^^ ご指摘いただいたバグやほかの方々のご意見を反映して改善したバージョンを、近日中に適用する予定です。ご関心をお寄せいただきありがとうございます！
以前、あるポモドーロサイトで見たデザインと似ていますね。いろいろな惑星が表示されるようにしたらどうでしょうか？
あっ、やはり「この世の空の下に新しいものはない」とはよく言ったものですね…！ 惑星は1つだけ表示して、その上にユニークな要素が出現する形で面白さを加えようかと思っているのですが、複数の惑星が出る案も試してみます。ありがとうございます。
私もぼーっと眺める用だと聞いて、実際の宇宙の長時間露光写真みたいなものを期待していたのですが……期待していたものとはかなり違っていた気がします
貴重なご意見ありがとうございます。該当部分についてもAIと一緒に検討してみます！ haha ただ、表現はすべてcssやsvgを通してできるだけ表現しようというコンセプトで進めているので、関連する写真を見ながらインスピレーションを得てみます！
もう少し静かでリアルな感じの宇宙が出てくるといいですね〜
カラーテーマだけでなく、さまざまな宇宙を選べるように拡張していきます。貴重なご意見ありがとうございます！
意義のあるプロジェクトをご紹介いただき、ありがとうございます。時間が経っても夢を失わず挑戦し続ける姿が素敵で、尊敬します。お子さんたちも気に入りそうですね！ いくつかフィードバックをお伝えすると、1) 流星群が速すぎて、しかもたくさん降ってくるので、ぼーっと眺めるには少し賑やかすぎるかもしれません。もう少し淡く、数を減らして、ゆっくり流れるようにすると、穏やかでエモーショナルな雰囲気を演出できそうです。2) 惑星スキャンでは、同じ惑星については同じ情報だけが表示されるようにしてはどうでしょうか。3) 設定のブラックホールエフェクトはクリック効果のことを指していますか？ Off にしてもその効果が無効になりません。4) 設定の Random Color が、どの色を変えるものなのかよく分かりません。
フィードバックありがとうございます。流星群については、スライダーで頻度を調整できるオプションを検討中です。惑星も、クリックするたびに別の情報が出る部分は修正予定ですT_T ううっ。Random Color は、表示される惑星の色が毎回ランダムに出るようにするオプションです。惑星自体がゆっくり動いているので、確認したい場合はその上の Planet オプションをオフにしてから再びオンにしてみると、別の色の惑星が出てくるのを確認できると思います（笑）。ブラックホールは、もともと周囲の星や宇宙船がクリックしたときに吸い込まれていくエフェクトを付けたかったのですが、それはブラウザと javascript だけで処理するにはなかなか大変な部分だったので、別のパーティクルだけが吸い込まれていく感じまでを実装しました（泣）。off で消せない点についても、やはり修正予定です。大切なご意見ありがとうございます！