ホーム / リファレンス /

p5.js 関数リファレンスと作例：createVector()

2023年9月2日土曜日

p5.js リファレンス

t f B! P L

p5.js の様々な関数の使い方をおさらいし、作例コードを書くことで、自身の知識の定着を図っています。

今回は、createVector() 関数の解説を行い、サンプルコードを書くことで、その使い方を学びます。誤りや、勘違いがあるかもしれません。何かあれば、ご指摘をいただけると嬉しいです。

p5.js は、バージョン 1.6.0 を使用しています。

 

createVector() 関数の説明と使い方

createVector() | p5.js 公式リファレンス

説明

2次元、あるいは 3次元のベクトルを格納するためのデータ型である p5.Vector を生成する関数です。ベクトルとは大きさと方向を持つ量です。私は矢印のイメージと理解しています。

生成した p5.Vector は、本来のベクトルとしての使い方だけでなく、単純に x, y の属性を持つクラス、あるいは x, y, z の属性を持つクラスという使い方もできます。ただ、p5.Vector はベクトル同士の加算やベクトルの向いている角度を返すなどの便利なメソッドを持っており、ここが単に属性を持っているクラスとの違いになります。

p5.Vector | p5.js 公式リファレンス

 

書き方

createVector([x], [y], [z])

 

パラメータ

x, y, z：それぞれベクトルの x, y, z の値を数値で指定します。指定は任意です。

x を指定せずに y を指定するということはできません。 createVector(, 20)、 createVector(10, , 30) などはエラーになります。

 

返り値

p5.Vector：3次元のベクトルを持つクラス

createVector() の場合、帰ってくるベクトル値は (0, 0, 0) です。
createVector(30, 20) の場合、帰ってくるベクトル値は (30, 20, 0) です。

 

p5.js 公式リファレンスのコード例の補足


let v1;
function setup() {
  createCanvas(100, 100);
  stroke(255, 0, 255);
  v1 = createVector(width / 2, height / 2);
}

function draw() {
  background(255);
  line(v1.x, v1.y, mouseX, mouseY);
  describe('draws a line from center of canvas to mouse pointer position.');
}

キャンバスの中心点からマウスの位置まで線を引くコードで、中心点を保持する変数としてベクトルを使っています。

これは正に、先に述べた「x, y の属性を持つクラス」として使っている例だと思います。下記のようにしても同じ結果です。


  line(width / 2, height / 2, mouseX, mouseY);

 

createVector() を使った作例

p5.js 公式リファレンスのコード例を、ベクトルの活用らしく改造してみました。

公式リファレンス例の v1 をキャンバスの中心点固定ではなく、マウスポインタとの距離に応じた長さを持ち、マウスポインタへの方向を持ったベクトル v2 を使って、マウスポインタに近づいていくアニメーションにしました。

ベクトルの計算には、p5.Vector クラスのメソッドである sub()、 mult()、 add() を使用しています。

createVector() を使った作例アニメーション


/** 
 * p5.js createVector() 関数の作例
 * マウスに付いてくる線
 * 
 * @author @deconbatch
 * @version 0.1
 * @license CC0
 * p5.js 1.6.0
 * created 2023.09.03
 */

const gravityFix = 0.05;
let v1;

function setup() {
  createCanvas(720, 720);
  frameRate(24);
  stroke(255, 0, 255);
  strokeWeight(5);
  v1 = createVector(width / 2, height / 2);
}

function draw() {
  background(255);

  let v2 = p5.Vector.sub(createVector(mouseX, mouseY), v1);
  v2.mult(gravityFix);
  v1.add(v2);

  line(v1.x, v1.y, mouseX, mouseY);
}

 

QooQ