p5.jsでつくる草原

はじめに

p5.jsというライブラリを利用してchatGPTと共に作成したアートの紹介です。
「なんかいい」をモットーに作っています。

作品紹介

『草原』

構想

自然を感じられる作品をつくりたいという気持ちから作り始めました。ランダムな動作の集合で自然を表現できそうというところから思考をはじめ、具体的なものとして草原をイメージしました。

chatGPTと調整

まずは円弧がくるくると回転するように指示しました。そこから円弧の角度を調整し、なびくように振動させました。
振動とかなびくとかを入力することで、noise関数を入れてランダムに数字を生成して、map関数で得た数値を角度の範囲を制限するものに変換して、オブジェクトが左右に揺れるように工夫してくれました。

#作品解説

下準備

必要なファイルや実行方法がわからない人は以下を参考にしてください。

コード

コードはchatGPTが生成しています。数字は一部調整しています。

//草が風になびく様子が描かれている
let blades = [];

// 初期設定
function setup() {
    // キャンバスのサイズを設定
    createCanvas(2000, 1500);
    // 色空間をHSBに設定
    colorMode(HSB);
    // 草の本数分Bladeオブジェクトを生成
    for (let i = 0; i < 4000; i++) {
      let b = new Blade();
      // 生成したBladeオブジェクトをblades配列に追加
      blades.push(b);
    }
  }

  // 描画処理
  function draw() {
    // 背景色を設定
    background(69,29,27);

    // blades配列の全てのBladeオブジェクトについてupdate()とdisplay()を実行
    for (let i = 0; i < blades.length; i++) {
      blades[i].update();
      blades[i].display();
    }
  }

// ブレードオブジェクトを定義するクラス
class Blade {
    constructor() {
      // ブレードの位置、角度、長さをランダムに設定
      this.x = random(width);
      this.y = random(height);
      this.angle = random(TWO_PI);
      this.segLength = random(3, 20);
      // 目標角度を0で初期化
      this.targetAngle = 0;
    }

    // ブレードの状態を更新する関数
    update() {
      // 角度をランダムに変化させる
      this.angle += random(-0.1, 0.1);
      // ノイズ関数を使って目標角度を計算し、現在の角度に近づける
      this.targetAngle = map(noise(this.x * 0.01, this.y * 0.01), 0, 1, -PI / 8, PI / 8);
      this.angle += (this.targetAngle - this.angle) * 0.1;
    }

    // ブレードを描画する関数
    display() {
      // 座標系を移動し、角度を設定
      push();
      translate(this.x, this.y);
      rotate(this.angle);
      // ブレードを複数の線分で構成する
      for (let i = 0; i < 5; i++) {
        stroke(120, 100, 70);  // 線の色を設定
        strokeWeight(4);  // 線の太さを設定
        line(0, 0, this.segLength, 0);  // 線を描画
        translate(this.segLength, 0);  // 座標系を移動
        rotate(PI / 8);  // 角度を回転
      }
      pop();  // 座標系を元に戻す
    }
  }

拡張性

ブレードの数や、大きさは変更できます。コメントを参考に好みに合わせて変えてください。
またランダムな数値生成による自然っぽさの表現はまだまだ追求できそうです。雨や波なども表現できそうです。

おわりに

風が吹いて草がなびく感じを、たくさん用意することで草原の雰囲気をだすことができました。クリックすると風が吹いたと認識して、一定期間同じ方向になびくとかにするのも面白そうです。