コンピュータグラフィックス13.ppt

(1)

1

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

第

13回最終課題

(2)

2

この講義について

•  「コンピュータグラフィックス」です

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

•  コンピュータグラフィックスについて学習します •  プログラムで絵を描きます

– プログラム言語Ruby

•  Rubyというプログラム言語を利用します •  Rubyプログラムでグラフィックスを描画します

(3)

3

講義資料

•  講義資料は配布する

– PDFファイル

– 

http://www.cyber-u.info/lecture/cg

– ファイルは二種類

•  印刷用の6ページ: ComputerGraphicsXX_6p.pdf •  画面表示用の1ページ: ComputerGraphicsXX.pdf

•  質問があれば連絡

– [email protected]

(4)

4

自己紹介

•  自己紹介 –  横山輝明、山口県出身、兵庫県芦屋在住 –  神戸情報大学院大学情報技術研究科講師 –  奈良先端科学技術大学院大学情報科学研究科_{インターネット工学講座} 研究員 •  経歴 –  宇部工業高等専門学校 –  立命館大学理工学部情報学科 –  奈良先端科学技術大学院大学情報科学研究科 –  サイバー大学 IT学部講師 •  専門 –  インターネット上における人間行動の分析と応用 –  ユビキタス社会におけるネットワーク技術の研究開発 –  教育工学、災害時通信、インターネット全般

(5)

神戸情報大学院大学

•  高度IT技術者を養成する専門職大学院大学

–  大学院だけ、研究者養成ではなく高度技術者養成

–  神戸市の三宮に学校、学年30人

–  ICTイノベータコースは外国人・英語コース、30人

–  http://www.kic.ac.jp/

5

(6)

6

ドット絵

•  ドット（画素）

– 色のついた点

– CGの基本要素

– 座標を指定して色づけ

•  ファミコン: 256 x 240 •  スーパーファミコン: 512 x 448

•  この講義のCGはコレ！

X座標 Y座標

(7)

7

この講義でやること

•  コンピュータグラフィックスを描いてみる

– プログラムの基礎知識を得る

– プログラムによって絵を描いてみる

– Rubyプログラミングについて学習

– Ruby/SDLでグラフィックスにも挑戦

(8)

8

Rubyインタプリタ

Ruby

プログラム

Ruby言語で書かれたプログラムみんなにはこのプログラムを書いてもらう（人間が理解できる言語） Rubyインタプリタ（翻訳機） Ruby言語プログラムをコンピュータが理解できる内容に変換する（コンピュータが理解する言語）

(9)

9

ソースコードの作成

•  プログラムフォルダで新規作成

•  任意の名前をつける

(10)

10

Rubyプログラムの実行

•  Rubyプログラムを実行する方法

–  コマンドラインを起動する –  ソースコードのあるフォルダまで移動する –  ファイル一覧を表示してソースコードの有無を確認する –  「ruby （ソースコード名）」「cd」コマンドでフォルダ移動「dir」コマンドでファイル一覧確認「ruby」コマンドでソースコード実行「ruby-lecture1-1.txt」

(11)

11

変数

•  変数とは

–  データを格納しておく箱、変数名という名前を持つ –  数値や文字などデータ種類によって区別する –  データ種類を型、格納することを代入と呼ぶ変数名A データの「格納」や「取り出し」ができるデータ

(12)

繰り返し

•  同じ処理を繰り返す方法

–  条件に基づいて繰り返す –  「カウンタが10になるまで繰り返す」（＝10回繰り返し） 12 逐次処理上から下にひとつづつ実行処理A 処理B 処理C 条件Y Y N 処理A 処理B 繰り返し条件成立の間は処理を繰り返す

(13)

13

for文の説明

•  条件（

i in 1..10

）の間、処理を繰り返す命令

–

 

doからendの間を繰り返す

–

 

iは1から10まで変化する

条件 Y N 処理 for 変数 in 条件 do 処理内容 end for i in 1..10 do puts(i) end 条件がOKの間処理を繰り返し（何度も実行） iが1から10まで、puts(i)を繰り返す i=1 → puts(i) i=2 → puts(i) … i=10 → puts(i)

