p5.jsでつくる正弦波の重ね合わせ

はじめに

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

作品紹介

『正弦波』

構想

最初は海の波を表現してみようと考えていたのですが、波の表現のために正弦波を利用しているうちに重ね合わせると面白そうだと考えました。それから正弦波をひたすら重ねてみるようにして作り始めました。

chatGPTと調整

はじめは均等にずらしていくような正弦波を生成していました。それでも十分面白かったのですが単調でした。そこでランダムにできそうな数値のところはランダムに変えてみました。すると時間が立つと雰囲気がコロコロと変わるようになり、よりダイナミックに面白い動向を生み出しました。

作品解説

下準備

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

コード

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

let waves = [];

function setup() {
  createCanvas(2000, 1200);
  background(0);
  strokeWeight(2);
  noFill();
  stroke(255);

  // 波を10個作成
  for (let i = 0; i < 10; i++) {
    let c = color(random(100, 255), random(100, 255), random(100, 255));
    let freq = random(1, 5);
    let amp = random(20, 100); //20, 100が一番きれいだと感じた
    let phase = random(TWO_PI);
    let speed = random(0.01, 0.05);
    waves.push(new Wave(c, freq, amp, phase, speed));
  }
}

function draw() {
  // 背景色のフェード
  fill(0, 10);
  rect(0, 0, width, height);

  // 波の描画
  for (let i = 0; i < waves.length; i++) {
    waves[i].update();
    waves[i].display();
  }
}

class Wave {
  constructor(c, freq, amp, phase, speed) {
    this.c = c;
    this.freq = freq;
    this.amp = amp;
    this.phase = phase;
    this.speed = speed;
    this.offset = 0;
    this.freq_delta = random(-0.1, 0.1);
    this.amp_delta = random(-5, 5);
  }

  update() {
    // 波の速度に応じた位相の移動
    this.phase += this.speed;

    // オフセットの更新
    this.offset = map(sin(this.phase), -1, 1, 0, TWO_PI * this.freq);

    // 周期の微小な変化を加える
    this.freq += this.freq_delta;
    if (this.freq < 1 || this.freq > 5) {
      this.freq_delta *= -1;
    }

    // 振幅の微小な変化を加える
    this.amp += this.amp_delta;
    if (this.amp < 20 || this.amp > 100) {
      this.amp_delta *= -1;
    }
  }

  display() {
    // 色の設定
    stroke(this.c);
    strokeWeight(0.9); // 線の太さをランダムに変更

    // 正弦波の描画
    beginShape();
    for (let x = 0; x <= width; x += 5) {
      let y = sin(x * this.freq + this.offset) * this.amp;
      vertex(x, height / 2 + y);
    }
    endShape();
  }
}

拡張性

設定を調整することで雰囲気が一気に変わります。自分は以下のようにコメント入れている通り、振幅にこだわって数値を決めました。ほんとにちょっと変えるだけで様子が変わるので試してみて自分の好きな雰囲気を作り出してください。

function setup() {
  createCanvas(2000, 1200);
  background(0);
  strokeWeight(2);
  noFill();
  stroke(255);

  // 波を10個作成
  for (let i = 0; i < 10; i++) {
    let c = color(random(100, 255), random(100, 255), random(100, 255));
    let freq = random(1, 5);
    let amp = random(20, 100); //20, 100が一番きれいだと感じた
    let phase = random(TWO_PI);
    let speed = random(0.01, 0.05);
    waves.push(new Wave(c, freq, amp, phase, speed));
  }
}

これも自分で実際につくって見てみると綺麗です。ぜひ、試してみてください！

おわりに

今回は正弦波を重ね合わせることで移り変わる動向を楽しめる作品ができました。