CG

Grahics with Processig 7-6 座標変換と同次座標 htt://vilab.org 塩澤秀和

6-7 H. SHIOZAWA htt://vilab.org 6. * 座標系 座標系の変換 座標系 目盛りのつけかた 原点の位置 軸と 軸の方向 軸と 軸の目盛りの刻み 論理座標系 描画命令で使う目盛り ( 座標系 ) をつけかえることができる 論理座標系 描画命令で使う 座標 画面座標系 ウィンドウでのピクセル位置 座標系の変換 論理座標で描画命令を実行 画面座標でピクセルを設定 対応位置を数学的に計算する 画面座標系 ( wi, wi ) 論理座標系 (, ) OO wi wi 初期状態 ( 画面座標系 論理座標系 ) O wi wi O wi 描画用の原点をずらした例 wi

6-7 H. SHIOZAWA htt://vilab.org 6. * 座標変換 (.) 座標変換と幾何変換 座標変換 座標変換の合成 æ ç è いくつもの座標変換の 合成 で論理座標 画面座標を計算 幾何変換 ( 幾何学的変換 ) ö ø æ ç è 平行移動 拡大 縮小 回転 ö ø f æ ' ö ¾¾ ç è ' ø æ ' ö æ ç! ç è ' ø è wi wi ö ø 幾何変換関数 traslate(, ) 座標系を平行移動 ( 原点を移動 ) 軸方向に 移動 軸方向に 移動 Processigでは 軸は下向き scale(α, β) 座標系を拡大または縮小 軸方向 ( 左右 ) に α 倍 軸方向 ( 上下 ) に β 倍原点が中心に全体が拡大 rotate(θ) 座標系を回転原点中心に θ ラジアン回転 Processigで + 方向は時計回り 3

6-7 H. SHIOZAWA htt://vilab.org 6.3 * 幾何変換の効果 画面座標系 ( wi, wi ) OO wi wi O wi O wi 論理座標系 (, ) 平行移動 wi 拡大 縮小 wi OO wi wi OO wi wi 回転 wi wi

6-7 H. SHIOZAWA htt://vilab.org 6. * 幾何変換の数学表現 数式による表現 平行移動 ' ' + + 拡大 縮小 ' a ' b siq + cosq ベクトルと行列による表現 次変換 拡大 縮小と回転が表現可能 各自, 対応する行列を求めよ アフィン変換 すべての幾何変換を表現可能 回転 ' cosq - siq + ' 例 ) 原点を画面の (, ) に移動し, 座標 (5, 7) に点を打つと, 画面では (5, 7) に表示 例 ) 目盛りを横 倍, 縦 3 倍に拡大して, 座標 (5, 3) に点を打つと, 画面では (, 9) に表示 導出方法は 6. 参照 ' a ' c ' ' Û a c b d b d ì ' a + b + e í î' c + b + f なぜ平行移動は表現できないか? e f 定数項を付加 5

6-7 H. SHIOZAWA htt://vilab.org 6 6.5 * 同次座標表現 (.9) 同次座標表現 座標計算をしやすい形式 同次座標表現による変換行列同次座標表現による幾何変換 平行移動 拡大 縮小 回転 ' ' ' ' b a - cos si si cos ' ' q q q q ' ' f d c e b a 行列 つの掛け算で幾何変換を表せる ), ( ),, ( 次元直交座標 次元同次座標同じ座標

6-7 H. SHIOZAWA htt://vilab.org 6.6 * 幾何変換の合成 (.) O traslate O rotate void draw() { backgroud(); traslate(5, ); rotate(pi/); scale(.5,.5); // この後ハート描画 scale 7

6-7 H. SHIOZAWA htt://vilab.org 8 6.7 * 合成変換行列 (.8) 合成変換の数学表現 変換が 回 行列の積が 回 右上の例の合成変換を表す行列 - - 5.5.5 ) / cos( ) / si( ) / si( ) / cos( 5 wi wi wi wi wi P P!! 3 3 - \ 5 void draw() { backgroud(); traslate(5, ); // 変換 rotate(pi/); // 変換 scale(.5,.5); // 変換 3 // 図形描画

6-7 H. SHIOZAWA htt://vilab.org 6.8 変換行列の操作 (.5) 行列スタックの操作 システム変換行列 現在の座標系を示す行列 システム変換行列は幾何変換 (traslate, rotate, scale) の処理のたびに合成されていく ushatri() O ushatri で保存しておく ushatri() rotate(pi/) scale(.5,.5) // ハート描画 システム変換行列 ( 現在の座標系 ) を一時待避する oatri() 最近保存した変換行列を戻す oatri でもとに戻せる ushatri() と必ず対にする resetatri() O 変換行列をリセットする画面座標系 論理座標系の初期状態に戻す oatri() 9