(14)

14

条件分岐のイメージ

逐次処理上から下にひとつづつ実行条件分岐条件に応じて処理を切り替えどちらか一方を実行する条件X Y N 処理A 処理B 処理C 処理A 処理B 処理C

(15)

15

if文の説明

•  条件に基づいて処理を分岐させる命令

if (条件式) then 真の時に実行する部分 else 偽の時に実行する部分 end if (条件式) then 真の時に実行する部分 end 条件式 Y N 処理条件式 Y N 処理処理条件に応じて処理をスキップ（するかしないか）条件に応じて処理を切り替え（どちらか）

(16)

16

SDLとは

•  グラフィックスプログラムを作成する命令集

– Ruby用、その他のプログラム言語用も

– Windows以外のさまざまなOSにも対応

(17)

17

SDLプログラムの基本

•  SDLの基本パターン

# ライブラリの読み込み  require "sdl"    # SDL の初期化  SDL.init(SDL::INIT_EVERYTHING)  # SDL スクリーンの作成(640 x 480, 16bitカラー) 

screen = SDL.set_video_mode(640, 480, 16, SDL::SWSURFACE)   

（ここに命令を記述する）   

# 10秒間待つ  sleep(10)

(18)

18

SDL: 座標

•  描画には座標指定が必要

SDL画面

X座標左が0, 右に増える Y座標上が0, 下に増える 0 0 640 480

(19)

19

SDL命令：色の指定

•  点の描画

– [r,g,b]、カッコで囲んで指定

•  rは赤、gは緑、bは青 •  それぞれ0~255を指定して色を混ぜる # 点の描画  screen.put_pixel(111, 222, [255, 255, 255])  screen.update_rect(0, 0, 0, 0)　# 画面表示の更新  [色R, 色G, 色B] 使い方の例：色指定の書式：

(20)

20

SDL命令：点の描画

•  点の描画

– 「put_pixel」命令を使う

– 点の座標・色を指定

# 点の描画  screen.put_pixel(111, 222, [255, 255, 255])  screen.update_rect(0, 0, 0, 0)　# 画面表示の更新  screen.put_pixel(X座標, Y座標, [色R, 色G, 色B]) 使い方の例：命令の書式：

(21)

21

SDL命令：線の描画

•  線の描画

– 「draw_line」命令を使う

– 線の始点と終点の座標・色を指定

# 赤い線の描画  screen.draw_line(0, 0, 100, 200, [255, 0, 0])  screen.update_rect(0, 0, 0, 0)　# 画面表示の更新 

screen.draw_line(X始点, Y始点, X終点, Y終点, [色R, 色G, 色B])

使い方の例：命令の書式：

(22)

22

SDL命令：四角形の描画

•  四角形の描画

– 「draw_rect」「fill_rect」命令を使う

– 四角形の左上の座標と大きさ（幅・高）・色を指定

– 塗りつぶしをしたいときは「fill=true」

# 緑の四角形の描画  screen.draw_rect(0, 0, 100, 200, [0, 255, 0], fill=true)  screen.update_rect(0, 0, 0, 0)　# 画面表示の更新  screen.draw_rect(X始点, Y始点, 幅, 高, [色R, 色G, 色B],fill=false) 使い方の例：命令の書式：

(23)

23

SDL命令：円の描画

•  円の描画

– 「draw_circle」命令を使う

– 円の左上と右下の座標・色を指定

– 塗りつぶしをしたいときは「fill=true」

# 青の円の描画  screen.draw_circle(200, 200, 150, [0, 0, 255], fill=true)  screen.update_rect(0, 0, 0, 0)　# 画面表示の更新  screen.draw_circle(X座標, Y座標, 半径, [色R, 色G, 色B], fill=false) 使い方の例：命令の書式：

(24)

24

SDL命令：画面更新

•  画面更新

– 「update_rect(0,0,0,0)」命令を使う

