Microsoft PowerPoint - [150428] CMP実習Ⅰ(2015) 橋本 CG編 第2回 ベジエ曲線とフラクタル.pptx

Transcription

1 コンテンツ メディア プログラミング実習 Ⅰ コンピュータグラフィックス編 ベジェ曲線とフラクタル 橋本直

2 今日大事なのは 難しい数式が出てきたら 落ち着いて式のつくりを読み取ろう 数式の意味を完全に理解できていなくても プログラムで実装することはできる 難しいアルゴリズムが出てきたら コンピュータになりきってどういう処理が われるか ずつ丁寧に考えよう

3 . ベジェ曲線

4 滑らかな曲線を描くアルゴリズム いろいろな曲線 ベジェ曲線 ファーガソン曲線 スプライン曲線 有理ベジェ曲線 NURS 曲線 CADソフトやドローソフトには大抵なんらかの曲線アルゴリズムが入っている Illusraor, Phooshop, PowerPoin, ペイント, 4

5 例 : Inkscape の曲線機能 Illusraor Inkscape 5

6 ベジェ曲線とは 制御点 と呼ばれる複数の点に基づいて定義される多項式曲線 フランスの 動 メーカー ルノー社のエンジニアだったピエール ベジェが考案 96 CAD の開発を っていた Pierre ézier Image from hp://luc.devroe.org/fons-66.hml 6

7 ベジェ曲線はこんな線 P P P P0 点 P0, P, P, P を制御点と呼ぶ n 次のベジェ曲線には n 個の制御点がある 次のベジェ曲線 4 個の制御点 次のベジェ曲線 個の制御点 7

8 アニメーションで るベジェ曲線 次ベジェ曲線 次ベジェ曲線 Image from hp://en.wikipedia.org/wiki/%c%a9zier_curve 8

9 ベジェ曲線の形状 制御点の位置を変えることによって曲げ方を変えることができる 9

10 ベジェ曲線の性質 端点一致性 P P P0 P P0 P P P P 曲線の両端は制御点 P0 Pnに一致する また P0 P と Pn- Pn が曲線の接ベクトルとなる 0

11 ベジェ曲線の性質 凸包性 P P P P P0 P P P P P0 P ベジェ曲線は制御点によって定義される凸包の中に完全に内包される 凸包 とつほう 与えられた点群を含む最小の凸形状のこと ピン群に輪ゴムをかけたときにできる図形

12 ベジェ曲線の数式表現 制御点 P0, P, P, P があるとき 次のベジェ曲線は次式で表わされる P = P 0 0 P P P, 0 i ここでは 次のバーンスタイン基底関数 0 0 = = = =

13 実装のために数式を読む まずは式の形を把握する P = P0 0 P P P どうやったらプログラムに落とし込めそうかよく考える 例えば微積分や総和 ノルム 最大値などの計算は入っている? って何だ? 媒介変数表示 パラメータ表示 この式に =0, =0., =0., =.0 と代入していくと 曲線を構成する点群になる すなわち for 文で =0.0 の範囲で値を入れていけばよい!

14 実装のために数式を読む 実装のために数式を読む デ 変数の形 データ構造 を把握する スカラー? ベクトル? 列? スカラ? クトル? 列? プログラムで表現しやすい形に式を変形しよう 0 0 P P P P P = P は 次元の点を示す座標値なので 変形 とおいて変形, P = 0 0 = = =

15 実装をイメージしよう for floa =0; <.0; =0.0 { } 0 = 媒介変数による式表現は for 文 = = = によって表現することができる P = P0 0 P P P poin P ; 5

16 実装をイメージしよう 実装をイメジしよう for floa =0; <.0; =0.0 { = 0 = = = P はすべて 次元の座標値を示すベクトルなので と を使って表現する = = る 0 0 = 0 0 = poin, ; } }

17 実装をイメージしよう 実装をイメジしよう for floa =0; <.0; =0.0 { = 0 = = よりプログラムに近い 平易な形で表 = 現するとこうなる これらの数式を代入によってさらにまとめてしまってもよい = = 0 0 = 0 0 = poin, ; } }

18 課題 beziercurve 前述の数式を用いて 次ベジェ曲線を描くプログラムを作成せよ 制御点の例 P0 : 75, 60 P : 70, 0 P : 50, 90 P : 500, 00 8

19 課題 beziercurve 各制御点をマウスカーソルでひっぱって移動できるように改良し 制御点の配置とベジェ曲線の関係 前述の性質 について確認せよ 9

20 ヒント 点をマウスで移動させるには? 点の近くにカーソルがあって マウスボタンが押されている 状態を判定しよう その状態のときに カーソルに点がついていくようにすれば良い マウスボタン押下状態は mousepressed という論理型変数 rue/false で判定できる 0

21 . フラクタル

22 フラクタルとは フラクタル Fracal 己相似性を持つ図形のこと 自己相似性 縮尺を変えても全体と部分の形状が相似の関係にあること 分の中に 分がいて さらにその中にも 分が という構造

