Processingの座標や並進方向・回転方向の確認

Processing

みなさん,こんにちは.
おかしょです.

みなさんはProcessingというソフトをご存知でしょうか.
このソフトは誰でも登録などしなくても無料でビジュアルアートが可能なプログラミングソフトです.

ビジュアルアートと聞くと,おかしょのような理系学生には縁がないように思えます.

しかし,このソフトが非常に便利です.
特に学会などでのプレゼンで大活躍します.

この記事ではそんなProcessingの基本となる,座標関係について実際に動かしながら解説していきます.

この記事を読むと以下のようなことがわかる・できるようになります.

  • Processingの座標軸の定義
  • Processingの座標の回転方向

 

この記事を読む前に

そもそもProcessingのインストール方法が知りたい方は,以下の記事から行ってください.

 

座標軸・方向の定義

これからProcessingではどのように座標軸や方向が定義されているのかを確認していきます.
その際に,実際にProcessingのプログラムを利用して確認していきます.

以下に実際に確認ができるプログラムを記載しておくので,皆さんもぜひ実際にProcessingで実行してみてください.

import processing.opengl.*;
int x = 0;
int y = 0;
int z = 0;
float angX = 0;
float angY = 0;
float angZ = 0;
void setup()
{
  background(255);  // 背景の色指定 白に指定
  size(500, 500, OPENGL);
}

void draw()
{
  background(255);
  translate(250, 250, 0);
  translate(x, y, z);
  rotateX(angX);
  rotateY(angY);
  rotateZ(angZ);
  box(50, 50, 50);
  
  x = x+1;
  //y = y+1;
  //z = z+1;
  //angX = angX+0.05;
  //angY = angY+0.05;
  //angZ = angZ+0.05;
}

 

並進方向の確認

まずは並進方向の確認をします.

その前に,上に示したプログラムの説明を簡単に行います.

確認をする際に変更する必要があるのはプログラムの最後の方にある,” // “でコメントアウトされている部分です.
このコメントされている部分の中から,確認したいことに関する部分をコメント解除することで確認ができるようになっています.コメントを解除する方法は,解除したいところにカーソルを持ってきて「Ctrl」+「/」を押すか,” // “を消すとコメント解除できます.


上のプログラムではすでにx=x+1がコメント解除されているので,x軸に関する確認ができます.

試しにこのプログラムを実行すると

このようなウィンドウが表示され,中央に四角形が描画されています.
この四角形は実は立方体で,時間とともに右に移動していきます.

このことから,x軸は左から右に向かう向きだということがわかります.

今度はy軸の確認をしてみます.
プログラムのyをコメント解除し,xをコメントアウトします.

コメントアウトはコメントアウトしたいところにカーソルを持ってきて「Ctrl」+「/」を押すか,” // “を頭に付けることでコメント化できます.

このようにして実行すると,y軸は上から下に向かう向きだと分かります.

同様にして,z軸も確認すると
四角形がだんだんと大きくなるため,画面奥から手前に向かう向きだと分かります.

 

回転方向の確認

次に回転方向の確認を行います.

回転方向の確認も先程と同様に,プログラムのコメントを解除することでできます.

さて,回転方向の表現の仕方について先に説明しておきます.
回転方向の表現は,よく右ねじの方向か否かで表現されます.
右ねじの方向というのは,まず右手の親指を軸の正の方向に向けて立てます.
そして,他の4本の指を軽く曲げます.
このときの4本の指が向いている向きが,回転の正の向きになります.

先程のプログラムを使ってx軸周りの回転方向を確認すると,右ねじの方向とは逆向きが回転の正の向きだということがわかります.

これは他の軸に関しても同様で,すべて右ねじの方向とは逆向きだということが確認できます.

 

まとめ

この記事ではProcessingの座標軸の向きがどのようになっているのかを解説しました.

最後に,座標の向きを表した図を以下に示します.

 

続けて読む

今回解説した座標軸の確認ができたら,アニメーションを作るのが非常に楽になります.

以下の記事ではロボットの姿勢角を表示するアニメーションを作っています.
ご興味のある方は読んでみてください.

Twitterでは記事の更新情報や活動の進捗などをつぶやいているので気が向いたらフォローしてください.

それでは最後まで読んでいただきありがとうございました.

コメント

タイトルとURLをコピーしました