Microsoft PowerPoint - [150421] CMP実習Ⅰ(2015) 橋本 CG編第1回幾何変換.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - [150421] CMP実習Ⅰ(2015) 橋本 CG編第1回幾何変換.pptx"

はなすみい
5 years ago
Views:

1 コンテンツメディアプログラミング実習 Ⅰ コンピュータグラフィックス編 1 幾何変換橋本直

2 今日大事なのはプログラムをじっくり読んでなぜそうなるか? を考えよう命令によって起きていることを頭の中でイメージしよう 2

3 本題の前に確認 Processingでは画面の左上隅が原点 (0,0) x 軸の正の向きは右 y 軸の正の向きは下 x y : (0,0) 3

4 幾何変換の基本 4

5 幾何変換とは (Geometric Transformation) 図形の位置や姿勢変形を表現する変換のこと平移動回転拡大縮小反転せん断 CG ゲームロボティクス画像計測 VR AR などの分野でとても重要なテクニック! Processingのコードで説明しますが CG プログラミング般の概念です

6 平移動平移動の命令 translate( x 向の移動量, y 向の移動量 ); void setup() { size(300, 200); void draw() { translate( 150, 100 ); ellipse( 0, 0, 80, 80 ); x 150 y 100 (0,0) 80, 80 Q. 6

7 回転回転の命令 rotate( 回転角度 ); 原点中に時計回りの回転角度はラジアンで指定 void setup() { size(300, 200); 10 void draw() { rotate( radians(10) ); rect( 0, 0, 150, 100 ); (0,0) Q. 7

8 拡大縮小拡大縮小の命令 scale( x 向の拡大率, y 向の拡大率 ); 拡大率は1.0で等倍 void setup() { size(300, 200); void draw() { scale( 2.0, 1.0 ); rect( 50, 50, 80, 80 ); x 2 (50, 50) Q. 8

9 反転反転処理は scale() に負の値を指定することでう scale( -1, 1 ); 左右反転 scale( 1, -1 ); 上下反転 scale( -1, -1 ); 上下左右反転 PImage img; void setup() { size( 300, 200 ); img = loadimage("meiji.png"); meiji.png void draw() { translate( 200, 50 ); scale( -1, 1 ); image( img, 0, 0 ); Q. 9

10 せん断せん断の命令 shearx(α); x 向にせん断 (α は角度 ) sheary(β); y 向にせん断 (βは角度) 角度はラジアン単位で指定 shearx() と sheary() は Processing2.0 以降の機能 x x β y α y 10

11 せん断 PImage img; void setup() { size(300,200); img = loadimage("meiji.png"); void draw() { shearx( radians(30) ); image(img, 0, 0); 30 11

12 幾何変換で起きていること実は図形そのものが移動変形しているのではない! 図形がおかれている座標系が移動変形した結果として図形が移動変形したようにえている y x 12

13 すなわち translate() 座標系を平移動 rotate() 座標系を回転 scale() 座標系を拡大縮小反転 shearx() 座標系をx 向に歪ませる sheary() 座標系をy 向に歪ませるもう度個々のプログラムをてみよう 13

14 幾何変換の組み合わせ 14

15 幾何変換のルール 1 幾何変換をした後でさらに幾何変換をうと効果が組み合わさる 2 幾何変換の順番によって処理結果が異なる場合がある回転してから平移動平移動してから回転 3 般的な CG のプログラムにおいて幾何変換をうと特に指定がない限りその効果が継続しそれ以降に描く図形はすべてその変換の影響を受ける 15

16 連続的な平移動 for 文で連続的に translate() をやる例をてみようなぜこうなるか考えてみよう void setup() { size(400, 400); void draw() { background(150); for (int i=0; i<10; i++) { fill(i*20, 0, 0); rect(0, 0, 30, 30); translate(40, 40); 16

17 解説 for 文の処理を分解して考えてみよう i=0 のとき i=4 のとき fill(0*20, 0, 0); fill(4*20 0 0) rect(0, 0, 30, 30); translate(40, 40); fill(4*20, 0, 0); rect(0, 0, 30, 30); translate(40, 40); fill(1*20, 0, 0); rect(0, 0, 30, 30); translate(40, 40); i=1 のとき i=5 のとき fill(5*20, 0, 0); rect(0, 0, 30, 30); translate(40, 40); i=2 のとき fill(2*20, 20, 0, 0); rect(0, 0, 30, 30); translate(40, 40); ( 中略 ) fill(3*20, 0, 0); fill(9*20, 0, 0); rect(0, 0, 30, 30); rect(0, 0, 30, 30); translate(40, t 40); translate(40, 40); i=3 のとき i=9 のとき 17

18 translate() した後でさらにtranslate() すると座標系がどんどん移動していく四角形を (0, 0) に描いてるつもりでも座標系が動いてるので実際の描画位置はずれていく i=0 のとき i=1 のとき translate(40, 40) translate(40, 40) i=2 のとき i=3 のとき translate(40, 40) 18

19 回転と平移動の組み合わせ次のプログラムをよく読んでなぜそのような結果になるのか推理してみよう void setup() { size(350,350); void draw() { background(200); translate(200, 50); for (int i=0; i<12; i++) { fill(i*20, 0, 0); rect(0, 0, 40, 40); rotate(radians(30)); translate(60, 0); Q. 19

20 解説座標系を 30 度回転させた後で x 向に 60 平移動を繰り返しながら四角形を描いている 1 translate(200, 50) 2 rotate(radians(30) 3 translate(60, 0) 20

21 回転してから平移動と平移動してから回転は異なる結果を比較してみよう void setup() { size(400, 400); void draw() { background(200); rotate(radians(45)); translate(200, 100); void setup() { size(400, 400); void draw() { background(200); translate(200, 100); rotate(radians(45)); rect(0, 0, 160, 80 ); rect(0, 0, 160, 80 ); 21

22 幾何変換の効果はいつまで保持される? Processing において幾何変換の効果が保持されるのはdraw() の最後のまで次にdraw() が実される時に前回までの幾何変換の効果はリセットされるすなわち draw() の開始時点において座標系の原点は左上隅にあり平移動や回転はされていない状態になる 22

23 列スタック 23

24 幾何変換を物体ごとに指定したい幾何変換を繰り返していくと座標系の状態はどんどんど複雑になっていくこのままでは複数のオブジェクトを個別に異なる位置姿勢で配置したいときに不便例えばゲーム中でキャラクタ A B C がそれぞれ異なる位置と向きにいるようなシーン A 原点から平移動と回転を繰り返して A B C を順番に描いていくのは非常に面倒 24

25 列スタックオブジェクト群に対する幾何変換を階層的に表現できる列スタックと呼ばれる手法を使う CGの世界では幾何変換の情報は内部的に列に格納されていてそれをスタックというデータ構造で管理しているのでこう呼ぶ列スタックの命令 pushmatrix() 実するとその時点の幾何変換の状態を保存する popmatrix() pushmatrix() で保存した時点の幾何変換の状態を呼び出す 25

26 pushmatrix() と popmatrix() 使い幾何変換と描画命令の組を pushmatrix() と popmatrix() ではさむ必ず対にする pushmatrix(); translate(120, 120); rotate(radians(10)); ( rect(0, 0, 50, 50); popmatrix(); p 26

27 void setup() { size(300, 200); 使例 void draw() { pushmatrix(); translate(40, 40); rotate(radians(0)); rect(0, 0, 50, 50); popmatrix(); pushmatrix(); translate(200, 30); rotate(radians(40)); rect(0, 0, 50, 50); popmatrix(); pushmatrix(); translate(120, 120); rotate(radians(10)); rect(0, 0, 50, 50); popmatrix(); 27

28 階層的な幾何変換 pushmatrix() と popmatrix() は入れ子構造にすることができる連動する座標系を扱えるようになる移動する乗り物やリフトの上でさらに人が移動しているようなシーンや人やロボットの関節のようにリンク構造を持つ物体においてこのような法を使う 28

29 階層的な幾何変換の例 pushmatrix(); translate( ); rotate( ); drawlift(); pushmatrix(); translate( ); rotate( ); drawhumana(); popmatrix(); A B pushmatrix(); translate( ); rotate( ); drawhumanb(); popmatrix(); d H B() A B A B A B popmatrix(); 29

30 課題 1( スケッチ名 :mouse) マウスカーソル上で大きさ 100x100の正形が回転するプログラムを作りなさいただし正形の中がマウスカーソルの位置になるようにすること

31 課題 2( スケッチ名 :tworects) 画面内に2 個の回転する 100x50の形を描くプログラムを作りなさい回転中は形の中としは時計回りにもうは反時計回りに回転させること

32 課題 3( スケッチ名 :twocircles) 2つの円が直径 200の円軌道上を移動するプログラムを作りなさい

33 応編 ( スケッチ名 :coffeecup) 余裕のある人は遊園地にあるコーヒーカップを模したプログラムに挑戦してくださいカップが乗っている床全体を回転させなおかつ個々のカップも回転させること Photo from コーヒーカップ _( 遊具 )

CG

Grahics with Processig 7-6 座標変換と同次座標 htt://vilab.org 塩澤秀和 6-7 H. SHIOZAWA htt://vilab.org 6. * 座標系座標系の変換座標系目盛りのつけかた原点の位置軸と軸の方向軸と軸の目盛りの刻み論理座標系描画命令で使う目盛り ( 座標系 ) をつけかえることができる論理座標系描画命令で使う座標画面座標系

Microsoft PowerPoint - [150421] CMP実習Ⅰ(2015) 橋本 CG編 第1回 幾何変換.pptx

Microsoft PowerPoint - [150421] CMP実習Ⅰ(2015) 橋本 CG編第1回幾何変換.pptx