ULprojectのホームページ © ULproject

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/24(木) N88-BASICで 行列 (matrix)  (2 回 目 )   (by ULproject for N88-BASIC, NL-BASIC) 今回は、前回の併進移動に回転移動を追加します (キー操作はプログラムの最終行コメント参照)   前回同様、行列は大文字、ベクトルとスカラーは 小文字で、行列は 4×4(4行4列)とし、ベクトルは 3次元(4次元目は常に1)とします またベクトル上部の矢印は省いています   まず、位置ベクトル p=(x,y,z)を単位ベクトル n=(n 1 ,n 2 ,n 3 )まわりにθ度回転した 点 p'=(x',y',z')を求める式は   図 1 位置ベクトルの回転   |p'- q|=|p - q|, |a| = |p - q|cosθ a  = |a|(p - q)/|p - q|    = (p - q)cosθ = pcosθ - qcosθ   |n×p|はnとpでできる平行四辺形の 面積なので底辺 |n|=1と高さ|p - q|の積 |n×p| = |n||p - q| = |p - q|より、 b = |p - q|sinθ(n×p)/|n×p|   = (n×p)sinθ q = (n･p)n p'= q + a + b   = q+pcosθ-qcosθ+(n×p)sinθ   = pcosθ+(1-cosθ)q+(n×p)sinθ   p'= pcosθ+(1-cosθ)(n･p)n+(n×p)sinθ を、 p' =Rpの形に変形していきます   外積 a×bと内積a･bの成分表記について、 x,y,z軸方向の単位ベクトルをi,j,k、 a=(x,y,z),b=(x',y',z')とすると、   i×i = j×j = k×k = 0ベクトル i×j =  k , j×k =  i , k×i =  j j×i = -k , k×j = -i , i×k = -j より a×b = (ix + jy + kz)×(ix'+ jy'+ kz') = kxy'-jxz'-kyx'+iyz'+jzx'-izy' = (yz'

2021/6/22(火) N88-BASICで 行列 (matrix)   (1 回 目 )   (by ULproject for N88-BASIC, NL-BASIC) 点を併進、回転移動させる行列を作り ワイヤーフレーム (線画)の立体を ラジコンや自分が移動する (1,2キーで切り替え、キー操作はプログラムの 最終行のコメントに書いています ) ように動かしていきます   今回は併進移動です   ここから、行列は大文字、 ベクトルとスカラーは小文字で表す事にします 行列は 4×4(4行4列)とし、 ベクトルは 3次元(4次元目は常に1)とします またベクトル上部の矢印は省いています   行列の演算を 2×2で説明します 行列 Aのi行j列の成分をa ij で 表します。 A=|a 11  a 12 | B=|b 11  b 12 |   |a 21  a 22 |   |b 21  b 22 |   A+B=|a 11 +b 11  a 12 +b 12 |     |a 21 +b 21  a 22 +b 22 |   AB=|a 11  a 12 ||b 11  b 12 |    |a 21  a 22 ||b 21  b 22 | =|a 11 b 11 +a 12 b 21  a 11 b 12 +a 12 b 22 |  |a 21 b 11 +a 22 b 21  a 21 b 12 +a 22 b 22 |   ベクトルとの積は p=(x,y)を列ベクトルにして Ap=|a 11  a 12 ||x| = |a 11 x a 12 y|    |a 21  a 22 ||y| = |a 21 x a 22 y|   スカラー倍は kA=k|a 11  a 12 | = |ka 11  ka 12 |     |a 21  a 22 | = |ka 21  ka 22 |   4×4の行列の場合 Σa 1i b i1  (i = 1～4) = a 11 b 11 +a 12 b 21 +a 13 b 31 +a 14 b 41   |a 11  a 12  a 13  a 14 ||b 11  b 12  b 13  b 14 | |a 21  a 22  a 23  a 24 ||b 21  b 22  b 23  b 24 | |a 31