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

コンテンツ・メディア

コンテンツ メディア

プログラミング実習Ⅰ

コンピュータグラフィックス編①

幾何変換

幾何変換

橋本 直

今日大事なのは…

今日大事なのは…

y

プログラムをじっくり読んで「なぜそうなる

か？」を考えよう

か？」を考えよう。

y

命令によって起きていることを頭の中でイメ

ージしよう

ージしよう。

本題の前に確認

本題の前に確認

が

y

Processingでは画面の【左上隅】が原点 (0,0)

y

x軸の正の向きは【右】

x軸の正の向きは【右】

y

y軸の正の向きは【下】

x軸

左上隅が原点

: (0,0)

y軸

幾何変換の基本

幾何変換の基本

幾何変換とは

幾何変換とは

y

図形の位置や姿勢、変形を表現する変換のこと

⾏移動

◦

平⾏移動

◦

_回転

_回転

◦

_拡大縮小

転

◦

_反転

◦

_せん断

_せん断

y

CG、ゲーム、ロボティクス、画像計測、VR、ARなど

の分野でとても重要なテクニック！

y

Processingのコードで説明しますが、CGプログラミン

Processingのコ ドで説明しますが、CGプログラミン

グ⼀般の概念です。

平⾏移動

平⾏移動

⾏移動 命令

y

平⾏移動の命令

translate(

x⽅向の移動量 y⽅向の移動量

);

translate(

x⽅向の移動量

,

y⽅向の移動量

);

Q 何が起きている？

Q. 何が起きている？

回転

回転

回転 命令

y

回転の命令

rotate(

回転角度

);

rotate(

回転角度

);

◦

_{原点中⼼に時計回りの回転。角度はラジアンで指定。}

Q. 図形の回転中心はどこ？

拡大縮小

拡大縮小

拡大縮小 命令

y

拡大縮小の命令

scale(

x⽅向の拡大率 y⽅向の拡大率

);

scale(

x⽅向の拡大率

,

y⽅向の拡大率

);

◦

_{拡大率は1.0で等倍。}

Q 位置もずれている？

Q. 位置もずれている？

なぜこうなる？

反転

反転

y

反転処理は scale() に負の値を指定することで⾏う

y

反転処理は scale() に負の値を指定することで⾏う

scale(

-1

,

1

); … 左右反転

l (

1 1

)

上下反転

scale(

1

,

-1

); … 上下反転

scale(

-1

,

-1

); … 上下左右反転

せん断

せん断

せん断の命令

y

せん断の命令

shearX(

α

); … x⽅向にせん断（αは角度）

shearX(

α

);

x⽅向にせん断（αは角度）

shearY(

β

); … y⽅向にせん断（βは角度）

◦

_{角度はラジアン単位で指定。}

◦

_{shearX()とshearY()はProcessing2 0以降の機能}

◦

_{shearX()とshearY()はProcessing2.0以降の機能。}

x

x

β

α

y

y

せん断

せん断

30°

幾何変換で起きていること

幾何変換で起きていること

y

実は、図形そのものが移動・変形している

のではない！

のではない

y

図形がおかれている座標系が移動・変形し

y

図形がおかれている座標系が移動 変形し

た結果として、図形が移動・変形したよう

に⾒えている

に⾒えている。

x

y

すなわち

すなわち

y

translate() … 座標系を平⾏移動

otate()

座標系を回転

y

rotate()

… 座標系を回転

y

scale()

scale()

… 座標系を拡大縮小・反転

座標系を拡大縮小 反転

y

shearX()

… 座標系をx⽅向に歪ませる

y

shearY()

… 座標系をy⽅向に歪ませる

もう⼀度個々のプログラムを⾒てみよう

幾何変換の

組み合わせ

幾何変換のルール

幾何変換のルール

①幾何変換をした後でさらに幾何変換を⾏うと

効果が組み合わさる。

効果が組み合わさる。

②幾何変換の順番によって処理結果が異なる場

②幾何変換の順番によって処理結果が異なる場

合がある。

「回転してから平⾏移動」≠「平⾏移動してから回転」

「回転してから平⾏移動」≠「平⾏移動してから回転」

③⼀般的なCGのプログラムにおいて 幾何変

③ 般的なCGのプログラムにおいて、幾何変

換を⾏うと、特に指定がない限りその効果が

継続し それ以降に描く図形はすべてその変

継続し、それ以降に描く図形はすべてその変

換の影響を受ける。

連続的な平⾏移動

連続的な平⾏移動

f 文 連続的

l

()をや 例を⾒

y

for文で連続的にtranslate()をやる例を⾒てみ

よう。なぜこうなるか考えてみよう。

for (int i=0; i<10; i++) { fill(i*20, 0, 0); rect(0, 0, 30, 30); translate(40, 40); } 16 } }

解説

解説

y

for文の処理を分解して考えてみよう

y

for文の処理を分解して考えてみよう

i 0 のとき

_とき

i=0 のとき

_{i=4 のとき}

rect(0, 0, 30, 30); fill(5*20, 0, 0);_{rect(0, 0, 30, 30);}

i=1 のとき

_{i=5 のとき}

i=2 のとき

（中略）

i=2 のとき

i=3 のとき

i=9 のとき

y

translate()した後でさらにtranslate()すると、

()

()

座標系がどんどん移動していく

y

四角形を(0 0)に描いてるつもりでも 座標系

y

四角形を(0, 0)に描いてるつもりでも、座標系

が動いてるので、実際の描画位置はずれていく

回転と平⾏移動の組み合わせ

回転と平⾏移動の組み合わせ

次のプログラムをよく読んで なぜそのような結果に

