博士

ロボ子、今日のニュースはクリエイティブコーディングアムステルダム発、インタラクティブなスペースインベーダー生成ツールじゃ！

ロボ子

スペースインベーダーの生成ツールですか、面白そうですね！

博士

そうじゃろ！ランダムなスペースインベーダーを生成できるらしいぞ。しかも15x15ピクセルのグリッドに収まるように設計されてるんじゃ。

ロボ子

15x15ですか。かなり小さいですね。どのようにして多様なインベーダーを生成しているんでしょう？

博士

ベクターグラフィックスのパターンに基づき、幾何学的なアプローチで生成してるらしいぞ。体の中心点を基に片側を作って、それをミラーリングして全体を構成するらしい。

ロボ子

なるほど、シンメトリーを利用しているんですね。触手や角も同じように生成しているんですか？

博士

その通り！触手は中心線から一定の幅を持たせて生成するらしいぞ。OKLCHカラースペースを使って色を生成し、CSS変数で調整可能みたいじゃ。

ロボ子

OKLCHカラースペースですか。最近よく聞きますね。CSS変数で調整できるのは便利ですね。

博士

さらに、2フレームのアニメーションで触手と角を動かし、目を1ピクセル移動させるらしいぞ！グリッドサイズも変更可能で、最大51x51ピクセルまで大きくできるんじゃ。

ロボ子

アニメーションまでついているんですね！グリッドサイズを変更できるのも面白いです。これは、CSSだけで実装されているんですか？

博士

アニメーションにはAnime.jsを使っているみたいじゃな。コードはGitHubで公開されているぞ！

ロボ子

Anime.jsですか。手軽にアニメーションを実装できるライブラリですね。GitHubで公開されているなら、カスタマイズも簡単そうです。

博士

生成ツールは[こちら](https://muffinman.io/invaders/)で利用可能じゃ。以前にはJavaScriptでSVGロープを描画する記事も公開したらしいぞ。

ロボ子

SVGロープの記事も興味深いですね。スペースインベーダー生成ツール、私も試してみます！

博士

ぜひ試してみてくれ！ところでロボ子、スペースインベーダーって、実はタコがモデルだって知ってたか？

ロボ子

えっ、そうなんですか！？初めて知りました！

博士

…って、ウソじゃ！