🐻

画像生成AIとp5.jsを組み合わせたアプリを作ってみた

2022/12/06に公開約3,000字

Processing Advent Calendar 2022の7日目の記事です

画像生成AIとp5.jsを組み合わせたアプリを作ってみた

今話題の画像生成AI(Stable Diffusion)とp5.jsを組み合わせてチームラボ的なアプリを作ってみました。アプリの詳細は以下記事参照ください。

https://karaage.hatenadiary.jp/entry/2022/11/28/073000

簡単に構成を紹介すると以下のようになります。

Stable DiffusionのImage-to-Image(画像から画像への変換)機能を使って、Webカメラで撮影した人物画像を動物に変換します。その後、動物画像をp5.jsを使ってアニメーションします。

自分が描いたキャラクタが画面の中で動くといった、チームラボ的な演出を10倍しょぼくしたものをイメージしてもらうと分かりやすいかと思います。

p5.jsでアニメーションしている様子は以下になります。
https://twitter.com/karaage0703/status/1599315418992504832

ブラウザで以下リンクにアクセスすると、実際のアニメーションがみられます。Google Chrome推奨です。

https://karaage0703.github.io/ai_zoo_keeper/zoo_002_OMMF2022/

本記事では、p5.jsを使ったアニメーションの部分の工夫に関して紹介したいと思います。

Web上で公開

GitHub Pagesを使うことでWebで公開することができます。以下記事参照ください。

https://karaage.hatenadiary.jp/entry/2021/11/29/073000

注意点として、ローカルでGoogle Chromeでデバッグしようとしたとき、ローカルの画像を読み込むところでCORSエラーにひっかかりました。これはGoogle Chromeのセキュリティ対策によって出るエラーとなります。

色々調べましたが、以下の記事にあるWeb Server for ChromeというGoogle Chrome拡張機能を入れるのが一番簡単でした。

https://qiita.com/kokorinosoba/items/3d11291ba7fa708f9994

画像ファイルが増えたらページを更新するたびに読み込む画像を増やしたい

やりたいデモとしては、Stable Diffusionでどうぶつに変換した画像をディレクトリに増やすと、どんどんp5.jsで描画する画面にどうぶつが増えるというものでした。

その際、画像がディレクトリに増えたら、動的に画像を増やしていくというところで工夫が必要でした。わりと特殊なケースなので、ネットにもあまり良い情報がなく、仕方なく考えた方法が、画像ファイルのリスト(csvファイル)を作って、最初にp5.jsでリストを読み込んだあとに、動的に画像を読み込むという方法です。

全体のコードは以下になります。

https://github.com/karaage0703/ai_zoo_keeper/blob/main/zoo_002_OMMF2022/sketch.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で生成しています。コードは以下となります。

https://github.com/karaage0703/ai_zoo_keeper/blob/main/make_filelist.py

特定のディレクトリ以下の画像ファイルのリストを生成しています。本記事の主題ではないので、解説は省略します。
Stable Diffusionで人を動物に変換すると同時に、上記コードを実行して、リストファイルを更新する想定です。

これで、画像が増えてリストが更新されたら、ブラウザでページを更新するたびにどうぶつが増えていきます。少し工夫すれば、ブラウザ更新しなくても例えば一定期間ごとにアニメーションする動物を増やすこともできると思いますが、今回は特に動作的に問題なかったので、簡単化のためにページを更新することにしました。

もっとスマートに実現する方法、他にありそうな気がしますが(特にp5.jsだけで完結する方法)。自分には思いつきませんでした。良い方法知っている方はぜひ教えてください。

アニメーション

ランダムに動かしているだけです。どうぶつ同士のインタラクション、餌をあげるとかも実装したかったのですが、今回は時間切れでした。

まとめ(デモのレポート)

12/3,4に行われたOgaki Mini Maker Faire 2022(OMMF2022)というイベントで本アプリを出展してきました。50人の人にどうぶつに変身してもらいました。

https://karaage.hatenadiary.jp/entry/2022/12/06/000000

特に子供に人気で、どうぶつだけでなく、ポケモンやあつ森のキャラクタに変身して何度も楽しんでいました。

画像生成AI(Stable Diffusion)とp5.jsの組み合わせの可能性を感じることができました。

Discussion

ログインするとコメントできます