– 画面を更新する、描画したときに必須

•  最後に一回でいい # 青の円の描画  screen.draw_circle(200, 200, 150, [255, 0, 0], fill=true)  screen.update_rect(0, 0, 0, 0)　# 画面表示の更新  screen.draw_circle(0,0,0,0) 使い方の例：命令の書式：

(25)

25

SDL命令：画像の読み込み

•  画像読み込みの命令

– ファイル名を指定して読み込み

– put命令で画像配置

•  put(画像オブジェクト, X座標, Y座標) # 画像の読み込み 

pict = SDL::Surface.load("test.png") 

pict.set_color_key(SDL::SRCCOLORKEY, [255, 255, 255])   

screen.put(pict, 300, 200) # 画像の表示 (座標指定)  screen.update_rect(0, 0, 0, 0)　# 画面表示の更新 

(26)

26

最終課題

以下の問題から選択して解答

(27)

27

最終課題

1: 国旗の描画

•  課題: 国旗の描画

–  次ページの国旗の

4つ以上

を

_{1つの画面内}

に描く

•  以前のお絵描き＋国旗2つを1画面でもよい

–  配置は自由（上下、左右どれでもよい）

–  どこかに

自分の名前を入れる

•  名字か名前、漢字・英字・ひらがな・カタカナOK

(28)

最終課題

1: 国旗の描画

•  下記の国旗から

4 つ以上選択

•   自分の名前も記載

する

28 モルディブグルジアアイスランドニシェールイスラエルオリンピックギリシャ

(29)

29

最終課題

2: ボール処理の改造

•  ボールの数を２つに（まず練習）

–  別々の変数を用意する

•  例: (x1,y1) (dx1,dy1)と(x2,y2) (dx2,dy2)など

–  それぞれの変数を別々に処理 •  (x1,y1)と(x2,y2)を増減 •  (x1,y1)と(x2,y2)を座標チェック –  二つのボールの描画

•  ボールの数を3つに（

こちらが課題

）

–  自分で考える –  ボール２つのプログラムを参考にする –  ボールの色は、赤、青、緑にする –  3つのボールを線でつないで三角形を描く

(30)

最終課題

2: ボール処理の改造

(31)

31

最終課題

3: サイコロ描画

•  課題: 乱数とグラフィックス処理

– 乱数の結果で画面にサイコロを描画

•  ヒント

– 「rand(6)+1」で1~6まで計算

– if文で条件分岐

– それぞれのthen節の中で、サイコロの絵を描く

(32)

32

最終課題

4: デジタル時計の描画

•  課題: 時刻とグラフィックス処理

–  時刻を取得して、デジタル時計を描画する

–  四角形の個数で時分秒を表現

–  それぞれ横に並べる

–  時は赤、分針は緑、秒針は青

–  デザインや配置は自分で工夫すること

•  ヒント

–  時は12個（または24個） → 横幅50ドット（25ドット）

–  分・秒は60個 → 横幅10ドット

(33)

33

最終課題

4: デジタル時計の描画

X座標 Y座標 0 0 640 480 「時」には四角形を最大12個（または24個）配置「分」には四角形を最大60個配置「秒」には四角形を最大60個配置

(34)

34

最終課題

4: デジタル時計の描画

•  考え方

– 時刻の取得は「Time.now」

– 複数の四角形描画には「for文」

•  繰り返し回数の指定に時分秒の値を利用

– 四角形の左上座標を計算して描画

•  大きさは時分秒で異なる •  時なら12か24個、分秒は60個

– sleep(0.1)しながら描画ループ

(35)

35

最終課題

5: アナログ時計の描画

•  課題: 時刻とグラフィックス処理

– 時刻を取得して、アナログ時計を描画する

– 時針は赤、分針は緑、秒針は青

– 時計の周りの円も描く（白色など）

•  ヒント

– 時計の針先の座標計算

– 座標を元に描画

(36)

36

最終課題

5: アナログ時計の描画

•  ヒント1：現在時刻の取得と針の角度

–  現在時刻を取得

