AIと一緒にアートを創ろう ChatGPT × p5.jsで始めるジェネラティブアート入門
INDEX
ChatGPTで要約する
こんにちは、グローバルプロデュース、GMOグローバルスタジオ担当の小松です!今回は「AIと一緒にアートを創る」という、ちょっと未来っぽい体験をご紹介します。
「ジェネラティブアート」って聞いたことありますか?ジェネラティブアートとは、人間が直接手を動かして描くのではなく、プログラムによって自動生成されるアートのことを指します。明確な定義があるわけではありませんが、一般的には「アルゴリズムや数学的なロジック、自律的なルール」を使って、予測不可能な表現や複雑な動きを生み出すアートとして捉えられています。人間の意図とランダム性や繰り返し処理などのロジックが交わることで、想像もしなかったビジュアルが次々に生まれる面白さがあります。
今回は「p5.js(ピーファイブ・ジェイエス)」というプログラミングを使用してビジュアル表現を手軽に作成できるツールで、ChatGPTにコードを書いてもらいながらジェネラティブアート作成に挑戦してみました。プログラミングに詳しくなくても、「こういう雰囲気のアートを作りたい」と伝えるだけで、ChatGPTがコードを生成してくれるので、思いのほかスムーズに始められます。
この記事では、実際にどのように進めたのかや作ってみて感じたこと等のポイントを交えながら「AI時代の新しいクリエイティブ体験」をお届けします。
p5.jsってどんなツール?
p5.jsは、ビジュアル表現に特化したプログラミングツールで、特にジェネラティブアートやインタラクティブな作品をつくるのに適しています。ブラウザ上ですぐに動作し、複雑な準備は不要。アカウント登録なしでもコードを書いてすぐにアートを生成できます。(プログラムを保存するにはログインが必要になります)
使い方は簡単です。
【ステップ1】エディターにアクセス
まずは、p5.jsのWeb Editerにアクセスします。
【ステップ2】コードを編集
ページが開くと、画面左側にデフォルトのプログラムが表示されています。このコードは、「400×400のキャンバスを作成する」といったものです。
ここにchatGPTに書いてもらったコードを貼り付けて、ジェネラティブアートを作成していきます。
【ステップ3】実行ボタンで再生
左上にある ▶(実行ボタン)をクリックすると、右側のキャンバスにアートが描かれます。コードを編集するたびに再生し直せば、すぐに結果を確認できます。デフォルトのコードをそのまま実行するとグレーの正方形が出てくると思います。停止は横の■をクリックすればアートの生成が止まります。

「左側にコードを書いて」、「実行ボタンで再生」を覚えていればもう作れちゃいます。では実際にchatGPTにコードを書いてもらいましょう!
chatGPTにコードを書いてもらおう
では早速、chatGPTと相談しながらジェネラティブアートを作っていきましょう。
まずは「どんなイメージのアートを作りたいか」を指示します。この時に忘れていけないのは「p5.jsを使ってコードを書いてほしい」と指示することです。「p5.jsでジェネラティブアートを作りたいです。〇〇をイメージしたアートを作るためのコードを書いてください」といった形で指示してみましょう。最近見た「チ。」という作品が印象的だったので、今回は宇宙を例に作成してみます。

すると、たくさんコードを書いてくれます。何が書いてあるかわからないと思いますが、気にせずコードをコピーしましょう。そして、p5.jsに移動します。画面左側にデフォルトのコードは削除し、先ほどのコードをペーストします。この時「ctrl + A」「command + A」の全選択を使用すると便利です。
コードを貼り付けたら、▶を押して再生してみましょう!不思議なグラフィックが生成されるはずです。ここまでが、ジェネラティブアート作成の一連の流れです。あとは、「もっとこうしたい」というあなたの想いをchatGPTに入力し、相談し、p5.jsに張り付けるを繰り返し、ジェネラティブアートを完成に近づけていきます。

実際に作ってみた
上記手順を踏んで、20分ほどchatGPTと相談しながら宇宙のジェネラティブアートを作ってみました。完成したものがこちらになります。惑星の軌道をイメージして作ってみました。ジェネラティブアートの面白いところは『動かせる』というというところ。マウスでズームしたり掴んで回したりすることもできちゃいます。プログラミングでアートを作るとインタラクションを組み込めるのも魅力の一つですね。

まとめ
今回は、ChatGPTと一緒にアートをつくるという、ちょっと新しいクリエイティブ体験をご紹介しました。やってみると「思ったより地道な作業だな」と感じた方もいるかもしれません。
実は僕自身、AIを使わずにコードを書くこともできます。ただ、今回はあえてChatGPTを活用し、プログラミングの知識がなくてもジェネラティブアートを作る方法にチャレンジしてみました。ChatGPTに相談しながら進めていくと作品をよくするための提案をしてくれたり、自分のアイデアに反応してくれたりと、一人で黙々と作るのとは違う面白さがありました。ジェネラティブアートの作成は生成AIに画像や動画を生成してもらうのとはまた一味違った魅力があると思います。
今回の記事をきっかけに、少しでもジェネラティブアートや、何かしらのクリエイティブな活動に興味を持っていただけたら嬉しいです。