Processingでループアニメーションを作成しよう！ChatGPTにコードを書いて貰う方法

Processing（プロセッシング）は、Javaベースのプログラミング言語です。オープンソースで、コミュニティーによって数多くのライブラリーやサンプルコードが提供されています。

Processingの構文は非常に簡潔でわかりやすく、プログラミング初心者でも簡単にデジタルアートを作成することができます。

公式サイトでは、Processing IDE（開発環境）をダウンロードして、ローカル環境でプログラミングを開始できます。また、一から学習できるよう、Processingの基本的な概念や関数、ライブラリ、作品ギャラリーなど、広範囲にわたる資料が提供されています。

Processingをインストールする

1. Processing公式サイト：https://processing.org/ にアクセスし、「Download」ボタンをクリックします。
2. 自分の環境に合わせたインストーラーをダウンロードします。
3. インストーラーの指示に従ってインストールを進め、完了したらProcessingを起動します。

これだけでProcessingでプログラミングを開始することができます！

（ちなみにこのブログで何回か取り上げている p5.jsは、JavaScriptベースでブラウザ上で実行されるものになります）

ウェブサイトの背景画像にp5.jsを使う方法

p5.jsでスライダー付きパターンを作る方法

Processingで描画を行うには、setup()関数とdraw()関数を使用します。

• setup()関数は、プログラム開始時に一度だけ呼び出される関数で、描画領域を作成するために使用します。
• draw()関数は、プログラム開始後、毎フレーム呼び出される関数で、描画を行うために使用します。

下記のコードは、400×400ピクセルのキャンバスを作成し背景色を白にして、緑色の四角形を描画しています。たったこれだけのコードで画像を描画することが出来ます。

void setup() {
  size(400, 400); // キャンバスのサイズを指定する
}
void draw() {
  background(255); // 背景色を白に指定する
  fill(0, 255, 0); // 塗りつぶし色を緑に指定する
  stroke(0, 0, 255); // 枠線色を青に指定する
  strokeWeight(2); // 枠線の太さを指定する
  rect(150, 150, 100, 100); // 四角形を描画する
}

今回はこのprocessingのコードをchatGPTさんに書いてもらうので、今のところはprocessingってこんなものだ、くらいの理解で大丈夫です！

chatGPTにprocessingのコードを書いて貰う方法

さてprocessingの概要がわかったところで、さっそくchatGPTにprocessingのコードを書いて貰おうと思います。

具体的なプロンプトを与える

今回はループするGIFアニメーションを作りたいので、chatGPTに渡すプロンプトを考えます。なるべく具体的に指示を出すことがコツになります。

• 以下の条件でprocessingのコードを書いて下さい
• キャンバスサイズは400*400
• 背景色は黒、描画色は赤
• 1秒間に表示するフレーム数は30枚で3秒間のアニメーションを作成
• sin()関数を使い、リサジュー曲線を、フレームの最初と最後がきれいにつながるループアニメーションになるように描く
• 描画が終わったらループを抜ける
• 全ての画像を、スケッチフォルダ内にframesというフォルダを作って保存する

これが条件です。まずはこのままchatGPTさんに投げてみます。

するとこのようなコードを瞬時に返してくれました。

float t = 0;

void setup() {
  size(400, 400);
  background(0);
  stroke(255, 0, 0);
}

void draw() {
  background(0);
  noFill();
  beginShape();
  for (float i = 0; i < TWO_PI; i += 0.01) {
    float x = sin(i * 4 + t) * 100 + width/2;
    float y = sin(i * 6 + t) * 100 + height/2;
    vertex(x, y);
  }
  endShape(CLOSE);
  
  t += TWO_PI / 90;
  
  if (frameCount <= 90) {
    saveFrame("frames/####.png");
  } else {
    exit();
  }
}

出来上がった画像をezgif.comさんでGIF画像に変換してみると、この様にリクエスト通りのループアニメーションを作ってくれました！

スケッチフォルダを開いてみると、スケッチフォルダ内にframesというフォルダが作成されており、ちゃんと画像が90枚保存されています。こちらも大成功です！

サンプルコードを渡してその特徴を聞いてみる

具体的に指示を出すのがコツ、とは言ってもそもそも何と指示を出したらいいのか？がわからないですよね。そんな悩みもchatGPTに解決してもらいましょう。

公式サイトのExamples (https://processing.org/examples) などから作りたいイメージのサンプルコードを渡して、「このコードの特徴を箇条書きで上げて下さい」と聞いてみます。

すると下記の様にコードの特徴を上げてくれます。

この様に、作りたいモノのイメージはあるけれど上手く言語化出来ない時は、chatGPTに特徴を聞いてみて、それを参考にしてプロンプトに入れてみるのもいいですね。

続けて「以下の条件を加えて新しいコードを書いて下さい」と頼んでみました。

• キャンバスサイズは600*400px
• 背景色は水色
• 1秒間に表示するフレーム数は30枚で3秒間のアニメーションを作成
• sin()関数を使って、フレームの最初と最後がきれいにつながるループアニメーションを作成
• 描画が終わったらループを抜ける
• 全ての画像を、スケッチフォルダ内にframesというフォルダを作って保存する。

自分では一行もコードを書いていないのに、このような複雑な動きをするGIFアニメを作ることが出来ました！