yoppa.org

前橋工科大学 – 工学デザイン実習 II 2024

最終課題「生成AIによる生成芸術」制作のヒント

本日の実習では、この実習の情報メディアデザイン分野の最終課題「生成AIによる生成芸術」の課題内容について再確認した上で、どのように課題制作を進めていけばよいのか、制作のヒントを解説していきます。

スライド資料

工学デザイン実習II (情報メディアデザイン) 最終課題

課題:「生成AIによる生成芸術」

工学デザイン実習IIの情報メディアデザインは、生成AIを活用して生成芸術 (Generative Art) を制作します。生成芸術の概念やその歴史を踏まえた上で、生成AIの力を最大限に活用してp5.jsを用いて作品を制作してください。

  • 生成AIを使用して、生成芸術作品を制作する
  • p5.jsを用いて制作し、OpenProcessingにアップロードする
  • 提出の際に以下のタグをつけること
edpws2-24

以下のフォームからOpenProcessingに投稿した作品のURLを提出してください。

最終課題制作のヒント

ステップ・バイ・ステップで課題制作の手順を解説します。

  1. 事前準備: 各種アカウント作成
  2. 参考にする作品を探す
  3. 参考作品のコードを生成AIで解析
  4. 自分のアイデアを盛り込んでコードを作成
  5. 作品を完成させ、OpenProcessingにアップロード
  6. オンラインフォームから提出

1. 事前準備: 各種アカウント作成

制作に必要なアカウントを事前に登録しておきましょう

  1. OpenProcessing
  2. p5.js web editor
  3. Github
  4. ChatGPT

2. 参考にする作品を探す

今回の課題制作にあたり、全くゼロの状態から作成し始めてももちろん構いません。しかし、参考にする作品を探して、その作品のコードを生成AIで解析しそこからアレンジしていくことで、より高度で様々なアイデアを取り入れることが可能となります。

参考サイト1: OpenProcessing

  • OpenProcessingのDiscoverメニューから探していく
  • 特に Generative Art は今回の課題にぴったり

参考サイト2: Recode Project

参考サイト3: Generative Design

  • Generative Design の書籍のサンプルコードが全て掲載
  • シンプルなアイデアから高度なアルゴリズムまで幅広いジャンルのコードが掲載

3. 参考作品のコードを生成AIで解析

まずは使用する生成AIのサービスを選択。必要にあわせてアカウント作成してログインしておく。

  1. Github Copilot
  2. ChatGPT
  3. Gemini

次に、スタートポイントとなるコードを作成してp5.js Editorにコピー＆ペーストする。やり方は以下の2通り。

  1. 参考サイトで気に入った作品のコードをコピー＆ペースト
  2. 生成AIにプロンプトを与えてコードを生成

今回は、michelleinspaceさんの作品 noisy circles を参考にしてみましょう。生成AIサービスは Github Copilot を使用します。

まずはコードを解析してみましょう。例えば以下のようなプロンプトを与えてみます。

※ ポイント:「p5.jsのコード」というキーワードを入れると精度が上がる

以下のp5.jsのコードに日本語のコメントを入れてください。 

---

let palette = ['#f398c3', '#cf3895', '#a0d28d', '#06b4b0', '#fed000', '#FF8552'] let gradients = []
let noiseZs = []
let m 
...
(以下コード全体をコピペ)

以下の感じでコード内にていねいにコメント(注釈)を入れてくれるはず! コメントの内容を読んでコード内容を(ざっくりとでも良いので)解読してみる。 

// 以下に日本語のコメントを追加しました。

let palette = ['#b38b91', '#a95c7a', '#8aa679', '#5a8b89', '#c3a600', '#d46b52']; // 渋い色合いのカラーパレット
let gradients = []; // グラデーションを格納する配列
let noiseZs = []; // ノイズのZ軸値を格納する配列

...

生成されたコードを p5.js Editor にコピー＆ペーストして実行してみましょう!

4. 自分のアイデアを盛り込んでコードを作成

先程コメントを生成したプロンプトを引き継いで、いろいろな変更のアイデアをプロンプトに追加してみましょう。

例:

カラーパレットを変更して、彩度を落したより渋い色合いにしてください。

輪郭線ノイズがアニメーションするようにしてください。

グリッドの分割を細かくして、より多くの物体を並べてください。

画面の中心に近い物体を多きく、遠い物体を小さく描いてください。

元のプログラムから徐々に変更を加えて、オリジナルな作品になった!

5. 作品を完成させ、OpenProcessingにアップロード

完成した作品を OpenProcessing にアップロードしましょう。

  1. OpenProcessingにサインイン
  2. 画面右上の「Create Sketch」ボタンをクリック
  3. コードエディターに生成したコードをコピー＆ペースト
  4. 再生ボタンをクリックして動作確認

最後にSaveボタンをクリックして保存。
※ 保存する際に edpws2-24 のタグをつけることを忘れずに!

完成!
https://openprocessing.org/sketch/2499969

6. オンラインフォームから提出

OpenProcessingに作品を提出したら、以下のオンラインフォームに回答してください。

https://x.gd/znVRR