HTMLで行列(matrix) (1回目)
2021/7/1(木)
HTMLで行列(matrix) (1回目)
(by ULproject for HTML,JavaScript,canvas)
点を並進、回転移動させる行列を作り
ワイヤーフレーム(線画)の立体を
ラジコンや自分が移動する
(1,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]|
で表す事にします
|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)、p1=(x',y',z')
Mを行列として上記式はp1=Mp
と表せます
今回のベクトルは3次元ですので
4次元目は無視(常に1と)します
blg～.zip(mat001.html)は
以下のリンクからダウンロードできます
Readme.txtを読んで遊んで下さい
次回
