CG関連

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

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

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

もっと自然に、

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

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

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

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

Sponsored link

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

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

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

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

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

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

と思ったりします。

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

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

という表現。

他にも、

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

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

要は、
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』関数を使ってリセットをしないと、
アオキ
ずっと座標が足し算(もしくは引き算)されていきます。

参考記事

Sponsored link

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

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

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

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;
  }
}

先ほどは、

  • 座標位置 locationXとlocationY
  • 速度 velocityXとvelocityY

とそれぞれ2つ、計4つの変数を設定していたのに対し、

ベクトルを使うと2つの変数に収まります。

  • 座標位置 vecLocation
  • 速度 vecVelocity

2Dの『ベクトル』なので、1つの変数の中にXとY 2つ設定できるかたちです。

『createVector(X, Y)』という関数で、『Vector(ベクトル)』クラスをインスタンス化します。

アオキ
『Vector』はクラスなので、実際に使う際はインスタンス化(実体化)させる必要があります。

参考記事

『P5.js(ProcessingのJavaScript版)』の『Vector』にはいくつかのメソッド(命令)が用意されていて、

例えば『ベクトル』の足し算をする場合は、
『Vector.add』メソッドを使うことで実現できます。

『ベクトル』は2つ以上の数値を持っているので、

  • 『ベクトル』のX座標・・『Vector.x』
  • 『ベクトル』のY座標・・『Vector.y』

という形で指定する必要があります。

例) ellipse(vecLocation.x, vecLocation.y, 20, 20);

変数を4つつくってそれぞれ動かすよりも、

『ベクトル』・・XとY 2つのセット

としておく方が認識しやすいし、

便利なメソッドも使えるので、

慣れてきたらなるべく『ベクトル』を使えるようにしたいですね。

アオキ
『Vector』クラスにはadd以外にももいろんなメソッドがあります。詳しくはリファレンスを参照ください。

『P5.js』リファレンス p5.Vector

Sponsored link

『ベクトル』の使い方 まとめ とりあえず動かしてみる

『ベクトル』と聞くとなんとも難しい印象を受けるし、

アオキ
大きさと向きと言われてもなんかピンとこない・・・

という状態だったので、

アオキ
『ベクトル』は、ただの数字の組み合わせなんだ。

という理解でプログラミングを描くようにすると、

すんなり理解することができるようになりました。

教科書だけ読んでいてもなんかピンとこないなぁと思ったら、

レッツプログラミング、ですな。

2019/9/21追記
『ベクトル』は向きと大きさ、というのがようやくわかった感があります。
『ベクトル場』はまさにドラクエでいうところの『すべる床』ですな。

参考記事

created by Rinker
¥1,628 (2024/03/18 12:25:44時点 Amazon調べ-詳細)

『数学・物理』関係ではこんな記事も読まれています。

1. 【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【Udemy】

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

3. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

4. 【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】

5. 【ラジアン】とは わかりやすくまとめてみた【初心者向け】

6. 【図解】波の用語や動きをプログラムも交えてまとめてみる【数学&物理】

7. 【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】

8. 【シグマ(∑)】計算をわかりやすくまとめてみた【エクセルのsum】【初心者向け】

9. 【極座標 】とは【直交座標 】との違いや変換方法についてまとめてみた

10. 【虚数】【複素数】とは わかりやすくまとめてみた【初心者向け】

11. 【指数】とは わかりやすくまとめてみた【初心者向け】

12. 【対数】とは わかりやすくまとめてみた【初心者向け】

13. 順列・組み合わせ・階乗とは わかりやすくまとめてみた【数学】

14. 【確率(加法定理)】とは わかりやすくまとめてみた【初心者向け】

15. 【ベクトル場】と【速度ベクトル】とは わかりやすく【ドラクエのすべる床】

↓ ここから下は物理関連

1. プログラムで【加速度】をわかりやすくするために実際に動かしてみる(5)【P5.js】

2. 【流体力学】とは 圧力・密度・浮力をまとめてみた【初心者向け】

↓ ここから下はちょいムズカシイ

1. 【ネイピア数】とは わかりやすくまとめてみた【自然対数の底(e)】

2. 【ベクトル解析 勾配(grad)】わかりやすくまとめてみた

3. 【ベクトル解析 発散(div)】わかりやすくまとめてみた

4. 【テイラー展開】をわかりやすくまとめてみた【おすすめ動画あり】

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】初心者向けの動画をリリースしました(プログラミング×数学物理)【Udemy】

2. 【JavaScript】初心者向けの動画をリリースしました【Udemy】

3. プログラミング実況をやってみた その1【P5.js】

4. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

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

6. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

7. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

8. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

9. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

10. プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

11. プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】

12. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

13. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

14. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

15. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


プロフィール

世界のアオキ

教育者/キュレーター。Udemyで講師業してます。問題発見と解決のための新時代の学習を。最終学歴より最新学習歴を。STEAMも、プログラミングも。初心者向けブログ執筆中。尊敬する人はダビンチとクロップ。熊本在住。海外旅行20回以上 ゴルフはできません(汗

最近の記事

アーカイブ

カテゴリー

  1. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  2. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  3. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  4. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  5. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock