p5.jsのvectorクラスを使ってみよう

p5.jsのvectorクラスでインタラクション

p5.jsのvectorを使って、わかりやすい挙動のインタラクションを作りたい。
p5.jsの基本は仮定する。

準備

クラスについて

クラスについて軽く復習したい。クラスとは、複数の機能をひとまとめにするjavascriptの書き方の一つ。
今の場合、vectorという応用範囲の広い対象に付随するたくさんの機能をひとまとめにしておくことで、それを使いたいと思った人がアクセスしやすくする。汎用性のある機能は、全てクラス化されている（はず）。

ベクトルクラスに付随する演算

加法、除法、内積、大きさ、などが代表格。それらが全てメソッド名を書くことで、使える。

加法

加法のメソッド名は、「add」です。
v1にv2を足したければ、
v1.add(v2)と書けばいい。
上述のように、addがメソッド名。()の中に、足すべきベクトルを入れる。
直感的に書けば、「v1+v2」ということ。
これをjavascriptの記法では、上のように書く。

練習問題

最もシンプルな例。v1 = (0,1),v2 = (1,0)として、これらの足し算をしてみる。
これをコードで実行するわけだが、これができれば、基本はわかっていることになる。

let v1 = createVector(0,1);
let v2 = createVector(1,0);

v1.add(v2);
console.log(v1)//(1,1)

sketch.js

function setup() {
  createCanvas(400, 400);
  let v1 = createVector(0, 1);
  let v2 = createVector(1, 0);

  v1.add(v2);
  console.log(v1); //_class {isPInst: true, _fromRadians: ƒ bound (), _toRadians: ƒ bound (), x: 1, y: 1…}

}

function draw() {
  background(220);
}

p5.jsで実行すると、上のようになる。v1をコンソールに出すと、色々なプロパティを持ったオブジェクトが出てくるが、大事なのは、x座標、y座標であり、それらは、x:1,y:1という箇所に表れている。

console.log(v1.x);//1
console.log(v1.y);//1

インタラクション

では、v2 = (mouseX,mouseY)として、上のコードを実行してみよう。

let v1 = createVector(1,0);
let v2 = createVector(mouseX,mouseY);
v1.add(v2);

これを可視化したいので、コンソールに出す代わりに、line()を使って、v1をそのまま描画。

line(0,0,v1.x,v1.y);

このままでは少し分かりにくいので、以下のように、三つの直線を引いてみる。

  stroke(0);
  line(0, 0, v1.x, v1.y);//原点からv1
  stroke(250,0,0);
  line(0,0,v2.x,v2.y);//原点からv2
  stroke(0,0,250);
  line(v1.x,v1.y,v2.x,v2.y)//v1からv2に向かう

sketch.js

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let v1 = createVector(1, 0);
  let v2 = createVector(mouseX, mouseY);
  v1.add(v2);

  stroke(0);
  line(0, 0, v1.x, v1.y);
  stroke(250,0,0);
  line(0,0,v2.x,v2.y);
  stroke(0,0,250);
  line(v1.x,v1.y,v2.x,v2.y)
}

何が起きているかわかるだろうか。色分けして描画した三つの直線が重なっている。
なぜか？今の場合、v1が小さすぎるためだ。
赤と黒は見える。これが、v1とv2だ。三本目の直線（青）が見えない。これはどこへ行った？
試みに、v1　= (100,0)としてみよう。

let v1 = createVector(100,0);

sketch.js

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let v1 = createVector(100, 0);
  let v2 = createVector(mouseX, mouseY);
  v1.add(v2);

  stroke(0);
  line(0, 0, v1.x, v1.y);
  stroke(250,0,0);
  line(0,0,v2.x,v2.y);
  stroke(0,0,250);
  line(v1.x,v1.y,v2.x,v2.y)
}

出現した。これでとりあえずのインタラクションは完成。v1の値を変えるだけで、それなりに楽しめる。それでは。