【ベクトル】をわかりやすくするコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

ホーム
CG関連, 物理学
【ベクトル】をわかりやすくするコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

CG関連

2019.06.9

【ベクトル】をわかりやすくするコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

2020/6/5追記ベクトルに関する動画を追加しました。

遊ぶようにプログラミングができて、
デザインやアートをつくれる『クリエイティブコーディング』を、
『P5.js(ProcessingのJavaScript版)』を使っていろいろ試しているうちに、

もっと自然に、

ボールや図形を動かしたいなと思うようになってきて。

自然に動かすとなると『数学』や『物理』の知識が必要になってきます。

今回のお題は『ベクトル』。

できるだけわかりやすく、使えるこなせるようになるために、
『ベクトル』についてまとめてみることにしました。

『ベクトル』とは、ただの数字の組み合わせ

『物理』の教科書や参考書を見るとよく、

『ベクトル』とは、向きと大きさです。

という表現がでてくるのですが、

プログラミング的に見ると、

アオキ

『ベクトル』といっても、ただの座標や数字だよなぁ・・

と思ったりします。

いろいろググってふに落ちたのは、

ベクトル兄さん

『ベクトル』は『複数の数字』のことです。

という表現。

他にも、

ベクトル姉さん

『ベクトル』は『数字のペア』のことです。

という表現もありました。

要は、
2つ以上の数字のセットが
『ベクトル』という名前になっているだけ
という事。

2次元(2D)の場合は、X座標とY座標の2つの値で、
3次元(3D)の場合は、X座標、Y座標、Z座標の3つの値がセットということになります。

ただの数字の組み合わせなので、
4つや5つの数字の組み合わせ、ということもありえますが、

図にできないので、

『クリエイティブコーディング』的には対象外かなと思います。

アオキ

4つ以上の『ベクトル』は、『機械学習』などの『分析』で必要になるようです。

『ベクトル』の使い方足し算・引き算

2次元(2D)に限定すると、

『ベクトル』は、XとYの2つの数字をもった値になります。

例えばXが1、Yが2なら、

『ベクトル』 = (1, 2)

となり、

Xが 3、Yが5なら

『ベクトル』 = (3, 5)

になります。

『ベクトル』を足し算する場合は、

XとXを足して、YとYを足し算すればOKなので、

(1 + 3 , 2 + 5) = (4 , 7)

ということになります。

引き算も同じように、XとYでそれぞれ引き算すればOKです。

『P5.js(ProcessingのJavaScript版)』の場合は、
『translate』関数が『ベクトル』の足し算や引き算と同じような動きをします。

アオキ

『push』関数と『pop』関数を使ってリセットをしないと、

アオキ

ずっと座標が足し算(もしくは引き算)されていきます。

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

プログラムで移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

https://coinbaby8.com/p5js-translate-rotate-scale.html

遊ぶようにプログラミングができる『クリエイティブコーディング』の中でももっとも取り組みやすいのではと思っているのが『P5.js(ProcessingのJavaScript版)』。今回は『P5.js(ProcessingのJavaScript版)』でtransform系(変形)と言われている下記の3つの関数と、translate()・・トランスレートrotate()・・ロテートscale()・・スケール3つの関数に合わせて使うことが多い、『push()』と『pop()』についてまとめています。これらの関数はしょっちゅう使われてますね〜プログラムで移動させる方法〜 translate関数まずは普通に円を描い...

『ベクトル』を使わないでボールを動かしてみる

『ベクトル』と言っても数字の組み合わせなだけなので、

『ベクトル』として使わなくても、

X座標、Y座標をそれぞれ作って変化させていけば、

ボールを動かすことはできます。

See the Pen
p5.js vector-test by aoki_monpro (@suica)
on CodePen.

ちょうどいい資料があったのでご紹介しておきます。

参考資料
第5回: 動きを生みだす – アニメーションとベクトル

コードはこちら。

let locationX, locationY;
let velocityX, velocityY;

function setup() {
  createCanvas(200, 200);
  colorMode(HSL, 360, 100, 100, 100);
  locationX = width / 2; // Xの位置
  locationY = height / 2; // Yの位置
  velocityX = 2; // Xの速度
  velocityY = 3; // Yの速度
}

function draw() {
  background(0);
  locationX = locationX + velocityX; // Xの位置にXの速度を足してXの位置を変えている
  locationY = locationY + velocityY; // Yの位置にYの速度を足してYの位置を変えている
  fill(160, 100, 50, 100);
  ellipse(locationX, locationY, 20, 20);
  if( locationX < 0 || locationX > width){
    velocityX = velocityX * -1;
  }
  if(locationY < 0 || locationY > height){
    velocityY = velocityY * -1;
  }
}

座標の値を locationX, locationY という変数で設定して、
速度を velocityX、velocityY という変数で設定しています。

変数の名前はなんでもいいんですが、意味がわかるように、

アオキ

座標位置を表すならpositionやlocation

アオキ

速度を表すなら velocity がいいのかなと思います。

locationX(座標のX(横)に velocityX(Xの速度)を足して、
locationY(座標のYに(縦))に velocityY(Yの速度)を足す、

というような内容で、ボールの動きを実現しています。

『ベクトル』を使ってボールを動かしてみる

次に、『ベクトル』を使ってボールを動かしてみます。

See the Pen
p5.js vector-test2 by aoki_monpro (@suica)
on CodePen.

こちらも下記資料を参考にさせていただいています。

参考資料
第5回: 動きを生みだす – アニメーションとベクトル

コードはこちら。

let vecLocation;
let vecVelocity;

function setup() {
  createCanvas(200, 200);
  colorMode(HSL, 360, 100, 100, 100);
  vecLocation = createVector(width / 2, height / 2); // ベクトルとすると、XとYまとめて位置を指定できる
  vecVelocity = createVector(2, 3); // ベクトルとすると、XとYまとめて速度を指定できる
}

function draw() {
  background(0);
  vecLocation.add(vecVelocity);
  fill(160, 100, 50, 100);
  ellipse(vecLocation.x, vecLocation.y, 20, 20); // .xや.yとつけることで、X成分 Y成分それぞれを指定できる
  if( vecLocation.x < 0 || vecLocation.x > width){
    vecVelocity.x = vecVelocity.x * -1;
  }
  if(vecLocation.y < 0 || vecLocation.y > height){
    vecVelocity.y = vecVelocity.y * -1;
  }
}

先ほどは、