•  tt = Time.now

–  時分秒を角度に変換

•  １秒、１分は６度 → 「deg = tt.sec*6」, 「deg = tt.min*6」 •  １時間は３０度 → 「deg = tt.hour*30」

時計は12時間、60分、60秒で1周（360度）

1時間は 360度/12 = 30度 1分は 360度/60 = 6度 1秒は 360度/60 = 6度

(37)

37

最終課題

5: アナログ時計の描画

•  ヒント2：針の角度をコンピュータ上の角度形式に変換 –  12時の位置が0度になるように角度を変換 •  「deg2 = -1 * (deg – 90)」 –  角度をラジアンに変換 (deg2は角度を格納した変数) •  360度はπ*2ラジアン •  「rad = deg2/180*3.1415」（角度deg2を180で割って、3.1415を掛けるとラジアンに）コンピュータの角度は、 3時の位置から始まって反時計回りに増えていく時計の角度は、 12時の位置から始まって時計回りに増えていくそこで、開始の3時の位置を12時に動かして（90度引いて）角度の増える向きを反対にする（-1をかける）これが「deg2 = -1 * (deg - 90)」の意味コンピュータは、ラジアンという単位で360度を表現する。 360度 = 2 * π ラジアン（約6.28ラジアン） 180度 = π ラジアン（約3.14ラジアン） 1度 = π/180 ラジアン（約0.017ラジアン） → 角度に（π/180）を掛けるとラジアンに変換できる

(38)

38

最終課題

5: アナログ時計の描画

•  ヒント3：座標計算と針描画

–  秒針の(x, y)座標 (radはラジアンを格納した変数)

•  「x = r*Math.cos(rad)」 •  「y = r*Math.sin(rad)」

–  画面描画の座標軸に合わせる

•  座標軸はxは同じ、yは反対（y座標増加は下方向） •  画面描画の中心座標は(320, 200) •  「x2 = x + 320」: xはそのまま+320スライド •  「y2 = y * (-1) + 200」: yは反転して+200スライド

–  画面描画

•  x2, y2を用いて秒針を描画 •  これを時分秒のそれぞれで描画する

(39)

39

最終課題

6: ボール処理の改造

•  ボールの数をn個に

– 配列を作成

•  x = Array.new で配列xを作成 •  配列xは、x[0]などのように番号を指定して利用できる

– 配列と繰り返しの組み合わせ

•  以下のように書くと、x[0]からx[9]まで処理できる、 –  x[k] のように番号をカウンタ変数で指定する –  10個のxを用意したことと同じ •  for k in 0..9 do x[k] = … end

(40)

40

最終課題

6: ボール処理の改造

•  プログラムの流れ

– (1) 4種類の配列を用意する

•  x,y,dx,dy

– (2) それぞれの配列を処理

•  n個を処理するためにfor文で1..nまで繰り返し •  x[n], y[n]の座標を増減 •  x[n], y[n]の座標をチェック •  dx[n], dy[n]を反転

コンピュータグラフィックス13.ppt

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

第

13回 最終課題

この講義について

• 「コンピュータグラフィックス」です

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

– プログラム言語Ruby

講義資料

• 講義資料は配布する

– PDFファイル

–

http://www.cyber-u.info/lecture/cg

– ファイルは二種類

• 質問があれば連絡

– [email protected]

自己紹介

神戸情報大学院大学

• 高度IT技術者を養成する専門職大学院大学

– 大学院だけ、研究者養成ではなく高度技術者養成

– 神戸市の三宮に学校、学年30人

– ICTイノベータコースは外国人・英語コース、30人

– http://www.kic.ac.jp/

ドット絵

• ドット （画素）

– 色のついた点

– CGの基本要素

– 座標を指定して色づけ

• この講義のCGはコレ！

この講義でやること

• コンピュータグラフィックスを描いてみる

– プログラムの基礎知識を得る

– プログラムによって絵を描いてみる

– Rubyプログラミングについて学習

– Ruby/SDLでグラフィックスにも挑戦