6-7 H. SHIOZAWA htt://vilab.org 6.9 幾何変換と行列操作の例 // 描画の原点を移動する例 float bai.; void setu() { size(, ); rectode(center); framerate(3); void draw() { backgroud(55); traslate(, ); scale(bai); strokeweight(); fill(8, 8, 55); rect(,, 5, 5); bai +.; if (bai > 8.) bai.; // 行列の ush と o の例 void setu() { size(6, ); rectode(center); oloo(); void draw() { backgroud(#88e); ushatri(); traslate(, ); fill(#ffdd); rect(,, 5, 5); oatri(); ushatri(); traslate(, ); rotate(radias(5)); fill(#ffff); rect(,, 5, 5); oatri();

6-7 H. SHIOZAWA htt://vilab.org 6. * 演習課題 課題 6. はスマイリー ( にこちゃん ) を つ描画するプログラムである 問 ) 中心と外側の顔の描画位置を決めている合成変換行列 ( 中心と 外側 ) の両方を求めなさい 中心は右のヒント参照式は6.5を参考に簡単化せよ 次回,A レポート用紙で提出 問 ) このプログラムに幾何変換の関数を つ加えて, 外側の顔の大きさを半分にして, 顔の向きは回転しないようにしなさい ただし, 顔を描画する関数は, 変更したり追加したりしないこと プログラムと画面イメージを提出 問 の 中心のヒント 中心は次のつの変換の合成 traslate(, ) rotate(-a) それぞれの行列表現は cos( -a) - si( -a) si( -a) cos( -a) 中心はこの つの合成なので cos( -a) si( -a) - si( -a) cos( -a)

6-7 H. SHIOZAWA htt://vilab.org 6. 演習課題 ( 続き ) void setu() { size(, ); framerate(3); void draw_smile() { elliseode(center); strokeweight(3); stroke(); fill(#ffff); ellise(,,, ); ostroke(); fill(); ellise(-5, -5,, ); ellise( 5, -5,, ); stroke(#ff); ofill(); bezier(-5,, -, 35,, 35, 5, ); void draw() { float a radias(framecout); backgroud(55); traslate(, ); // 原点移動 // ushatri(); rotate(-a); draw_smile(); のところ oatri(); の座標系は // 同じになる ushatri(); rotate(-a); traslate(3, ); // ここにつ幾何変換を追加する draw_smile(); oatri(); //

6-7 H. SHIOZAWA htt://vilab.org 6. 参考 : せん断と鏡映 (.6) せん ( 剪 ) 断 / スキュー / シアー 斜めにゆがめる変換 座標系を平行四辺形にゆがめる 変換後も平行関係は保たれる shearx( 角度 ) 軸方向のせん断 軸より上は左に, 軸より下は右にずれていくように歪める 軸を指定の角度だけ傾ける ' + a ' (a taθ) sheary( 角度 ) 鏡映 ( 反転 ) 軸方向のせん断 ' ' b + 負の拡大縮小変換 軸または 軸を基準に反転 例 ) scale(-, ) 図の例の変換式 ' ( ) ' (b taθ) 3

6-7 H. SHIOZAWA htt://vilab.org 6.3 参考 : 回転行列の導出 初期位置, θ 回転後 %, % ì r cosf ì' r cos( f + q ) í í î r sif î ' r si( f + q ) %, % r r, θ r siφ φ O r cosφ 展開計算 ( 加法定理 ) ' r ' r ( cosf cosq - sif siq ) r cosf cosq - r sif siq cosq - ( sif cosq + cosf siq ) cosq + siq + siq r sif cosq + 行列形式 siq cosq r cosf siq ' cosq - siq ' siq cosq

6-7 H. SHIOZAWA htt://vilab.org 6. 参考 : 図形移動での考え方 (.9) 座標変換の別の解釈 座標系の移動ではなく, 同じ画面座標系上での図形の移動として考えることもできる その場合, 描画からさかのぼって, 図形に命令の逆順で変換を作用させる 数学的に等価 結果はどちらも同じ O %%, %% rotate %, % scale traslate, 右図の例 traslate(5, ); rotate(pi/); scale(.5,.5); oit(, ); 下から順に作用させる %%%, %%% 描画位置 5

6-7 H. SHIOZAWA htt://vilab.org 6.5 参考 : 三角関数の関係式 cos θ + π si θ + π si θ cos θ cos π θ si π θ si θ cos θ cos π θ cos θ si π θ si θ cos θ ± π cos θ si θ ± π si θ θ θ cos θ si θ cos θ cos θ si θ si θ cos 3π θ cos π θ si θ si 3π θ si π θ cos θ cos θ π si θ π si θ cos θ 6

6-7 H. SHIOZAWA htt://vilab.org 6.6 参考 : 行列計算の確認 a b e c d f a + b + e c + d + f i 行目 a @ b @ e @ c @ d @ f @ j 行目 a A b A e A c A d A f A 左の行列の i 行目と右の行列の j 列目の内積 積の行列の i 行 j 列 i 行 j 列 a @a A + b @ c A a @ b A + b @ d A a @ e A + b @ f A + e @ c @ a A + d @ c A c @ b A + d @ d A c @ e A + d @ f A + f @ 7