P5.js (Processing)

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

遊ぶようにプログラミングができて、
デザインやアートをつくれる『クリエイティブコーディング』を、
『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回: 動きを生みだす – アニメーションとベクトル

コードはこちら。

座標の値を 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回: 動きを生みだす – アニメーションとベクトル

コードはこちら。

先ほどは、

  • 座標位置 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

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

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

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

という状態だったので、

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

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

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

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

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

created by Rinker
¥1,598 (2019/06/19 02:30:28時点 Amazon調べ-詳細)

 

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

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

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

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

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

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり【P5.js】(6)

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

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

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

10. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

コメント

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

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

CAPTCHA


Sponsored link

関連記事

  1. P5.js (Processing)

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

    遊ぶようにプログラミングができる『クリエイティブコーディング』。『…

  2. P5.js (Processing)

    配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり【P5.js】(6)

    今回のお題は『配列』。『プログラミング』を始めたばかりの頃を思い出…

  3. P5.js (Processing)

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

    プログラミングでアートだったりデザインを作ることを『クリエイティブコ…

  4. Javascript

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

    プログラミングを始めた頃に、よくわからないと思っていたものの一つに『…

  5. 物理学

    物理とプログラミングの関係〜力学のはじめのいっぽ

    子供向けプログラミング教室『CoderDojo熊本』で以前こんな質問が…

  6. P5.js (Processing)

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

    遊ぶようにプログラミングができる『クリエイティブコーディング』の中でも…

Sponsored link

最近の記事

Sponsored link
  1. Laravel

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  2. クリエイティブコーディング

    プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して
  3. IoT

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  4. 物理学

    物理とプログラミングの関係〜力学のはじめのいっぽ
  5. docker初心者向けdocker-composeからやったほうがいいかもよ

    ツール

    【Docker】初心者はdocker-composeから始めた方がいいかもしれな…
PAGE TOP