23 有名なフラクタル図形 マンデルブロ集合 シェルピンスキーの三角形 コッホ曲線 Image from hp://ja.wikipedia.org/wiki/ マンデルブロ集合

24 自然界に潜むフラクタル 海岸線 リアス式海岸 毛細血管 植物の葉や茎 シダ植物ロマネスコ カリフラワーの一種 Image from hp://ja.wikipedia.org/wiki/ シダ植物, hp://ja.wikipedia.org/wiki/ ロマネスコ 4

25 フラクタルの応 例 Fracal Codes 己相似性を持つ 次元コード 近くから ても遠くから ても認識できる! 一部分が などで隠れていても認識できる! 綾塚祐二, Fracal Codes: 己相似的に配置される二次元コード, WISS006, pp

26 フラクタルを描くプログラム まずは以下のプログラムをよく読んで なぜそういう結果になるか考えてみよう void seup { size400, 400; } void draw { background00; ranslae widh/, heigh/ ; drawcircle400; } void drawcirclefloa d { if d < 0 { reurn; } ellipse 0, 0, d, d ; drawcircled/; } 6

27 再帰的アルゴリズム 関数の中で 分 身を呼び出す構造を 持つアルゴリズム void drawcircle { drawcircle drawcircle drawcircle ; drawcircle } 7

28 再帰的アルゴリズムでの注意点 再帰において重要なのはループの終了処理! 終了条件がととのったときに reurn で脱出させる これがきちんと仕掛けられてないと無限ループに陥ってしまう void drawcirclefloa d { if d < 0 { reurn; } ellipse 0, 0, d, d ; drawcircled/; } 0 reurn 8

29 再帰的アルゴリズムでフラクタルを 描くときのポイント まずは繰り返しの基本要素を つけて その基本要素だけを描く関数を作る その関数に再帰構造を組み込む 終了条件を設定する 9

30 例題 : フラクタルな 下図の木を再帰的アルゴリズムで描いてみよう 0

31 . 基本要素を つける まずは繰り返しになっている最小単位を つける これが最小単位

32 . 基本要素を描く方法を考える スタート地点の座標値から各線の端点の座標値を計算する方法でも良いが ここでは前回習ったranslae やroae を使って描画する方法で考えよう 原点から上方向に さ L の線を描く 原点から上方向に L だけ平 移動する その位置で 40 度回転した後 そこを起点に さL/の線を描く 4その位置で -40 度回転した後 そこを起点に さ L/ の線を描く

33 . 基本要素だけを描く関数を作る ここでは再帰構造のことは意識せずに 基本要素だけを描く関数 を作る 要素の大きさを引数で指定できるようにするのが重要 void drawtreefloa lengh { line 0, 0, 0, -lengh ; ranslae0, -lengh; pushmari; roaeradians40; line 0, 0, 0, -lengh/ ; popmari; pushmari; roaeradians-40; line 0, 0, 0, -lengh/ ; popmari; } 当然だが この関数単体での動作を確認するために seup と draw も書こう

34 4. 再帰構造にする 先ほど作った関数内で われている描画処理のうち 再帰的な分割処理が発 する部分を再帰呼び出しに置き換える void drawtreefloa lengh { void drawtreefloa lengh { line 0, 0, 0, -lengh ; ranslae0, -lengh; pushmari; roaeradians40; line 0, 0, 0, -lengh/ ; popmari; line 0, 0, 0, -lengh ; ranslae0, -lengh; pushmari; roaeradians40; drawtree lengh/; popmari; pushmari; pushmari; roaeradians-40; roaeradians-40; line 0, 0, 0, -lengh/ ; drawtree lengh/ ; popmari; popmari; } } 4

35 5. 再帰の終了条件を設定する このままでは再帰処理が無限に われてしまうので それを防ぐために 要素の大きさが一定値以下になったら再帰を脱出する という仕組みを void drawtreefloa lengh { if lengh < { reurn; } 加える line 0, 0, 0, -lengh ; ranslae0, -lengh; ここでは 枝の さが 未満になったら終了 としている pushmari; roaeradians40; drawtree lengh/ h/ ; popmari; pushmari; roaeradians-40; drawtree lengh/ ; popmari; } 5

36 6. 完成したプログラム void seup { size400, 400; srokeweigh; } void drawtreefloa lengh { if lengh < { reurn; } void draw { line 0, 0, 0, -lengh ; ranslae widh/, heigh ; ranslae0, -lengh; drawtree00; } pushmari; roaeradians40; drawtree lengh/ ; popmari; p pushmari; roaeradians-40; drawtree lengh/ ; popmari; } 6

37 課題 KochCurve コッホ曲線を描くプログラムを作成せよ を作成 こういうルールで描かれているが アニメーションさせる必要はない 7

38 ヒント L/ 9 L 8