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

皆さまごきげんよう。

本日は今大注目のchatGPTさんに、プログラミング初心者でも簡単にデジタルアートを作成できるprocessingで、ループするアニメーション動画を作るのをお手伝いして頂きます!

chatGPTについてはこちら ブログ記事作成を徹底的に時短!ChatGPTの活用法

目次

processingとは?processingの使い方

Processingとは

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の基本的な描画方法

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アニメを作ることが出来ました!

framesフォルダ内に書き出された画像は、ezgif.comなどのGIFアニメ作成ツールを使って簡単にGIF動画を作ることが出来ます。ぜひお試しください(^^)

違う種類の図形を組み合わせてみる

最初に作ったリサジュー曲線に、バラ曲線を組み合わせて作って貰ったコードに少々手を加えたものがこちらです。

私が手を加えたのは線の太さと塗りの色だけなのですが、バラの花と棘のある茎に見えてきます。

このように、違う種類の曲線や図形を組み合わせても面白いものが出来ますね。

数学の曲線はデジタルアートと非常に相性が良いので、興味があれば色々調べてプロンプトに取り入れてみて下さい!

ループアニメーションの作り方と便利な関数

ループするアニメーションを作る時によく使う関数やヒントを上げておきます。chatGPTに渡すプロンプトにこのような関数を使って、と指示してみて下さい。

  • frameRate() 関数を使って、1 秒間に表示するフレーム数を指定することができます。例えば、30 フレームに設定する場合は frameRate(30) とします。
  • sin()cos() 関数を使って、サイン波や余弦波を生成することができます。これらの関数を使うことで、描画の座標を時間に応じて変化させることができます。
  • noLoop() 関数を使って、draw() 関数が自動的に呼び出されなくなります。これにより、アニメーションを一時停止させたり、アニメーションの最後でループを抜けたりすることができます。
  • saveFrame() 関数を使って、フレームごとに画像を保存することができます。例えば、saveFrame("frames/frame-####.png") とすることで、スケッチフォルダ内にframes フォルダを作成し、そのフォルダ内にフレーム番号を含む PNG ファイルを保存することができます。
  • lerp() 関数を使って、2 つの値の間を線形補間することができます。これを使うことで、円の半径や座標をなめらかに変化させることができます。
  • lerpColor() 関数を使って、2 つの色の間を線形補間することができます。これを使うことで、色をなめらかに変化させることができます。

chatGPTに面白い作品を作ってもらえましたか?

最初は中々イメージ通りにはいかないと思いますが、何度も試すうちに指示の出し方のコツがわかってくると思います。

また逆に、自分では想像も出来ないような偶然の産物に出会えるかもしれませんね!ぜひ楽しみながらchtatGPTと一緒にプログラミングも学んでみて下さい!

生成AIツールは、こちらが使いこなす前にどんどん進化してしまうので(汗)正直追い付かないのですが、これからも気になったものはどんどん試してレビューしてまいります!

それではまた次回、ごきげんよう(^^)ゞ

コメントを残す