ドット絵,EDGE2,Domino｜TAKABO SOFT
- ️Sun Jun 24 2007
先日公開したブラウザゲーム「2D物理エンジンレースカー進化シミュレーター」ですが、
身近な人から「何が面白いのかよくわからない」と言われてしまいました。
せっかく楽しめるゲームなのに、一人で面白さを独占するのはもったいない！そこで、少しでもその魅力を伝えられればと思い解説編の記事を書きました。
遺伝的アルゴリズムの概要
遺伝的アルゴリズムについて詳しく知りたい方は、Wikipediaが参考になります。
遺伝的アルゴリズム – Wikipedia
簡単に説明すると、遺伝的アルゴリズムは「強い個体を選んで次の世代に引き継ぐ」仕組みです。
たくさんの個体（ここではレースカー）を作って競わせ、その中で特に優れたものを選びます。
そして、それらを掛け合わせることで、次の世代はより強くなっていきます。
このプロセスを繰り返すことで、どんどん進化していくのが特徴です。
2D物理エンジンレースカー進化シミュレーターへの遺伝的アルゴリズムの適用
遺伝的アルゴリズムを利用するには、遺伝情報を持つ「遺伝子」が必要であり、それを「掛け合わせる」ことができなければなりません。
しかし、複雑なアルゴリズムそのものを遺伝情報として扱うのは難しそうだったため、まずは簡易的な走行ロボットを作成し、いくつかのパラメータだけで動作するアルゴリズムを組み込みました。
以下が実際の遺伝情報（遺伝子）のコードです。
続きを読む…
遺伝的アルゴリズムを使ってレースカーが速くなっていくのを眺めるだけのゲームを作りました。
DEMO:
https://takabosoft.github.io/2d-evolution-racer/
※要PCブラウザ
三連休使ってよくある「走ってる車の進化を眺めるだけのゲーム」を作りました！https://t.co/VpUzD2pkTO
第1世代と第5世代で結構違う。
オプションでサウンドも付けてみましたが騒音でした。
ソースコードも公開してあります。 pic.twitter.com/J7R1lTKulm— たかぼー (@takabosoft) February 24, 2025
仕組み自体は結構単純ですが、ちゃんと進化の様子が見られて良かったです！
「顔で月面着陸チャレンジ」を公開いたしました！
https://takabosoft.github.io/face-moon-challenge/
iOS/Androidのブラウザで実行できます。アプリをインストールする必要はありません。
是非是非遊んでみてください～。
インカメラの映像を背景に映すこともできますので、YouTubeのショート動画やTikTokのネタに困っている方も是非利用してみてください。
https://t.co/bFaiI0mzFF
顔で操作する月面着陸ミニゲーム作りました〜 ブラウザゲームなのでiPhone15前後の方は気軽に遊んでみてください！ちなみにうちの子は4面で挫折しました。たまに操作止まっちゃうのでリロードしてください。 pic.twitter.com/ncw9ScyGsl— たかぼー (@takabosoft) February 20, 2025
※PCブラウザでもカメラがあればChromeで動作いたします。
自分がパソコンを使って音楽を作り始めたときにはMIDI音源が主流になっており、FM音源は「名前は知ってるけどどういう仕組みで鳴っているかよくわらかない」ものでした。
そこで、FM音源がどんなものか知るためにFMシンセを作ってみることにしました。
出来たもの↓
https://takabosoft.github.io/tiny-fm-1/
※広いモニターのPCでお試しください。スマホには画面サイズ的に対応していません。
TypeScriptでWeb Audio APIを使ってリアルタイムに周波数変調を行い、サウンドを生成しています。
FMの仕組みについては以下のサイトを参考にさせていただきました。
仕組み自体は非常にシンプルで、FM音源らしい音はたぶん数時間で鳴らすところまで出来たのですが、その後UIで仮想キーボードやらツマミやらエンベロープやらを作っている方が大変でした。
ソフト名に「Tiny」と付けたように、シンセとしての機能としては簡略的なものです。
各オペレーターにアンプリチュードエンベロープこそ付けましたが、ピッチエンベロープ、モジュレーションエンベロープ等、時間で音を変化させる系の機能が全然載っていません。
ただ、あまりUIを複雑にすると経験上迷子になりやすいのでまずは１画面で収まる範囲の機能で完成としました。
（※FM音源を本当に使う方はDAWにお気に入りのFMシンセがインストールされていると思いますし、WebでFM音源を体験する程度であればこのぐらいかなという所です。）
GitHubにソースもありますので、興味のある方はどうぞ。
https://github.com/takabosoft/tiny-fm-1
「レイトレーシング」をご存知でしょうか？
最近のグラボやPS5などでもリアルタイムでレイトレーシングが使えるようになり、言葉自体は良く聞くようになりましたが、いまいち何をしているのかピンと来ていないプログラマーの方もいらっしゃるのではないでしょうか。
私たちが物を「見る」ためには、光が光源から放たれ、さまざまな場所で反射し、最終的に目に届いた光の色を知覚する必要があります。
レイトレーシングはそんな目に届いた光の軌跡を逆算し、どこからやってきたのかを求めることでよりリアルな色をシミュレートするアルゴリズムです。
で、なんとこのアルゴリズムやプログラムは「週末レイトレーシング」（英語タイトル：Ray Tracing in One Weekend）として無料で公開されているのです。
https://raytracing.github.io/
めちゃくちゃ良い時代になりましたね・・・。
筆者は学生時代にレイトレーシングに一度興味を持ちましたが、なかなか参考書などを入手することができず入門すらできないでおりました。
数十年経って入門できる日が来ることになろうとは。
さて、たまたまGLSLというシェーダープログラムの入門をしていたのですが、今回はGLSLの勉強を兼ねてレイトレーサーをWeb上で動かしてみました。
DEMO ※まぁまぁ重いです。
いかがでしょうか？
屈折や反射などがとても綺麗にレンダリングされているのがわかるかと思います。
計算だけでリアルな画像が作れるって凄いですよね。
実際に作って綺麗な画像が出ると「おお！」ってなります（笑）
是非、興味を持たれた方は週末レイトレーシングにチャレンジしてみてください（年末年始に是非！）。
—-
ちなみにCPUのみでレンダリングすると、結構な時間が掛かりますが、上のDEMOのようにシェーダーを使えば並列に計算できるため、FPSを稼ぐことができます。
GLSLは反面、クラスや再帰が使えないといった制約もあるため実装が大変ではありますが…