Processingで3次元のアニメーションに2次元の図形や文字を描く方法

Processing

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

Processingでアニメーションを作るとき,3次元の図形と2次元の図形を同時に表示したり,3次元のアニメーションに文字などを表示したくなります.

私は学会の発表などでアニメーションを使うことがあるのですが,数値シミュレーションの結果を3Dアニメーションだけではわかりずらいので時系列グラフやデータも同時に表示させたくなります.そのようなときにどうやって3次元の図と2図を同時に表示できるようにするのかを解説します.

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

  • 3次元のアニメーションに2次元の文字や図形を表示する方法
  • 2次元の図形を回転させないようにする方法

 

この記事を読む前に

2次元の図形などを表示するには,表示させる座標を指定する必要があります.

Processingの座標の定義は以下の記事で解説しているので,そちらを先に読んでおくことをおすすめします.

 

3次元のアニメーションの準備

3次元の図形と2次元の図形を同時に表示するために,まずは3次元のアニメーションを準備します.

今回は例として直方体を回転させたいと思います.

そのプログラムは以下になります.

import processing.opengl.*;

void setup()
{
  background(0);  // 背景の色指定 黒に指定
  size(displayWidth,displayHeight, OPENGL);  // windowのサイズを画面いっぱいにする
}

void draw()
{
  background(0);  // 背景の色指定 黒に指定
  translate(width/2, height/2, 0);  // 原点を画面の中心に
  stroke(255);  // 枠線の色を白に指定
  fill(150);  // 灰色に塗りつぶし
  box(100, 50, 30);  // 直方体の作成
}

この結果,以下のような画面が表示されます.

これでは3次元の直方体だということがわかりにくいので,この直方体を回転させます.y軸周りに回転させることのできるrotateYというコマンドを使って回転させます.

そのプログラムは以下になります.

import processing.opengl.*;

float angle = 0.0;

void setup()
{
  background(0);  // 背景の色指定 黒に指定
  size(displayWidth,displayHeight, OPENGL);  // windowのサイズを画面いっぱいにする
}

void draw()
{
  background(0);  // 背景の色指定 黒に指定
  translate(width/2, height/2, 0);  // 原点を画面の中心に
  rotateY(angle);
  stroke(255);  // 枠線の色を白に指定
  fill(150);  // 灰色に塗りつぶし
  box(200, 50, 100);  // 直方体の作成
  angle += 0.01;
}

float型のangleという変数を用意して,回転角度を設定しています.
このプログラムの結果,直方体がゆっくり回転します.

ここに2Dの何かを表示していきます.

 

3Dと2Dを同時に表示する方法

今回は先ほどの3Dの直方体に加えて,直方体の回転角度を表す文字を2Dで表示したいと思います.

3Dのアニメーションに2Dの図形や文字などを表示するには“hint”というコマンドを使います.

使い方は非常に簡単で,2Dの描画を行うプログラムを
hint(DISABLE_DEPTH_TEST)hint(ENABLE_DEPTH_TEST)で囲むだけです.

文字だけで説明してもわかりずらいかもしれませんが,今回のように文字を表示したい場合は以下のようにします.

  hint(DISABLE_DEPTH_TEST);  // z軸を無効化
  textSize(height*0.1);  // 文字の大きさ
  textAlign(CENTER);  // 文字の座標指定位置
  text(angle, 0, 200);  // 使用センサ描画
  hint(ENABLE_DEPTH_TEST);  // z軸を有効化

プログラム中にもコメントで書いてありますが,hint(DISABLE_DEPTH_TEST)で座標軸のz軸を無効化します.このようにすることで,2Dの描画をxy平面に書くことができます.

2Dの描画が終わったらhint(ENABLE_DEPTH_TEST)でz軸を再度有効化します.

これを先程のプログラムに追加した結果,以下のように表示されました.

ちゃんと文字が表示され,直方体が回転するとともに回転角度が表示されました.

しかし,時間が経って直方体が回転すると…

文字も回転してしまいました…

 

文字が回転をしてしまう原因と回避法

先程使用したコマンドhintはz軸を無効化するもので,xy平面に文字を描画できるようにしていました.

また,直方体の回転にはY軸周りに回転させるrotateYを使用しました.
その結果,XY平面が回転してしまい,文字も回転してしまったのだと思います.

そこで,rotateYで回転させboxで直方体を表示した後に,rotateYで逆回転に同じ角度回転させてから文字を表示することで,文字だけが回転するのを防ぎます.

そのプログラムは以下のようになります.

import processing.opengl.*;

float angle = 0.0;

void setup()
{
  background(0);  // 背景の色指定 黒に指定
  size(displayWidth,displayHeight, OPENGL);  // windowのサイズを画面いっぱいにする
}

void draw()
{
  background(0);  // 背景の色指定 黒に指定
  translate(width/2, height/2, 0);  // 原点を画面の中心に
  rotateY(angle);
  stroke(255);  // 枠線の色を白に指定
  fill(150);  // 灰色に塗りつぶし
  box(200, 50, 100);  // 直方体の作成
  rotateY(-angle);
  hint(DISABLE_DEPTH_TEST);  // z軸を無効化
  textSize(height*0.1);  // 文字の大きさ
  textAlign(CENTER);  // 文字の座標指定位置
  text(angle, 0, 200);  // 使用センサ描画
  hint(ENABLE_DEPTH_TEST);  // z軸を有効化
  angle += 0.01;
}

このプログラムを実行した結果以下のようになります.

このように文字が回転することなく,直方体のみを回転させることができました.

 

まとめ

この記事では3Dのアニメーションに2Dの文字を表示する方法について解説しました.プログラムでは文字の表示を行いましたが,2Dの図形も同じようにして表示することができます.

hint(DISABLE_DEPTH_TEST)とhint(ENABLE_DEPTH_TEST)で2Dのプログラムを囲むだけなので非常に簡単です.

 

続けて読む

ただ,今回は3Dの回転によって文字も回転してしまうという問題があり,その解決策も解説しました.

しかし,もう一つ大きな問題があります.

それが視点です.視点を変更すると,3Dの見え方が変わるのでxy平面の見え方が変わります.つまり,文字もxy平面と同じように傾いて見えてしまいます.

これに対しても対応できるようにしなければ,3Dのアニメーションと2Dのものを同時に表示しても意味がありません.

この問題の解決方法は以下の記事で解説しているので,そちらを参照してください.

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

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

コメント

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