ULprojectのホームページ © ULproject

HTMLでクォータニオン(quaternion) ( 2 回目 )   (by ULproject for HTML,JavaScript,canvas)   行列 (matrix)の代わりに四元数(しげんすう) (quaternion)を使用して見ました   今回はクォータニオンを行列に変換して ベクトルとの積を求めています       以後、四元数と行列を大文字、それ以外を 小文字で表します   このシリーズは、プログラム を 出来るだけ似せて 移植していますので、解説を省略しています 式などに関する説明も省略していますので 詳しくは N88-BASICでクォータニオン(quaternion) (2回目) を見てください   HTML,JavaScript,canvasは、使い慣れていない ため、不具合などが多々あると思いますが、 ご了承ください blg～.zip(quad002.html)は 以下のリンクからダウンロードできます VL-BASIC(N88-BASIC互換?)ホームページ Readme.txtを読んで遊んで下さい   動作は同じなので前回のHTMLのリンクと 行列での動画を貼っておきます quad001.htmlへのリンク 操作方法 //---------------------------------------------------------------------- //  1  2           |  1モデルモード 2ビューモード //                 | //  p  @  [  enter |  p左傾き    @上に移動  [右傾き   enter初期位置へ //  ;  :  ]        |  ;左に移動  :下に移動  ]右に移動 //                 | //    ↑            |          ↑機首下げ // ← ↓ →          | ←左旋回  ↓機首上げ  →右旋回 //                 | //  /  \(_)  +shift|  /後進  \(_)前進                +shiftで速く移動 //---------------------------------------------------------

2021/7/3(土) HTMLでクォータニオン (quaternion)  (1回目)   (by ULproject for HTML,JavaScript,canvas)   行列 (matrix)の代わりに四元数(しげんすう) (quaternion)を使用して見ました。     以後、四元数と行列を大文字、それ以外を 小文字で表します   このシリーズは、プログラム を 出来るだけ似せて 移植していますので、解説を省略しています 式などに関する説明も省略していますので 詳しくは N88-BASICでクォータニオン(quaternion) (1回目) を見てください   HTML,JavaScript,canvasは、使い慣れていない ため、不具合などが多々あると思いますが、 ご了承ください   JavaScriptでは、 Q[0]～Q[3]で回転四元数 Q[4]～Q[7]で並進四元数 として 複合四元数を表現しています blg～.zip(quad001.html)は 以下のリンクからダウンロードできます VL-BASIC(N88-BASIC互換?)ホームページ Readme.txtを読んで遊んで下さい quad001.htmlへのリンク 操作方法 //---------------------------------------------------------------------- //  1  2           |  1モデルモード 2ビューモード //                 | //  p  @  [  enter |  p左傾き    @上に移動  [右傾き   enter初期位置へ //  ;  :  ]        |  ;左に移動  :下に移動  ]右に移動 //                 | //    ↑            |          ↑機首下げ // ← ↓ →          | ←左旋回  ↓機首上げ  →右旋回 //                 | //  /  \(_)  +shift|  /後進  \(_)前進                +shiftで速く移動 //-------------------------------------------------------

2021/7/2(金) HTML で 行列 (matrix)   (2 回 目 )   (by ULproject for HTML,JavaScript,canvas)     点を並進、回転移動させる行列を作り ワイヤーフレーム (線画)の立体を ラジコンや自分が移動する (1,2キーで切り替え、キー操作はプログラムの 最終行のコメントに書いています ) ように動かしていきます   このシリーズは、プログラム を 出来るだけ似せて 移植していますので、解説を省略しています 式などに関する説明も省略していますので 詳しくは N88-BASICで行列(matrix) (2回目) を見てください HTML,JavaScript,canvasは、使い慣れていない ため、不具合などが多々あると思いますが、 ご了承ください   ここから、行列は大文字、 ベクトルとスカラーは小文字で表す事にします 行列は 4×4(4行4列)とし、 ベクトルは 3次元(4次元目は常に1)とします またベクトル上部の矢印は省いています   JavaScriptでは行列Aの成分を、 |A[0] A[4] A[ 8] A[12]| |A[1] A[5] A[ 9] A[13]| |A[2] A[6] A[10] A[14]| |A[3] A[7] A[11] A[15]| で表す事にします   r 11  = n 1 n 1 +(1-n 1 n 1 )cosθ r 22  = n 2 n 2 +(1-n 2 n 2 )cosθ r 33  = n 3 n 3 +(1-n 3 n 3 )cosθ r 12  = n 1 n 2 (1-cosθ)-n 3 sinθ r 21  = n 2 n 1 (1-cosθ)+n 3 sinθ r 13  = n 1 n 3 (1-cosθ)+n 2 sinθ r 31  = n 3 n 1 (1-cosθ)-n 2 sinθ r 23  = n 2 n 3 (1-cosθ)-n 1 sinθ r 32  = n 3 n 2 (1-cosθ)+n 1 sinθ となり、回転行列 A は   |r 11  r 12  r 13  0| A=|r 21  r 22  r 23  0|   |r 31  r 32  r 33  0|   |0     0     0   

