BETA

【Processing(p5.js)】ベクトルについて

投稿日:2019-02-27
最終更新:2019-10-18

ベクトルとは

「大きさと向きを持った量」のこと。
速度、加速度、力などがある。
矢印で表現されるか否かを考えるととわかりやすい。


例えば「東京大阪間の距離500km」はベクトルになる。
なぜなら、東京と大阪という位置を結ぶ、向きと大きさを持った矢印となるから。

ベクトルの計算

ベクトルの加算

1つ目のベクトルの終端にもう1つのベクトルをつなぎ、最初のベクトルの始点と最後のベクトルの終点を結んだベクトルが加算の結果となる。

ベクトルの減算

同一の点から2つのベクトルを描き、1つ目のベクトルの終点と2つ目のベクトルの終点を結んだベクトルが減算の結果となる。

位置ベクトルと速度ベクトル

アニメーションにおける「位置ベクトル」の変化は大きさと向きを持ったベクトルであり、これを「速度ベクトル」という。

ProcessingおよびP5.jsにおけるベクトルの扱い

Processingではベクトルを扱うために「PVector」クラスが用意されている。
ベクトルは以下のように2つの値を代入することができ、1つ目の値をx座標、2つ目の値をy座標ととらえる。

// ベクトルの宣言  
PVector vec;  
// インスタンス化  
vec = new PVector(10, 20);  

// x座標を取得  
float x = vec.x;  
// y座標を取得  
float y = vec.y;  



p5.jsではベクトルを扱うためにcreateVectorメソッドを使用する。

// ベクトルを宣言  
let vec = createVector(10, 20);  

// x座標を取得  
let x = vec.x;  
// y座標を取得  
let y = vec.y;  

ベクトルの加算

ベクトルの加算には、Processingもp5.jsもaddメソッドを使用する。

// Processing  
PVector vec_1 = new PVector(10, 20);  
PVector vec_2 = new PVector(30, 40);  
vec_1.add(vec_2);  

// 結果:40, 60  
println(vec_1.x + ", " + vec_1.y);  

ベクトルの減算

ベクトルの減算には、Processingもp5.jsもsubメソッドを使用する。

PVector vec_1 = new PVector(10, 20);  
PVector vec_2 = new PVector(30, 40);  
vec_2.sub(vec_1);  

// 結果:20, 20  
println(vec_2.x + ", " + vec_2.y);  

ベクターを使用してアニメーションを実現

完成品


https://www.openprocessing.org/sketch/772733

コード(p5.js)

// 位置ベクトル    
let locationVec;  
// 速度ベクトル    
let velocityVec;   

let isEdge;   

function setup() {  
    createCanvas(windowWidth, windowHeight, P2D);  
    background(100);  
  frameRate(60);    
  stroke(255);    
  fill(255);    

  // 位置ベクトルの初期設定    
  locationVec = createVector(random(width), random(height));  
  // 速度ベクトルの設定    
  velocityVec = createVector(random(-5, 5), random(-5, 5));  
}  

function draw() {  
  isEdge = false;    

  background(0);    

  // 円を描画    
  ellipse(locationVec.x, locationVec.y, 100, 100);    

  // 位置ベクトルに速度ベクトルを加算し、次フレーム時の位置を設定    
  locationVec.add(velocityVec);   

  // 画面端に来たらバウンドさせる    
  // 画面端に来たら円の色を変える    
  if (locationVec.x < 0 || locationVec.x > width) {    
    velocityVec.x = velocityVec.x * -1;   

    isEdge = true;    
  }    
  if (locationVec.y < 0 || locationVec.y > height) {  
        velocityVec.y = velocityVec.y * -1;   

    isEdge = true;   
  }   

  if(isEdge) {  
    fill(random(255), random(255), random(255));   
  }  
}  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

funacchiの技術ブログ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう