Finite Clause

ベクトルを用いた矢印の描画サンプル

概要

ベクトルを少しだけ勉強したので、それを忘れないうちに実装として残しておく。

ベクトルとは

ざっくりとベクトルとは、原点Oから、ある点までを結んだ直線。
HTML5CanvasのAPI(2Dコンテキスト)で線の描画をするときにおそらく必須の要素だろう。

学んだこと

  • ベクトルの足し算
  • 直交の使いみち

ベクトルの足し算

ベクトルとベクトルを足すというのは、線の継ぎ足しを行うこと。
つまり、(4, 6)のベクトルを描いたものと、(3, 2)のベクトルを描いた場合、次のようになる。

  1. (4, 6)のベクトルを描く
  2. (4, 6)のベクトルを原点として、(3, 2)のベクトルを描く
  3. 原点Oから(2)で描いたベクトルの終端までのベクトルを描く

これは、( (4 + 3), (6 + 2) )のベクトルを描くことに等しい。

直交

直交とは、2つの線が交わった部分の角度が直角(90deg)である状態、
つまり2つの線が垂直に交わっていることを指す。
これはいつ使うのか?というのがずっと疑問だったが、今日少しわかった気がする。
矢印を描くためには、ある直線に対して直交したもう一つの直線が必要になる。
つまり、十字架上に線がならないと、矢印を綺麗に描けない。
これを実現するためには、十字架の縦棒に対して直行する横棒を描く必要がある。
では、特定のベクトルに対して直行するもう一つのベクトルを描くにはどうすればよいか?
それには直角三角形の仕様を利用すればいい。

直角三角形の仕様

直角三角形とは、その性質上、必ず一つの直角(90deg)を持っている。
さらに、三角形は、すべての角を合わせると180degになるという仕様がある。
これを利用することで、ある直線に直交するベクトルが描ける。

あるベクトルが原点から(4, 6)まで描かれていたとして、その終端の点とxを結ぶ直線と、
原点は直角三角形になる。
このベクトルに直交するベクトルを描くには、もう一つ同じ直角三角形を作れるようなベクトルを、
原点から描けばいい。
そうすれば、その2つの直角三角形の角度と、その交わりの部分は、180degになる。
つまり、直角三角形の直角以外の角が向かい合うようにもう一つのベクトルを描けばいいから、
そのベクトルは原点Oに対して(-6, 4)の点をとる。
これで矢印を書くことができる。
そのままでは長過ぎるのであれば、(x, y)の公約数を使って短くすればいい。

実装

See the Pen RenderArrowSample by Yu Kato (@katsew) on CodePen.

まとめ

ベクトルをうまく使うことで直線の描画が意図したとおりに実装可能になる。
座標の空間(?)を意識すると、ベクトルからなる図形から、別のベクトルを表現することが可能になる。