メディア演習C(CG)/第1回

準備・座標系 †

Processingの導入および，Processingにおける座標系など基本的な事柄について解説していきます．

Processing †

本講義ではProcessingの最新版を使用して進めていきます．

3Dにする †

Processingで3Dを使用する場合は，size関数の引数を変更します．

size(640, 480, P3D);

前2つは画面のサイズです．3番目の引数に「P3D」という文字列が加わっています．これは図形を描画するレンダリングエンジンの指定で，P3Dを指定することにより3Dのレンダリングが可能になります．

トラブルシューティング：

P3Dを加えると，実行に非常に時間がかかる，もしくは実行ウインドウが出てこず実行されない⇒ウイルス対策ソフト（ウイルスバスターなど）を一時的に終了，もしくはアンインストールしてください

• ウイルスバスター クラウドを一時停止する方法 | サポート Q&A：トレンドマイクロ
  https://esupport.trendmicro.com/support/vb/solution/ja-jp/1314020.aspx

• Processing P3D windows takes 30 seconds to 1 minute to appear ... · Issue #4239 · processing/processing · GitHub
  https://github.com/processing/processing/issues/4239

実行した後表示されるウインドウがタスクバーにめり込む

size関数後，

surface.setLocation(200, 200);

でウインドウ位置を変更することで回避できます．

描いてみる †

3次元の座標軸をline関数で描いてみます．今までと異なり，引数が増えていることに注目してください．前半3つが始点（AX，AY，AZ），後半3つが終点（BX，BY，BZ）です．それぞれX軸：赤，Y軸：緑，Z軸：青で色分けしています．

stroke(255, 0, 0);
line(0, 0, 0, 100, 0, 0);
stroke(0, 255, 0);
line(0, 0, 0, 0, 100, 0);
stroke(0, 0, 255);
line(0, 0, 0, 0, 0, 100);

結果を見てみると特に変化がなく2次元で描画されているように見えます．

カメラ †

結果が2Dにしか見えないのは，カメラの配置のためです．デフォルトではカメラ位置は次のように設定されています．

camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0);

Processingではデフォルトで左手座標系なので以下のようになります．

カメラの位置，注視点を変更してみます．

camera(100, -100, 100, 0, 0, 0, 0, 1, 0);

X軸，Y軸，Z軸が表示され，3Dであることが確認できました．

カメラの位置は以下のようになっています．

課題の提出先・提出方法 †

招待されているBoxアップロードフォルダ「第1回」に自身の学籍番号のフォルダ（アルファベット大文字，例：20FI999）を自身で作成し，その中に各課題，指定された名前で完成させたスケッチフォルダごとアップロードしてください．

提出締め切り：4月23日（火） 23:59

BOXアップロードフォルダの招待メールが来ていない，また，WebClassで本講義が見えない方は森谷まで連絡ください．

課題1 †

setup関数，draw関数を導入して，カメラが原点を注視しながらY軸回転するアニメーションを作成せよ．

提出フォルダ名：BASIC1_1

実装例：kadai1.mp4（名前を付けて保存，もしくは閲覧パスを入力）

• setup，draw関数の説明(コンピュータプログラミングIより)
  https://www.mlab.im.dendai.ac.jp/programming/2021/intro/lesson03.html#(4)

• 回転運動(コンピュータプログラミングIより)
  https://www.mlab.im.dendai.ac.jp/programming/2021/intro/lesson03.html#(13)

課題2 †

課題1を改良し，マウスのいずれかのボタンをクリックしている間にマウスを動かすとカメラの高さ（y位置）を変更できるようにせよ．

＊マウスボタンを離すとカメラ高さが元に戻ったり，クリックする度にカメラ高さが瞬時に切り替わったりするのはNG

ヒント：カメラ高さにマウスの1フレーム前からのY軸移動量を足せばよい（もしくは引く）

ヒント：前フレームのマウスY軸位置は自身でグローバル変数を作り保存してもよいが，以下リンク先にある通り，1フレーム前のマウス位置はよく使用するので組み込み変数pmouseX，pmouseYで用意されている

提出フォルダ名：BASIC1_2

実装例：kadai2.mp4（名前を付けて保存，もしくは閲覧パスを入力）

• マウスのボタンが押されているかの判断(コンピュータプログラミングIより)
  https://www.mlab.im.dendai.ac.jp/programming/2021/intro/lesson03.html#(19)

• マウスの座標の取得(コンピュータプログラミングIより)
  https://www.mlab.im.dendai.ac.jp/programming/2021/intro/lesson03.html#(16)

課題3（任意） †

現在，一般的な3DCGソフトでは，マウスのいずれかのボタンを押しながらマウスを動かすことで，「ある一点を注視しながら（注視する点を注視点と呼ぶ），注視点を中心に配置された仮想の球上をカメラが移動する」というカメラ制御方法が一般的である．それを再現，実装せよ．

提出フォルダ名：ADVANCE1_1

• 参考：国産モデリングソフト Metasequoia 4
  Metasequoia4.mp4

実装例（座標軸だけではカメラの動きが分かりづらいためsphere関数で球を配置している）

ヒント †

実装方法の一例を示す。

まずは、カメラの移動を、上下方向と、左右方向の2パターンに分けて考える。

上下方向の場合、まずは、カメラの初期位置となる位置ベクトルを用意する。ここではそれを基準ベクトルと呼ぶことにする．
マウスY方向の移動量の総和を角度θとして、基準ベクトルを、
X軸回りに、θ度回転させた位置が、新たなカメラの位置となる。
これで、上下方向の移動が実現できる。

ただし、θが+90度以上、もしくは-90度以下になった場合、
カメラの上下方向が反転してしまうため、値を制限する必要がある。

ここで基準ベクトルとあるが，Processingには標準でベクトルを扱うクラスPVectorが用意されている．ただし，まだクラスを学習していない場合もあるので，ある3次元ベクトルvがあったとすると，XYZ成分それぞれを変数で，

float vx = 0;
float vy = 0:
float vz = 10;

としてもよい．

左右方向も行う場合には，マウスX方向の移動量の総和を角度φとして、X軸に回転させた基準ベクトルをさらにY軸回転させればよい．左右は回転角の制限は不要である．

参考：X軸回転，Y軸回転の計算（3年前期CGモデリングおよび演習より）

Top