y

次のプログラムをよく読んで、なぜそのような結果に

なるのか推理してみよう。

for (int i=0; i<12; i++) { fill(i*20, 0, 0); rect(0 0 40 40); rect(0, 0, 40, 40); rotate(radians(30)); translate(60, 0); }

_{Q 最初に描かれる四角形は}

Q. 最初に描かれる四角形は

どれだろうか？

解説

解説

y

「座標系を30度回転させた後でx⽅向に60平⾏

y

「座標系を30度回転させた後でx⽅向に60平⾏

移動」を繰り返しながら四角形を描いている。

「回転してから平⾏移動」と

回転してから平⾏移動」と

「平⾏移動してから回転」は 異なる

y

結果を比較してみよう

幾何変換の効果はいつまで保持

幾何変換の効果はいつまで保持

される？

される？

P ocessingにおいて 幾何変換の効果が保持

y

Processingにおいて、幾何変換の効果が保持

されるのは

draw()の最後の⾏まで。

y

次にdraw()が実⾏される時に、前回までの幾

何変換 効

何変換の効果はリセットされる。

始時点

座標

y

すなわち、draw()の開始時点において、座標

系の原点は左上隅にあり、平⾏移動や回転はさ

れていない状態になる。

⾏列スタック

⾏列スタック

幾何変換を物体ごとに指定したい

幾何変換を物体ごとに指定したい

幾何変換を繰り返

く 座標系 状態 ど ど

y

幾何変換を繰り返していくと座標系の状態はどんどん

複雑になっていく。このままでは複数のオブジェクト

を個別に異なる位置姿勢で配置したいときに不便

を個別に異なる位置姿勢で配置したいときに不便。

y

例えば、ゲーム中で

キャラクタA・B・Cが

_A

キャラクタA B Cが

それぞれ異なる位置と向き

にいるようなシ ン

A

にいるようなシーン。

y

原点から平⾏移動と回転を繰り返してA、B、Cを順番

に描いていくのは非常に面倒。

⾏列スタック

⾏列スタック

オブジ クト群に対す 幾何変換を階層的に表現 き

y

オブジェクト群に対する幾何変換を階層的に表現でき

る「⾏列スタック」と呼ばれる手法を使う。

y

CGの世界では、幾何変換の情報は内部的に「⾏列」に

格納されていて、それを「スタック」というデータ構

造 管

呼ぶ

造で管理しているのでこう呼ぶ。

y

⾏列スタックの命令

pushMatrix()

pushMatrix()

◦

_{実⾏すると、その時点の幾何変換の状態を保存する。}

popMatrix()

popMatrix()

◦

_{pushMatrix()で保存した時点の幾何変換の状態を呼}

び出す

び出す。

pushMatrix()とpopMatrix()

pushMatrix()とpopMatrix()

使 ⽅

y

使い⽅

◦

_{幾何変換と描画命令の組をpushMatrix()と}

◦

_{幾何変換と描画命令の組をpushMatrix()と}

popMatrix()ではさむ。必ず対にする。

pushMatrix();

pushMatrix();

translate(120, 120);

rotate(radians(10));

② 幾何変換

(

( ));

rect(0, 0, 50, 50);

popMatrix();

③ 描画命令

p p

();

void setup() { size(300, 200); }

使⽤例

使⽤例

_{それぞれ異なる位置と向きで}

それぞれ異なる位置と向きで

オブジェクトを配置できている

階層的な幾何変換

階層的な幾何変換

y

pushMatrix()とpopMatrix()は入れ子構造にすること

ができる。 ⇒ 連動する座標系を扱えるようになる。

y

移動する乗り物やリフトの上でさらに人が移動してい

るようなシ ンや 人やロボ トの関節のようにリン

るようなシーンや、人やロボットの関節のようにリン

ク構造を持つ物体においてこのような⽅法を使う。

ゲームによくある「動く床」

多関節のロボット

階層的な幾何変換の例

階層的な幾何変換の例

_B

A

動く床

床

人

A 人Bがそれぞれ座標系を

床、人

A、人Bがそれぞれ座標系を

持っている。床が回転すると、人

A

と人

Bはその影響を受ける。

と人

Bはその影響を受ける。

課題1（スケッチ名：mouse）

課題1（スケッチ名：mouse）

ウ カ

上 大きさ

正⽅

y

マウスカーソル上で大きさ100x100の正⽅

形が回転するプログラムを作りなさい。

y

ただし、正⽅形の中⼼がマウスカーソルの

位置になるようにすること

位置になるようにすること。

課題2（スケッチ名：tworects）

課題2（スケッチ名：tworects）

画面内

個 回転す

⻑⽅形を描

y

画面内に２個の回転する100x50の⻑⽅形を描

くプログラムを作りなさい。

y

回転中⼼は⻑⽅形の中⼼とし、⽚⽅は時計回り

に もう⼀⽅は反時計回りに回転させること

に、もう ⽅は反時計回りに回転させること。

時計回り

反時計回り

時計回り

反時計回り

課題3（スケッチ名：twocircles）

課題3（スケッチ名：twocircles）

が 直径

軌道上を移動す プ

y

２つの円が、直径200の円軌道上を移動するプ

ログラムを作りなさい。

円軌道

円軌道

応⽤編（スケッチ名：coffeecup）

応⽤編（スケッチ名：coffeecup）

余裕 あ 人は 遊園地にあ 「

ヒ カ プ」を模

y

余裕のある人は、遊園地にある「コーヒーカップ」を模

したプログラムに挑戦してください。

y

カップが乗っている床全体を回転させ、なおかつ個々の

カップも回転させること。

コーヒーカップ

人