#author("2020-09-21T15:07:04+09:00","default:kyo-in","kyo-in")
#author("2020-09-27T19:47:08+09:00","default:kyo-in","kyo-in")
**準備・座標系 [#te0a196b]
Processingの導入および,Processingにおける座標系など基本的な事柄について解説していきます.

**Processing [#ha63c0f4]
本講義ではProcessingの[[最新版:https://www.processing.org/download/]]を使用して進めていきます.

**3Dにする [#u063fef1]
Processingで3Dを使用する場合は,size関数の引数を変更します.

 size(640, 480, P3D);

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

''トラブルシューティング:''

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

-ウイルスバスター クラウドを一時停止する方法 | サポート Q&A:トレンドマイクロ&br;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&br;https://github.com/processing/processing/issues/4239

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

size関数後,

 surface.setLocation(200, 200);

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

**描いてみる [#f39ea13c]
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次元で描画されているように見えます.

#ref(./firststep.png);

**カメラ [#j7d8f419]
結果が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ではデフォルトで左手座標系なので以下のようになります.

#ref(./world.png);

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

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

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

#ref(./secondstep.png);

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

#ref(./changecam.png);

**課題の提出先・提出方法 [#h475884f]
招待されているBoxアップロードフォルダ「メディア演習C(CG)前後期」へ,完成させた各課題のスケッチフォルダをまとめてZIP圧縮したファイルを以下の名前でアップロードしてください.
招待されているBoxアップロードフォルダ「第01回」に自身の学籍番号のフォルダ(アルファベット大文字,例:20FI999)を''自身で作成し'',その中に各課題,指定された名前で完成させたスケッチフォルダごとアップロードしてください.

ファイル名:XXFIXXX_1st.zip(例:19FI999_1st.zip)
''提出締め切り:10月2日(金) 18:00''

''提出締め切り:6月24日(水) 18:00''

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

**課題1 [#p88bf156]
setup関数,draw関数を導入して,カメラが原点を注視しながらY軸回転するアニメーションを作成せよ.

提出ファイル名:BASIC1_1.pde
提出フォルダ名:BASIC1_1

実装例:&ref(./kadai1.mp4);(名前を付けて保存,もしくは閲覧パスを入力)

-setup,draw関数の説明(コンピュータプログラミングIより)~
http://www.mlab.im.dendai.ac.jp/programming/intro/lesson03.html#(5)

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

**課題2(*任意課題に変更) [#fd3dd795]
課題1を改良し,マウスのいずれかのボタンをクリックしている間はカメラの高さ(y位置)を変更できるようにせよ.

提出ファイル名:BASIC1_2.pde
提出フォルダ名:BASIC1_2

実装例:&ref(./kadai2.mp4);(名前を付けて保存,もしくは閲覧パスを入力)

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

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

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

提出ファイル名:ADVANCE1_1.pde
提出フォルダ名:ADVANCE1_1

-参考:国産モデリングソフト [[Metasequoia 4:http://www.metaseq.net/jp/]]&br;
&ref(Metasequoia4.mp4);

実装例(座標軸だけではカメラの動きが分かりづらいため[[sphere関数:https://processing.org/reference/sphere_.html]]で球を配置している)&br;
#ref(rotcam.mp4);

***ヒント [#k3ec8bb6]
実装方法の一例を示す。

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

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

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

#ref(./updown.png);

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

#ref(./leftright.png);

参考:X軸回転,Y軸回転の計算(3年前期CGモデリングおよび演習より)
#ref(./rotx.png,50%);
#ref(./roty.png,50%);


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS