p5.jsでつくる天体運動

はじめに

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

作品紹介

『planet』

構想

作品の題名『planet』のとおり、太陽系の惑星の運動をイメージして作ろうとしました。惑星は厳密には楕円軌道を描きますが、全て円運動しているかのように見えるように仕掛ける方針にしました。

chatGPTにした指示の流れと調整

まずは一つの円が円運動するように指示しました。これはすぐにできました。

一つの円が円運動するようになったら、移動速度・円の大きさ・色・運動の動きをランダムになるようにした上で複数に増やすように指示しました。

最後に円の表示数や円が動く様子は表示された結果を見ながら自分で数値を調整しました。

始めは軌道の配置も太陽系の惑星みたいにしようと考えていたのですが、ランダムに入り交じる様子が星雲を見ているような心地よさを感じこのようにしました。単純な動きでも数が増えることで心地のよい複雑感を生み出せることに感動します。

作品解説

下準備

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

コード

コードはchatGPTが生成しています。
ランダムの数値範囲は調整しています。

planet.js

let planets = [];

function setup() {
  createCanvas(2000, 1250);
  colorMode(HSB);
  for (let i = 0; i < 100; i++) {
    let p = new Planet(random(width), random(height), random(5, 30));
    p.color = color(random(255), 255, 255);
    p.speed = random(0.5, 8);
    p.acceleration = createVector(random(-0.1, 0.1), random(-0.1, 0.1));
    planets.push(p);
  }
}

function draw() {
  background(0);
  for (let i = 0; i < planets.length; i++) {
    planets[i].update();
    planets[i].display();
  }
}

class Planet {
  constructor(x, y, r) {
    this.position = createVector(x, y); //位置ベクトル
    this.velocity = createVector(); //速度ベクトル
    this.acceleration = createVector(); //加速度ベクトル
    this.radius = r; //半径
    this.color = color(255); //色
    this.speed = 1; //移動速度
    this.angle = random(TWO_PI); //回転角度
  }


// 更新処理
update() {
    // 加速度を速度に加算
    this.velocity.add(this.acceleration);
    // 速度を制限
    this.velocity.limit(this.speed);
    // 位置に速度を加算
    this.position.add(this.velocity);
    // 境界条件を適用
    if (this.position.x < -this.radius) {
      this.position.x = width + this.radius;
    }
    if (this.position.x > width + this.radius) {
      this.position.x = -this.radius;
    }
    if (this.position.y < -this.radius) {
      this.position.y = height + this.radius;
    }
    if (this.position.y > height + this.radius) {
      this.position.y = -this.radius;
    }
    // 回転角度を更新
    this.angle += 0.05;
  }

  display() {
    push();
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    fill(this.color);
    noStroke();
    ellipse(0, 0, this.radius*2, this.radius*2);
    pop();
  }
}

拡張性

class Planetとして移動オブジェクトがまとめられているので、この部分をコピペして、さらにchatGPTに指示を出せば違った動作するオブジェクトを生成することができます。上記のコードはコピペで動くので、ぜひ色々試してみてください！

おわりに

今回は惑星の動きをイメージをして作り始め、星雲の心地よさに落ち着きました。
では、また。