↑矢印をプログラムで描く；単純ベクトル加算法

 矢印・矢尻の数学、直交するベクトルの加算

矢印の矢尻図形は基本となる線ベクトルに対し左右90°方向のベクトル と逆方向のベクトルを加えることにより得ることができます。 矢尻生成には三角関数も向きによる場合分けも不要です。

簡単なことなのですが、２点"(Ax,Ay)-(Bx,By)"間に矢印を書きたい場合 の計算式が瞬時で出るかというとそうでもないので、ここにメモして おきます。実際に動く計算プログラム・ソースも載せます。

矢尻の設計図 ： 単純な３角形と"かえし"のある実用形
プログラムによる描画（A点、B点を動かし色々な向きで同じ式で計算しています）

 矢尻端２点を得る基本計算

点Ａ(Ax,Ay)から点Ｂ(Bx,By)に矢印線を引きたいとします。
矢尻の幅を2w、長さをhとします。
この条件で矢尻の左端Ｌ(Lx,Ly)と右端Ｒ(Rx,Ry)を算出します。

左方向、右方向、逆方向の単位ベクトルを得ます。

　　基本ベクトル       : Vx  =  Bx - Ax
                         Vy  =  By - Ay
　　基本ベクトル長     : v   =  sqrt(Vx×Vx + Vy×Vy)
　　基本単位ベクトル   : Ux  =  Vx÷v
                         Uy  =  Vy÷v
    左方向単位ベクトル : Lux = -Uy
                         Luy =  Ux
    右方向単位ベクトル : Rux =  Uy
                         Ruy = -Ux
    逆方向単位ベクトル : Nux = -Ux
                         Nuy = -Uy

従って左端、右端は次のようになります。

　　左端 : Lx = Bx + Lux×w + Nux×h = Bx - Uy×w  - Ux×h
           Ly = By + Luy×w + Nuy×h = By + Ux×w  - Uy×h
    右端 : Rx = Bx + Rux×w + Nux×h = Bx + Uy×w  - Ux×h
           Ry = By + Ruy×w + Nuy×h = By - Ux×w  - Uy×h

 矢尻端２点を得るプログラム例(Javascript+canvas)

実際に計算するプログラムを示します。javascriptを使いcanvasに出力しています。

左の２本の計算プログラムは次のようになっています。 右の２本は次項で説明

function arrowPos(A,B,w,h,L,R){ //A,B,L,Rは[0]:x [1]:y
   var Vx= B[0]-A[0];
   var Vy= B[1]-A[1];
   var v = Math.sqrt(Vx*Vx+Vy*Vy);
   var Ux= Vx/v;
   var Uy= Vy/v;
   L[0]= B[0] - Uy*w - Ux*h;
   L[1]= B[1] + Ux*w - Uy*h;
   R[0]= B[0] + Uy*w - Ux*h;
   R[1]= B[1] - Ux*w - Uy*h;
   }

ここに示したのはJavascriptですが他の言語での実現も容易な はずです。
■裸眼立体視3Dアニメート数式プロッタ ではJavaで全く同等の計算を行いGraphics2Dで矢印を書いています。

本記事の主眼ではありませんが、参考までに本記事でのcanvas制御 プログラムも載せます。

<!--[if lt IE 9]>
<script type="text/javascript" src="../../../js/excanvas.js"></script>
<![endif]-->
<center id=douga> <!-- centerは不滅です　-->
<canvas id="canvas1" width="492" height="130"></canvas>
</center>
<script type="text/javascript">
function arrowPos(A,B,w,h,L,R){ //A,B,L,Rは[0]:x [1]:y
   var Vx= B[0]-A[0];
   var Vy= B[1]-A[1];
   var v = Math.sqrt(Vx*Vx+Vy*Vy);
   var Ux= Vx/v;
   var Uy= Vy/v;
   L[0]= B[0] - Uy*w - Ux*h;
   L[1]= B[1] + Ux*w - Uy*h;
   R[0]= B[0] + Uy*w - Ux*h;
   R[1]= B[1] - Ux*w - Uy*h;
   }
var context;
function drawArrow(A,B,w,h){
   var L= new Array(2);
   var R= new Array(2);
   arrowPos(A,B,w,h,L,R);
   context.save();  // おまじない
   // context.strokeStyle="rgba(0,0,0,1)"; // 線の色指定
   // context.fillStyle = "rgba(0,0,0,1)"; // 塗り色指定
   context.beginPath();          // A～Bの線
   context.moveTo(A[0],A[1]);
   context.lineTo(B[0],B[1]);
   context.stroke();             // 線を描く
   context.beginPath();          // 矢尻
   context.moveTo(L[0],L[1]);
   context.lineTo(B[0],B[1]);
   context.lineTo(R[0],R[1]);
   context.closePath();          // 閉曲線にする
   context.fill();               // 塗り
   context.restore();// おまじない
   }
