画像生成AIとp5.jsを組み合わせたアプリを作ってみた
Processing Advent Calendar 2022の7日目の記事です
画像生成AIとp5.jsを組み合わせたアプリを作ってみた
今話題の画像生成AI（Stable Diffusion）とp5.jsを組み合わせてチームラボ的なアプリを作ってみました。アプリの詳細は以下記事参照ください。
簡単に構成を紹介すると以下のようになります。
Stable DiffusionのImage-to-Image（画像から画像への変換）機能を使って、Webカメラで撮影した人物画像を動物に変換します。その後、動物画像をp5.jsを使ってアニメーションします。
自分が描いたキャラクタが画面の中で動くといった、チームラボ的な演出を10倍しょぼくしたものをイメージしてもらうと分かりやすいかと思います。
p5.jsでアニメーションしている様子は以下になります。
ブラウザで以下リンクにアクセスすると、実際のアニメーションがみられます。Google Chrome推奨です。
本記事では、p5.jsを使ったアニメーションの部分の工夫に関して紹介したいと思います。
Web上で公開
GitHub Pagesを使うことでWebで公開することができます。以下記事参照ください。
注意点として、ローカルでGoogle Chromeでデバッグしようとしたとき、ローカルの画像を読み込むところでCORSエラーにひっかかりました。これはGoogle Chromeのセキュリティ対策によって出るエラーとなります。
色々調べましたが、以下の記事にあるWeb Server for ChromeというGoogle Chrome拡張機能を入れるのが一番簡単でした。
画像ファイルが増えたらページを更新するたびに読み込む画像を増やしたい
やりたいデモとしては、Stable Diffusionでどうぶつに変換した画像をディレクトリに増やすと、どんどんp5.jsで描画する画面にどうぶつが増えるというものでした。
その際、画像がディレクトリに増えたら、動的に画像を増やしていくというところで工夫が必要でした。わりと特殊なケースなので、ネットにもあまり良い情報がなく、仕方なく考えた方法が、画像ファイルのリスト（csvファイル）を作って、最初にp5.jsでリストを読み込んだあとに、動的に画像を読み込むという方法です。
全体のコードは以下になります。
リストは、preload()で読み込んでいます。
function preload() {
table = loadTable('./images/info.csv', 'csv');
}
読み込む部分は以下です。4枚読み込んでいるのは、一体の動物ごとに4枚の少しずつ異なる画像を読み込ませてアニメーションしているためです。
for (let i = 0; i < table.getRowCount() ; i++) {
images[i] = [];
for (let j = 0; j < 4 ; j++) {
animal_names[i] = table.get(i,0)
const imageName = './images/' + animal_names[i] + '_' + nf(j, 1) + '.png';
images[i][j] = loadImage(imageName);
}
position_x[i] = random(width);
position_y[i] = random(height);
}
リストファイル（csv）の生成自体は、Pythonで生成しています。コードは以下となります。
特定のディレクトリ以下の画像ファイルのリストを生成しています。本記事の主題ではないので、解説は省略します。
Stable Diffusionで人を動物に変換すると同時に、上記コードを実行して、リストファイルを更新する想定です。
これで、画像が増えてリストが更新されたら、ブラウザでページを更新するたびにどうぶつが増えていきます。少し工夫すれば、ブラウザ更新しなくても例えば一定期間ごとにアニメーションする動物を増やすこともできると思いますが、今回は特に動作的に問題なかったので、簡単化のためにページを更新することにしました。
もっとスマートに実現する方法、他にありそうな気がしますが（特にp5.jsだけで完結する方法）。自分には思いつきませんでした。良い方法知っている方はぜひ教えてください。
アニメーション
ランダムに動かしているだけです。どうぶつ同士のインタラクション、餌をあげるとかも実装したかったのですが、今回は時間切れでした。
まとめ（デモのレポート）
12/3,4に行われたOgaki Mini Maker Faire 2022（OMMF2022）というイベントで本アプリを出展してきました。50人の人にどうぶつに変身してもらいました。
特に子供に人気で、どうぶつだけでなく、ポケモンやあつ森のキャラクタに変身して何度も楽しんでいました。
画像生成AI(Stable Diffusion)とp5.jsの組み合わせの可能性を感じることができました。
Discussion