見出し画像

XYZ(not your zipper)

P3Dを使って図形を3次元のものとして回転することができました。

そもそも画面上の3次元とはどういったものか?というのを少し調べたいと思います。

平面上で表現される立体

パソコンの画面は2次元なので描画されるものは擬似的に奥行きが追加されています。(将来的に画面に手を突っ込んで操作できるようになるかもしれない)
まぁそんなことはわかりきったことですが。以下のサイトがわかりやすいのでそのまま載っけておきます。

画面のサイズを決定するsize(x, y)で横方向のx、縦方向のyが設定されます。そこに奥行き(画面に棒を突き刺してるイメージ)のzが追加されます。

右手系?左手系?

前回の最後にxとyの回転について触れました。
mouseXとmouseYに応じて感覚的に図形を回転させることが目的でした。
感覚的に』というのは画面をなぞるようにマウスを動かした時にその方向に図形が回転することを意味しています。

まずはこの回転のルールについて。

上記のx, y, zの軸が決定した時にそれぞれの軸を中心にして回転の方向が決まっています。

このx, y, zにも2種類、右手系と左手系があるそうです。使い方の違いは読んでもよくわからないので、実践あるのみ。前回のコードでやってみましょう。

void setup(){
size(800, 600, P3D);
noStroke();

}

float angleX = 0; 

void draw(){
background(0);
for(int x = 150; x < width-100; x += 100){
  for(int y = 100 ; y < height-50; y += 100){
		 pushMatrix();
		 translate(x, y);
		 rotateX(radians(angleX));
		 
   ellipse(0, 0, 50, 50);
   popMatrix();
		 }
	 angleX += 1;
}
}

一旦Y軸方向は除いて、X軸の回転についてのみ考えます。上記のコードでは1ずつ角度が増加していきます。回転の向きは手前から奥に向かっていくように見えます。

次はマイナス方向にしてみましょう。

回転の向きが逆になりました。と、言うことは手前から奥に向かっていく方向が正で奥から手前にくるのが負の方向になります。

左手系は視点座標系とも呼ばれ、座標原点に視点を置いた座標系である。視点と原点の位置関係を考慮せずにすむため、図形をスクリーン(2次元平面)に表示する場合に有効である。

で、これを考える時には左手系を使用します。

少し話がそれますが、仕事上でジャイロセンサーについて学ぶ機会があり、その時に上記のような左手系、右手系の話がでたことがあります。よくわからないのでエンジニアさんの言うとおりにしてました。『右手系を使え』と。(なぜか、はわからない)

リンク先をよく読むとそれぞれで用途が異なるようです。

右手系はワールド座標系
左手系は視点座標系

右手がどういう時に使用されるのかはわかりませんが、一旦左手系は理解しました。

これは非常にわかりやすい。
画面に向かって左手で『L』を作る。親指がX軸、人差指がY軸。そこに中指を画面に刺すように立てれば視点座標系の完成。

回転

本題に戻りましょう。

回転はそれぞれの軸方向で決まっています。
会社でジャイロセンサーを覚えたときは『右ねじ』と教わりました(右手系の話)。それぞれの指が向かう先(正方向)に『いいね!』の親指を上げた方向で、親指以外が曲がっている方向が回転する正方向になります。

左手はこの回転方向が逆になります。以下、私の覚え方。

右手の親指と人差し指で輪を作ります(OK!の指の形)。この穴に、上記で作った左手系のそれぞれの指(軸)を差し込むようにすると、回転の方向がわかります。

X軸は親指。右方向を指しています。それを右手で作った輪に差し込むと、正の回転方向が奥に向かうことがわかります。なので一番最初のコードの回転方向と合っていますね。

感覚的にするには

この仕組みが分かった時点でまた戻ります。
rotationXをmouseX方向に合わせてしまうとどうなるか。

マウスは左右に動きます。それに合わせて図形はX軸を中心に回るので、奥行きに向かって回転をします。これを現実世界の動きに当てはめると、すごくおかしなことになります。

本のページをめくろうとしたら、本の上下が回転した。

これはこれで起きたらすごいおもしろいかも。

なのでマウスを左右に動かしたら、感覚的に図形は同じ方向で回転して欲しいです。そのときはどうするか。左右の回転は上下方向であるY軸を中心にすれば良いのでrotationYをmouseXの動きと連動させれば、希望通りの動きをしてくれます。

Z は?

画面内の図形をX軸とY軸方向で感覚的に動かせることは理解できました。
ではZはマウスのどの動きに反応させればより感覚的に動かせるのでしょうか。
画面上にはx座標とy座標しかありません。

さて、どうすればよいのか。。。。
これも無期限の宿題にします。

(ちなみに英語でXYZと言うのは、『examine your zipper』の略で『ズボンのジッパー開いてますよ』という意味になるらしいです)


この記事が気に入ったらサポートをしてみませんか?