コンピュータグラフィックス 第 13 回 最 終 課 題 横 山 輝 明 1
この 講 義 について コンピュータグラフィックス です コンピュータグラフィックス コンピュータグラフィックスについて 学 習 します プログラムで 絵 を 描 きます プログラム 言 語 Ruby Rubyというプログラム 言 語 を 利 用 します Rubyプログラムでグラフィックスを 描 画 します 2
講 義 資 料 講 義 資 料 は 配 布 する PDFファイル http://www.cyber-u.info/lecture/cg ファイルは 二 種 類 印 刷 用 の6ページ: ComputerGraphicsXX_6p.pdf 画 面 表 示 用 の1ページ: ComputerGraphicsXX.pdf 質 問 があれば 連 絡 tel1203@gmail.com 3
自 己 紹 介 自 己 紹 介 横 山 輝 明 山 口 県 出 身 兵 庫 県 芦 屋 在 住 神 戸 情 報 大 学 院 大 学 情 報 技 術 研 究 科 講 師 奈 良 先 端 科 学 技 術 大 学 院 大 学 情 報 科 学 研 究 科 インターネット 工 学 講 座 研 究 員 経 歴 宇 部 工 業 高 等 専 門 学 校 立 命 館 大 学 理 工 学 部 情 報 学 科 奈 良 先 端 科 学 技 術 大 学 院 大 学 情 報 科 学 研 究 科 サイバー 大 学 IT 学 部 講 師 専 門 インターネット 上 における 人 間 行 動 の 分 析 と 応 用 ユビキタス 社 会 におけるネットワーク 技 術 の 研 究 開 発 教 育 工 学 災 害 時 通 信 インターネット 全 般 4
神戸情報大学院大学 高度IT技術者を養成する専門職大学院大学 大学院だけ 研究者養成ではなく高度技術者養成 神戸市の三宮に学校 学年30人 ICTイノベータコースは外国人 英語コース 30人 http://www.kic.ac.jp/ 5
ドット 絵 ドット ( 画 素 ) 色 のついた 点 CGの 基 本 要 素 座 標 を 指 定 して 色 づけ ファミコン: 256 x 240 スーパーファミコン: 512 x 448 X 座 標 この 講 義 のCGはコレ! Y 座 標 6
この 講 義 でやること コンピュータグラフィックスを 描 いてみる プログラムの 基 礎 知 識 を 得 る プログラムによって 絵 を 描 いてみる Rubyプログラミングについて 学 習 Ruby/SDLでグラフィックスにも 挑 戦 7
Rubyインタプリタ プログラム Ruby 言 語 で 書 かれたプログラム みんなにはこのプログラムを 書 いてもらう ( 人 間 が 理 解 できる 言 語 ) Ruby Rubyインタプリタ( 翻 訳 機 ) Ruby 言 語 プログラムをコンピュータが 理 解 できる 内 容 に 変 換 する (コンピュータが 理 解 する 言 語 ) 8
ソースコードの 作 成 プログラムフォルダで 新 規 作 成 任 意 の 名 前 をつける 9
Rubyプログラムの 実 行 Rubyプログラムを 実 行 する 方 法 コマンドラインを 起 動 する ソースコードのあるフォルダまで 移 動 する ファイル 一 覧 を 表 示 してソースコードの 有 無 を 確 認 する ruby (ソースコード 名 ) cd コマンドで フォルダ 移 動 dir コマンドで ファイル 一 覧 確 認 ruby コマンドで ソースコード 実 行 ruby-lecture1-1.txt 10
変 数 変 数 とは データを 格 納 しておく 箱 変 数 名 という 名 前 を 持 つ 数 値 や 文 字 などデータ 種 類 によって 区 別 する データ 種 類 を 型 格 納 することを 代 入 と 呼 ぶ 変 数 名 A データ データの 格 納 や 取 り 出 し ができる 11
繰 り 返 し 同 じ 処 理 を 繰 り 返 す 方 法 条 件 に 基 づいて 繰 り 返 す カウンタが10になるまで 繰 り 返 す (=10 回 繰 り 返 し) 逐 次 処 理 上 から 下 にひとつづつ 実 行 処 理 A 繰 り 返 し 条 件 成 立 の 間 は 処 理 を 繰 り 返 す 処 理 A 処 理 B 処 理 C 条 件 Y Y 処 理 B N 12
for 文 の 説 明 条 件 (i in 1..10)の 間 処 理 を 繰 り 返 す 命 令 doからendの 間 を 繰 り 返 す iは1から10まで 変 化 する 条 件 Y N 条 件 がOKの 間 処 理 を 繰 り 返 し ( 何 度 も 実 行 ) for i in 1..10 do puts(i) end 処 理 for 変 数 in 条 件 do 処 理 内 容 end iが1から10まで puts(i)を 繰 り 返 す i=1 puts(i) i=2 puts(i) i=10 puts(i) 13
条 件 分 岐 のイメージ 逐 次 処 理 上 から 下 にひとつづつ 実 行 条 件 分 岐 条 件 に 応 じて 処 理 を 切 り 替 え どちらか 一 方 を 実 行 する 処 理 A 処 理 A 処 理 B 条 件 X Y N 処 理 C 処 理 B 処 理 C 14
if 文 の 説 明 条 件 に 基 づいて 処 理 を 分 岐 させる 命 令 条 件 式 Y N 条 件 に 応 じて 処 理 をスキップ (するか しないか) 条 件 式 Y N 条 件 に 応 じて 処 理 を 切 り 替 え (どちらか) 処 理 処 理 処 理 if ( 条 件 式 ) then 真 の 時 に 実 行 する 部 分 end if ( 条 件 式 ) then 真 の 時 に 実 行 する 部 分 else 偽 の 時 に 実 行 する 部 分 end 15
SDLとは グラフィックスプログラムを 作 成 する 命 令 集 Ruby 用 その 他 のプログラム 言 語 用 も Windows 以 外 のさまざまなOSにも 対 応 16
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) 17
SDL: 座 標 描 画 には 座 標 指 定 が 必 要 0 640 0 X 座 標 左 が0, 右 に 増 える SDL 画 面 480 Y 座 標 上 が0, 下 に 増 える 18
SDL 命 令 : 色 の 指 定 点 の 描 画 [r,g,b] カッコで 囲 んで 指 定 rは 赤 gは 緑 bは 青 それぞれ0~255を 指 定 して 色 を 混 ぜる 色 指 定 の 書 式 : [ 色 R, 色 G, 色 B] 使 い 方 の 例 : # 点 の 描 画 screen.put_pixel(111, 222, [255, 255, 255]) screen.update_rect(0, 0, 0, 0) # 画 面 表 示 の 更 新 19
SDL 命 令 : 点 の 描 画 点 の 描 画 put_pixel 命 令 を 使 う 点 の 座 標 色 を 指 定 命 令 の 書 式 : screen.put_pixel(x 座 標, Y 座 標, [ 色 R, 色 G, 色 B]) 使 い 方 の 例 : # 点 の 描 画 screen.put_pixel(111, 222, [255, 255, 255]) screen.update_rect(0, 0, 0, 0) # 画 面 表 示 の 更 新 20
SDL 命 令 : 線 の 描 画 線 の 描 画 draw_line 命 令 を 使 う 線 の 始 点 と 終 点 の 座 標 色 を 指 定 命 令 の 書 式 : screen.draw_line(x 始 点, Y 始 点, X 終 点, Y 終 点, [ 色 R, 色 G, 色 B]) 使 い 方 の 例 : # 赤 い 線 の 描 画 screen.draw_line(0, 0, 100, 200, [255, 0, 0]) screen.update_rect(0, 0, 0, 0) # 画 面 表 示 の 更 新 21
SDL 命 令 : 四 角 形 の 描 画 四 角 形 の 描 画 draw_rect fill_rect 命 令 を 使 う 四 角 形 の 左 上 の 座 標 と 大 きさ( 幅 高 ) 色 を 指 定 塗 りつぶしをしたいときは fill=true 命 令 の 書 式 : screen.draw_rect(x 始 点, Y 始 点, 幅, 高, [ 色 R, 色 G, 色 B],fill=false) 使 い 方 の 例 : # 緑 の 四 角 形 の 描 画 screen.draw_rect(0, 0, 100, 200, [0, 255, 0], fill=true) screen.update_rect(0, 0, 0, 0) # 画 面 表 示 の 更 新 22
SDL 命 令 : 円 の 描 画 円 の 描 画 draw_circle 命 令 を 使 う 円 の 左 上 と 右 下 の 座 標 色 を 指 定 塗 りつぶしをしたいときは fill=true 命 令 の 書 式 : screen.draw_circle(x 座 標, Y 座 標, 半 径, [ 色 R, 色 G, 色 B], fill=false) 使 い 方 の 例 : # 青 の 円 の 描 画 screen.draw_circle(200, 200, 150, [0, 0, 255], fill=true) screen.update_rect(0, 0, 0, 0) # 画 面 表 示 の 更 新 23
SDL 命 令 : 画 面 更 新 画 面 更 新 update_rect(0,0,0,0) 命 令 を 使 う 画 面 を 更 新 する 描 画 したときに 必 須 最 後 に 一 回 でいい 命 令 の 書 式 : screen.draw_circle(0,0,0,0) 使 い 方 の 例 : # 青 の 円 の 描 画 screen.draw_circle(200, 200, 150, [255, 0, 0], fill=true) screen.update_rect(0, 0, 0, 0) # 画 面 表 示 の 更 新 24
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) # 画 面 表 示 の 更 新 25
最 終 課 題 以 下 の 問 題 から 選 択 して 解 答 プログラムが 完 成 したら 教 員 を 呼 ぶ 26
最 終 課 題 1: 国 旗 の 描 画 課 題 : 国 旗 の 描 画 次 ページの 国 旗 の4つ 以 上 を1つの 画 面 内 に 描 く 以 前 のお 絵 描 き + 国 旗 2つを1 画 面 でもよい 配 置 は 自 由 ( 上 下 左 右 どれでもよい) どこかに 自 分 の 名 前 を 入 れる 名 字 か 名 前 漢 字 英 字 ひらがな カタカナOK 27
最 終 課 題 1: 国 旗 の 描 画 下 記 の 国 旗 から4つ 以 上 選 択 自 分 の 名 前 も 記 載 する ギリシャ イスラエル オリンピック モルディブ グルジア アイスランド ニシェール 28
最 終 課 題 2: ボール 処 理 の 改 造 ボールの 数 を2つに (まず 練 習 ) 別 々の 変 数 を 用 意 する 例 : (x1,y1) (dx1,dy1)と(x2,y2) (dx2,dy2)など それぞれの 変 数 を 別 々に 処 理 (x1,y1)と(x2,y2)を 増 減 (x1,y1)と(x2,y2)を 座 標 チェック 二 つのボールの 描 画 ボールの 数 を3つに (こちらが 課 題 ) 自 分 で 考 える ボール2つのプログラムを 参 考 にする ボールの 色 は 赤 青 緑 にする 3つのボールを 線 でつないで 三 角 形 を 描 く 29
最 終 課 題 2: ボール 処 理 の 改 造 30
最 終 課 題 3: サイコロ 描 画 課 題 : 乱 数 とグラフィックス 処 理 乱 数 の 結 果 で 画 面 にサイコロを 描 画 ヒント rand(6)+1 で1~6まで 計 算 if 文 で 条 件 分 岐 それぞれのthen 節 の 中 で サイコロの 絵 を 描 く 31
最 終 課 題 4: デジタル 時 計 の 描 画 課 題 : 時 刻 とグラフィックス 処 理 時 刻 を 取 得 して デジタル 時 計 を 描 画 する 四 角 形 の 個 数 で 時 分 秒 を 表 現 それぞれ 横 に 並 べる 時 は 赤 分 針 は 緑 秒 針 は 青 デザインや 配 置 は 自 分 で 工 夫 すること ヒント 時 は12 個 (または24 個 ) 横 幅 50ドット (25ドット) 分 秒 は60 個 横 幅 10ドット 32
最 終 課 題 4: デジタル 時 計 の 描 画 Y 座 標 0 0 X 座 標 時 には 四 角 形 を 最 大 12 個 (または24 個 ) 配 置 640 分 には 四 角 形 を 最 大 60 個 配 置 秒 には 四 角 形 を 最 大 60 個 配 置 480 33
最 終 課 題 4: デジタル 時 計 の 描 画 考 え 方 時 刻 の 取 得 は Time.now 複 数 の 四 角 形 描 画 には for 文 繰 り 返 し 回 数 の 指 定 に 時 分 秒 の 値 を 利 用 四 角 形 の 左 上 座 標 を 計 算 して 描 画 大 きさは 時 分 秒 で 異 なる 時 なら12か24 個 分 秒 は60 個 sleep(0.1)しながら 描 画 ループ 34
最 終 課 題 5: アナログ 時 計 の 描 画 課 題 : 時 刻 とグラフィックス 処 理 時 刻 を 取 得 して アナログ 時 計 を 描 画 する 時 針 は 赤 分 針 は 緑 秒 針 は 青 時 計 の 周 りの 円 も 描 く( 白 色 など) ヒント 時 計 の 針 先 の 座 標 計 算 座 標 を 元 に 描 画 35
最 終 課 題 5: アナログ 時 計 の 描 画 ヒント1: 現 在 時 刻 の 取 得 と 針 の 角 度 現 在 時 刻 を 取 得 tt = Time.now 時 分 秒 を 角 度 に 変 換 1 秒 1 分 は6 度 deg = tt.sec*6, deg = tt.min*6 1 時 間 は30 度 deg = tt.hour*30 時 計 は12 時 間 60 分 60 秒 で1 周 (360 度 ) 1 時 間 は 360 度 /12 = 30 度 1 分 は 360 度 /60 = 6 度 1 秒 は 360 度 /60 = 6 度 36
最 終 課 題 5: アナログ 時 計 の 描 画 ヒント2: 針 の 角 度 をコンピュータ 上 の 角 度 形 式 に 変 換 12 時 の 位 置 が0 度 になるように 角 度 を 変 換 deg2 = -1 * (deg 90) 角 度 をラジアンに 変 換 (deg2は 角 度 を 格 納 した 変 数 ) 360 度 はπ*2ラジアン rad = deg2/180*3.1415 ( 角 度 deg2を180で 割 って 3.1415を 掛 けるとラジアンに) 時 計 の 角 度 は 12 時 の 位 置 から 始 まって 時 計 回 りに 増 えていく コンピュータの 角 度 は 3 時 の 位 置 から 始 まって 反 時 計 回 りに 増 えていく そこで 開 始 の3 時 の 位 置 を12 時 に 動 かして(90 度 引 いて) 角 度 の 増 える 向 きを 反 対 にする(-1をかける) これが deg2 = -1 * (deg - 90) の 意 味 コンピュータは ラジアンという 単 位 で360 度 を 表 現 する 360 度 = 2 * π ラジアン ( 約 6.28ラジアン) 180 度 = π ラジアン ( 約 3.14ラジアン) 1 度 = π/180 ラジアン ( 約 0.017ラジアン) 角 度 に(π/180)を 掛 けるとラジアンに 変 換 できる 37
最 終 課 題 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を 用 いて 秒 針 を 描 画 これを 時 分 秒 のそれぞれで 描 画 する 38
最 終 課 題 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 39
最 終 課 題 6: ボール 処 理 の 改 造 プログラムの 流 れ (1) 4 種 類 の 配 列 を 用 意 する x,y,dx,dy (2) それぞれの 配 列 を 処 理 n 個 を 処 理 するためにfor 文 で1..nまで 繰 り 返 し x[n], y[n]の 座 標 を 増 減 x[n], y[n]の 座 標 をチェック dx[n], dy[n]を 反 転 (3) n 個 のボールの 描 画 (4) (2)へ 戻 る 40