Rubyインタプリタ

Ruby

プログラム

ソースコードの作成

• プログラムフォルダで新規作成

• 任意の名前をつける

Rubyプログラムの実行

• Rubyプログラムを実行する方法

変数

• 変数とは

繰り返し

• 同じ処理を繰り返す方法

for文の説明

• 条件（

i in 1..10

）の間、処理を繰り返す命令

–

doからendの間を繰り返す

–

iは1から10まで変化する

条件分岐のイメージ

if文の説明

• 条件に基づいて処理を分岐させる命令

SDLとは

• グラフィックスプログラムを作成する命令集

– Ruby用、その他のプログラム言語用も

– Windows以外のさまざまなOSにも対応

SDLプログラムの基本

• SDLの基本パターン

SDL: 座標

• 描画には座標指定が必要

SDL画面

SDL命令： 色の指定

• 点の描画

– [r,g,b]、カッコで囲んで指定

SDL命令： 点の描画

• 点の描画

– 「put_pixel」命令を使う

– 点の座標・色を指定

SDL命令： 線の描画

• 線の描画

– 「draw_line」命令を使う

– 線の始点と終点の座標・色を指定

SDL命令： 四角形の描画

• 四角形の描画

13回最終課題

•  「コンピュータグラフィックス」です

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

– プログラム言語Ruby

•  講義資料は配布する

– PDFファイル

– 

– ファイルは二種類

•  質問があれば連絡

– [email protected]

•  高度IT技術者を養成する専門職大学院大学

–  大学院だけ、研究者養成ではなく高度技術者養成

–  神戸市の三宮に学校、学年30人

–  ICTイノベータコースは外国人・英語コース、30人

–  http://www.kic.ac.jp/

•  ドット（画素）

– 色のついた点

– CGの基本要素

– 座標を指定して色づけ

•  この講義のCGはコレ！

•  コンピュータグラフィックスを描いてみる

– プログラムの基礎知識を得る

– プログラムによって絵を描いてみる

– Rubyプログラミングについて学習

– Ruby/SDLでグラフィックスにも挑戦

•  プログラムフォルダで新規作成

•  任意の名前をつける

•  Rubyプログラムを実行する方法

•  変数とは

•  同じ処理を繰り返す方法

•  条件（

•  条件に基づいて処理を分岐させる命令

•  グラフィックスプログラムを作成する命令集

– Ruby用、その他のプログラム言語用も

– Windows以外のさまざまなOSにも対応

•  SDLの基本パターン

•  描画には座標指定が必要

SDL命令：色の指定

•  点の描画

– [r,g,b]、カッコで囲んで指定

SDL命令：点の描画

•  点の描画

– 「put_pixel」命令を使う

– 点の座標・色を指定

SDL命令：線の描画

•  線の描画

– 「draw_line」命令を使う

– 線の始点と終点の座標・色を指定

SDL命令：四角形の描画

•  四角形の描画

– 「draw_rect」「fill_rect」命令を使う

– 四角形の左上の座標と大きさ（幅・高）・色を指定

– 塗りつぶしをしたいときは「fill=true」

SDL命令：円の描画

•  円の描画

– 「draw_circle」命令を使う

– 円の左上と右下の座標・色を指定

– 塗りつぶしをしたいときは「fill=true」

SDL命令：画面更新

•  画面更新

– 「update_rect(0,0,0,0)」命令を使う

– 画面を更新する、描画したときに必須

SDL命令：画像の読み込み

•  画像読み込みの命令

– ファイル名を指定して読み込み

– put命令で画像配置

•  課題: 国旗の描画

–  次ページの国旗の

_{1つの画面内}

–  配置は自由（上下、左右どれでもよい）

–  どこかに

•  下記の国旗から

  自分の名前も記載

•  ボールの数を２つに（まず練習）

•  ボールの数を3つに（

•  課題: 乱数とグラフィックス処理

– 乱数の結果で画面にサイコロを描画

•  ヒント

– 「rand(6)+1」で1~6まで計算

– if文で条件分岐