var A1= new Array(2);
var B1= new Array(2);
var A2= new Array(2);
var B2= new Array(2);
var t=0.0;
function draw(){
   context= document.getElementById('canvas1').getContext('2d');//ループ内で毎回行う
   t += 0.05; // 60回でほぼπ（半周)
   A1[0]= 70+50*Math.sin(t);
   A1[1]= 70+50*Math.cos(t);
   B1[0]= 70+50*Math.sin(t+3.14);
   B1[1]= 70+50*Math.cos(t+3.14);
   A2[0]= 200+50*Math.sin(2*t);
   A2[1]= 70+50*Math.cos(2*t);
   B2[0]= 200+50*Math.sin(2*t+3.14);
   B2[1]= 70+50*Math.cos(2*t+3.14);
   context.clearRect(0,0,492,130);
   drawArrow(A1,B1,5,15);
   drawArrow(A2,B2,3,6);
   }
function start(){
   //context= document.getElementById('canvas1').getContext('2d');ループ内で毎回行う
   setInterval(draw,67); // 指定間隔で関数呼び出し。67は1/15秒を示す
   }
try{ // load完了で関数呼び出し
   window.addEventListener("load",start(),false);
   }
catch(e){
   window.attachEvent("onload",start);
   }
</script>

 少し凝った矢印（かえしのある矢尻）

ＬとＲの間にもう一点置けばより矢印らしくなります。
上の回転矢印表示の右のものです。

中点M(Mx,My)は単純に逆方向ベクトルをh2の長さ分足したものです。

実際の計算プログラムを示します。

function arrowPos2(A,B,w,h,h2,L,R,M){ //A,B,L,R,Mは[0]:x [1]:y
   var Vx= B[0]-A[0];
   var Vy= B[1]-A[1];
   var v = Math.sqrt(Vx*Vx+Vy*Vy);
   var Ux= Vx/v;
   var Uy= Vy/v;
   L[0]= B[0] - Uy*w - Ux*h;
   L[1]= B[1] + Ux*w - Uy*h;
   R[0]= B[0] + Uy*w - Ux*h;
   R[1]= B[1] - Ux*w - Uy*h;
   M[0]= B[0] - Ux*h2;
   M[1]= B[1] - Uy*h2;
   }

なお、基本線をＡからＭで描くと太い線でも線端が矢尻を突き抜けることが ありません。

 白抜きの矢印

点を増やして白抜きの矢印にします。

基本点Aは描画しません。
AR-MR-R-B-L-ML-AL-AR一周で矢印図形となります。

実際の計算プログラムを示します。

function arrowPos3(A,B,w,w2,h,h2,L,R,ML,MR,AL,AR){
   var Vx= B[0]-A[0];
   var Vy= B[1]-A[1];
   var v = Math.sqrt(Vx*Vx+Vy*Vy);
   var Ux= Vx/v;
   var Uy= Vy/v;
   L[0]  = B[0] - Uy*w  - Ux*h;
   L[1]  = B[1] + Ux*w  - Uy*h;
   R[0]  = B[0] + Uy*w  - Ux*h;
   R[1]  = B[1] - Ux*w  - Uy*h;
   ML[0] = B[0] - Uy*w2 - Ux*h2; // L[0]のwがw2,hがh2
   ML[1] = B[1] + Ux*w2 - Uy*h2;
   MR[0] = B[0] + Uy*w2 - Ux*h2; // R[0]のwがw2,hがh2
   MR[1] = B[1] - Ux*w2 - Uy*h2;
   AL[0] = A[0] - Uy*w2;
   AL[1] = A[1] + Ux*w2;
   AR[0] = A[0] + Uy*w2;
   AR[1] = A[1] - Ux*w2;
   }

 余談：放物線上の矢の動き

白抜きの矢印は当初、頭と尻がそれぞれ同じ放物線上を 少しずれて動くようにしていました。
放物線上の速度は頂上が遅く、左右の峰は下ほど速いので それをたどる２つの点の距離、即ち矢印の長さは、一定 ではありません。
それはそれで本記事の主眼から外れるものではなかったのですが、 一定の長さの矢印の方が見る人に違和感が少ないだろうと、 一定長になるよう変更しました。

すると、なんだか出来の悪い映画で見るCGの矢の動きのような、 確かにスムーズなんだけど、何かをなぞっているだけで 重み感がないものになってしまいました。

単なる線図に過ぎないので重み感や実物感など全く不要な はずなのに、なんだか気持が悪いのです。

そこで、矢の傾きを放物線の接線から少しずらすようにしました。 基本式を「矢の中心が放物線の接線をたどる」とした上で傾きが少し 遅延し接線からずれる形をとりました。

加えてx方向の速度を徐々に遅くしました。

本記事の目的から外れすぎますので、いずれ別記事で色々検討します。

 ###

2017/05/18
・ブラウザによっては式の一部でカラムずれが起こることに対処
 しかし、うまくいっていない。本当に英米のものは空白が難しい
・余計な雑談を削除