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

みなさん，こんにちは
おかしょです．

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

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

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

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

この記事を読む前に
3次元のアニメーションの準備
3Dと2Dを同時に表示する方法
文字が回転をしてしまう原因と回避法
まとめ
続けて読む
1. 共有:
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;
}

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