2021/7/1(木) HTML で 行列 (matrix)   (1 回 目 )   (by ULproject for HTML,JavaScript,canvas)       点を並進、回転移動させる行列を作り ワイヤーフレーム (線画)の立体を ラジコンや自分が移動する (1,2キーで切り替え、キー操作はプログラムの 最終行のコメントに書いています ) ように動かしていきます   このシリーズは、プログラム を 出来るだけ似せて 移植していますので、解説を省略しています 式などに関する説明も省略していますので 詳しくは N88-BASICで行列(matrix) (1回目) を見てください   HTML,JavaScript,canvasは、使い慣れていない ため、不具合などが多々あると思いますが、 ご了承ください   ここから、行列は大文字、 ベクトルとスカラーは小文字で表す事にします 行列は 4×4(4行4列)とし、 ベクトルは 3次元(4次元目は常に1)とします またベクトル上部の矢印は省いています   JavaScriptでは行列Aの成分を、 |A[0] A[4] A[ 8] A[12]| |A[1] A[5] A[ 9] A[13]| |A[2] A[6] A[10] A[14]| |A[3] A[7] A[11] A[15]| で表す事にします     |1 0 0 x| A=|0 1 0 y|   |0 0 1 z|   |0 0 0 1| です   カレント行列 Mに対して M=MAはラジコンのような移動、 M=AMは自分が動く動作になり、 Modeの値で切替えています どちらも物体を動かす方向になり、 M=AMでは自分が逆向きに動く 指定方法になりますので注意が必要です プログラムではキー入力の所で、 M=AMの時は、符号を変える処理を しています   ベクトル p=(x,y,z)、p 1 =(x',y',z') Mを行列として上記式はp 1 =Mp と表せます 今回のベクトルは 3次元ですので 4次元目は無視(常に1と)します   blg～.zip(mat001.html)は 以下のリンクからダウンロードできます VL-BASIC(N88-BASIC互換?)ホームページ Readme.txtを読んで遊んで下さい 次

2021/6/27(日) N88-BASICでクォータニオン(quaternion) (2 回 目 )   (by ULproject for N88-BASIC,NL-BASIC) 行列 (matrix)の代わりに四元数(しげんすう) (quaternion)を使用して見ました。   今回は、四元数から行列を作り 回転移動させました   p = (x, y, z) q = (a, b, c) Q = (w, q) = (w, a, b, c) p'= QpQ~ p'= (w 2 -q･q)p+2(q･p)q+2w(q×p)   (w 2 -q･q)p  |w 2 -a 2 -b 2 -c 2  0 0||x| =|0 w 2 -a 2 -b 2 -c 2  0||y|  |0 0 w 2 -a 2 -b 2 -c 2 ||z|   (q･p)q =(ax+by+cz)q =(a 2 x+aby+acz,bax+b 2 y+bcz,cax+cby+c 2 z) |a 2  ab ca||x| =|ab b 2  bc||y|  |ca bc c 2 ||z|   (q×p) =(bz-cy, cx-az, ay-bx) =(bz,cx,ay)-(cy,az,bx)    | 0 -c  b||x| =| c  0 -a||y|  |-b  a  0||z|   w 2 +a 2 +b 2 +c 2  = 1よりw 2  = 1-a 2 -b 2 -c 2     p'= QpQ~ = (w 2 -q･q)p+2(q･p)q+2w(q×p)    |w 2 -a 2 -b 2 -c 2 +2a 2  2(ab-wc) 2(ca+wb)||x| =|2(ab+wc) w 2 -a 2 -b 2 -c 2 +2b 2  2(bc-wa)||y|  |2(ca-wb) 2(bc+wa) w 2 -a 2 -b 2 -c 2 -2c 2 ||z|    |1-2(b 2 +c 2 )  2(ab-wc)  2(ca+wb)||x| =| 2(ab+wc) 1-2(c 2 +a 2 )  2(bc-wa)||y|  | 2(ca-wb)  2(bc+wa) 1-2(a 2 +b 2 )||z|   並進移動 T=(0,tx,ty,tz)を入れると p&#

2021/6/25(金) N88-BASICでクォータニオン(quaternion)  (1回目) (by ULproject for N88-BASIC,NL-BASIC)   行列 (matrix)の代わりに四元数(しげんすう) (quaternion)を使用して見ました。       以後、四元数と行列を大文字、それ以外を 小文字で表します   四元数は複素数 (2元)の四元版です。 ii = jj = kk = -1 ij =  k, jk =  i, ki =  j ji = -k, kj = -i, ik = -j となる、 i,j,kを定義します。   複素数      c  = a + bi 共役複素数  c~ = a - bi (cにオーバーバーですがここではc~ とします。 ) 四元数      Q  = a + bi + cj + dk 共役四元数  Q~ = a - bi - cj - dk   複素数は複素平面上の点 cを表せます。   四元数では 1つの実数wと三次元空間 の点 q=(x,y,z)を表すことにします。   Q = w + ix + jy + kz   = (w, x,y,z)   = (w, q) wはスカラー、qはベクトル i,j,kがx,y,z軸の単位ベクトル になっているのに似ています。 q = (x,y,z) = ix + iy + kz   四元数の積 Q   =  w  +  ix  +  jy  +  kz Q' =   w' +  ix' +  jy' +  kz'   QQ' =  ww'+ wix'+ wjy'+ wkz' + ixw'+iixx'+ijxy'+ikxz' + jyw'+jiyx'+jjyy'+jkyz' + kzw'+kizx'+kjzy'+kkzz'       =  ww'+ wix'+ wjy'+ wkz'     + ixw'-  xx'+ kxy'- jxz'     + jyw'- kyx'-  yy'+ iyz&