p5.jsでアート作成するための準備

はじめに

p5.jsを使ってwebページでアニメーションを表示するために、準備することから実際に表示するところまでを解説しています。

用意するもの

・htmlファイル
・javascriptファイル
・webブラウザ

プログラム

ファイル準備

まずプログラムファイルの準備をしていきましょう。
p5という名前のフォルダを作成して、その中にファイルを作成します。

p5
├test.html
└test.js

この記事を参考に試してみたい人は同じように名前をつけてください。

htmlファイル

htmlファイルに以下のコードを書いて、p5.jsとjQueryのスクリプトを読み込みます。
ひとまず試したい人は以下のコードをコピペするだけで大丈夫です。

test.html

">">https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js">">https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js">">">https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js">
">">https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">">https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">">">https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script src="test.js"></script>

最後の行でjavascriptのファイルを読み込んでいます。

<script src="test.js"></script>

上記のsrc=　の後に、読み込むjavascriptのファイル名を書き込みます。
上の例では、同じ階層にあるtest.jsを読み込んでいます。

javascriptファイル

javascriptファイルに書くコードで色々な表現ができます。
ひとまず試したい人は以下のコードをコピペするだけで大丈夫です。
以下のコードはchatGPTで生成しました。

test.js

let waves = []; // 波紋の配列

function setup() {
  createCanvas(1920, 1080); // キャンバスサイズを設定
  background(0); // キャンバスの背景色を黒に設定
}

function draw() {
  if (random(1) < 0.05) { // any%の確率で新しい波紋を生成
    waves.push(new Wave(random(width), random(height))); // 波紋を生成し、配列に追加
  }
  background(0); // キャンバスの背景を再描画

  // すべての波紋を更新して描画
  for (let i = waves.length - 1; i >= 0; i--) {
    waves[i].update();
    waves[i].draw();
    if (waves[i].isDone()) { // 波紋が消えたら配列から削除
      waves.splice(i, 1);
    }
  }
}

class Wave {
  constructor(x, y) {
    this.pos = createVector(x, y); // 波紋の中心座標
    this.radius = 0; // 波紋の初期半径
    this.speed = random(0.01, 0.75); // 波紋の広がる速度
    this.alpha = 255; // 波紋の透明度
    this.a =random(0, 0)//R
    this.b =random(0, 255)//G
    this.c =random(255, 255)//B
    this.d=random(0.25, 0.75)//波紋の透明度下がる速度
  }

  update() {
    this.radius += this.speed; // 波紋の半径を更新
    this.alpha -= this.d; // 波紋の透明度を減らす
  }

  draw() {
    noFill();
    stroke(this.a, this.b, this.c, this.alpha); // 波紋の色と透明度を設定
    strokeWeight(0.5); // 線の太さを設定
    ellipse(this.pos.x, this.pos.y, this.radius * 2); // 波紋を描画
  }

  isDone() {
    return this.alpha <= 0; // 波紋の透明度が0以下になったらtrueを返す
  }
}

これでランダムに波紋が広がるアニメーションが表示できます。

ここまでがプログラムの準備になります。

実行

実行はwebブラウザを使用します。
htmlファイルをダブルクリックするか、ブラウザにhtmlファイルをドラック＆ドロップすることで表示されます。

以下のようなものが表示されればOKです。（ランダムのため完全一致しません）

おわりに

jsを書き換えるといろいろな表示が可能です。これから記事でchatGPTを使って作成した作品を紹介していくので見てみてください！

以下作品例です！