#author("2020-11-09T17:26:13+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アップロードフォルダ「第01回」に自身の学籍番号のフォルダ(アルファベット大文字,例:20FI999)を''自身で作成し'',その中に各課題,指定された名前で完成させたスケッチフォルダごとアップロードしてください. ''提出締め切り:11月13日(金) 18:00'' BOXアップロードフォルダの招待メールが来ていない,また,WebClassで本講義が見えない方は森谷まで連絡ください. **課題1 [#p88bf156] setup関数,draw関数を導入して,カメラが原点を注視しながらY軸回転するアニメーションを作成せよ. 提出フォルダ名: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 実装例:&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 -参考:国産モデリングソフト [[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度以下になった場合、~ カメラの上下方向が反転してしまうため、値を制限する必要がある。 ここで基準ベクトルとあるが,Processingには標準でベクトルを扱うクラス[[PVector:https://processing.org/reference/PVector.html]]が用意されている.ただし,まだクラスを学習していない場合もあるので,ある3次元ベクトルvがあったとすると,XYZ成分それぞれを変数で, float vx = 0; float vy = 0: float vz = 10; としてもよい. #ref(./updown.png); 左右方向も行う場合には,マウスX方向の移動量の総和を角度φとして、X軸に回転させた基準ベクトルをさらにY軸回転させればよい.左右は回転角の制限は不要である. #ref(./leftright.png); 参考:X軸回転,Y軸回転の計算(3年前期CGモデリングおよび演習より) #ref(./rotx.png,50%); #ref(./roty.png,50%);