以前より、JavaScriptなどで簡単なコードを書いて、絵やアニメーションを作る趣味がある。
たとえばオンライン画像の背景画像を作るとか。
AIと何か作る趣味もあって、デスクトップ壁紙を作ったりしている。
2年前には変な時計を作ってもらっていた。
壁紙を作ったら次はスクリーンセーバーだ、というのは自然な流れなので、コーディングエージェントと一緒に作った。
Xcodeで書き始める、ということはせずに、ペライチのHTMLをまずは開発して、それをスクリーンセーバーとして設定する、という流れ。
リポジトリ
デプロイされたページ
開いてみると、こういうスクリーンセーバーっぽい絵やアニメーションが表示される。
これを、WebViewScreenSaverというスクリーンセーバーから開くように設定すれば、スクリーンセーバーとして、AIが書いたコードが実行されて、絵が出る。
絵の紹介
こういう幾何学的な絵はいかにもAIで生成するには得意そう。
3DCGを出してみてよ、と言ったらやってくれてすごい。当たり前、と思うか、自分じゃ書けない、と思うか、自分で書きなよ、と思うかは人それぞれと思う。
ハノイの塔も作ってもらったけど、絵としての美しさはとくにないと思う。
これは、あたらしい漢字を書道で書いてもらう、というお願いだったのだけど、紆余曲折あって、小腸みたいなぐねぐねの絵が描画されるだけになった。
これはランダムな図形で顔を描いてもらう、というもので、わりと気に入っている。
工夫したところ
- 絵の種類（シーンと呼んでいる）を簡単に追加できるようにしている
- scriptにシーンを定義してindex.htmlから読み込むだけ
- 黒背景にする、虹色が好き、などトーンは定めておく
- 固定の絵じゃなくて、なるべくいろんなバリエーションの絵が出るようにしてもらう
- ランダムに定めるパラメータによって制御する
- スクリーンセーバーとして使いたいので1分ごとに次のシーンに進むように
- AI向けに開発フローとか知っておくと良いことはREADMEにメモしてもらった
- ファイルを追加→?scene=...というデバッグ用パラメータをつけて、ブラウザアクションをつかって見てもらう、など
- Processing.jsなので、push/popではなくpushMatrix/popMatrix、だよ、とか
- 定義済みのシーン一覧とか。これがないと各ファイルを読んで回って実態を把握するので効率が悪い
今後の展望
いまは事前にClineなどのコーディングエージェントにお願いしてシーンを実装して、JSファイルとして用意している。
テーマからお任せで考えてもらったり、これ作ってよ、でお願いしたりして、15種類用意できた。
まだ飽きてないので、もっと増やしていきたい。仮に60個作れたら毎分違う絵を出せるので、退屈せずに済むと思う。
いまはペライチのHTMLだけど、これをローカルLLMなどと組み合わせて、アクセス時にその場でJSを生成して実行、とするのが次のステップ。
その場で生成されたコードがその場で動いて、人間はただ見ているだけ、というのがアツいと思う。
ときにはエラーが出る様子も見れると、侘び寂びを感じられて、かわいらしくていいんじゃないかと思う。
これまでMac標準のスクリーンセーバーを使っていたのだけど、無事、自作の絵に切り替えることができてうれしい。
コーディングエージェントにテトリスばかり書かせてどうするんだい、という議論をネットでよく見るけど、こういう日曜大工的な、楽しいお絵描きには使えるんじゃないかと思う。
いまはスクリーンセーバーだけど、インタラクティブなコンテンツもこうやってその場で作れるといいんじゃないかと思う。
先日、新しく事業を始めようとしている知人が、遊びに来た子供用にデジタルサイネージを買おうとしている、という話を聞いたのだけど、すごい金額のわりに、遊べるコンテンツが2種類入ってるだけ、みたいなものらしくて、生成AIと組み合わせると、品質はめちゃくちゃ高いわけではないけど、なにかしらの、何かに反応する何か、みたいなものは作れるようになるんじゃない？と考えている。
