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

Size: px

Start display at page:

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

さいぞうわかはら
7 years ago
Views:

1 コンピュータグラフィックス第 13 回最終課題横山輝明 1

2 この講義についてコンピュータグラフィックスですコンピュータグラフィックスコンピュータグラフィックスについて学習しますプログラムで絵を描きますプログラム言語 Ruby Rubyというプログラム言語を利用します Rubyプログラムでグラフィックスを描画します 2

3 講義資料講義資料は配布する PDFファイルファイルは二種類印刷用の6ページ: ComputerGraphicsXX_6p.pdf 画面表示用の1ページ: ComputerGraphicsXX.pdf 質問があれば連絡 3

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

5 神戸情報大学院大学高度IT技術者を養成する専門職大学院大学大学院だけ研究者養成ではなく高度技術者養成神戸市の三宮に学校学年30人 ICTイノベータコースは外国人英語コース 30人 5

6 ドット絵ドット ( 画素 ) 色のついた点 CGの基本要素座標を指定して色づけファミコン: 256 x 240 スーパーファミコン: 512 x 448 X 座標この講義のCGはコレ! Y 座標 6

7 この講義でやることコンピュータグラフィックスを描いてみるプログラムの基礎知識を得るプログラムによって絵を描いてみる Rubyプログラミングについて学習 Ruby/SDLでグラフィックスにも挑戦 7

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

9 ソースコードの作成プログラムフォルダで新規作成任意の名前をつける 9

10 Rubyプログラムの実行 Rubyプログラムを実行する方法コマンドラインを起動するソースコードのあるフォルダまで移動するファイル一覧を表示してソースコードの有無を確認する ruby (ソースコード名 ) cd コマンドでフォルダ移動 dir コマンドでファイル一覧確認 ruby コマンドでソースコード実行 ruby-lecture1-1.txt 10

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

12 繰り返し同じ処理を繰り返す方法条件に基づいて繰り返すカウンタが10になるまで繰り返す (=10 回繰り返し) 逐次処理上から下にひとつづつ実行処理 A 繰り返し条件成立の間は処理を繰り返す処理 A 処理 B 処理 C 条件 Y Y 処理 B N 12

13 for 文の説明条件 (i in 1..10)の間処理を繰り返す命令 doからendの間を繰り返す iは1から10まで変化する条件 Y N 条件がOKの間処理を繰り返し ( 何度も実行 ) for i in 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

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

15 if 文の説明条件に基づいて処理を分岐させる命令条件式 Y N 条件に応じて処理をスキップ (するかしないか) 条件式 Y N 条件に応じて処理を切り替え (どちらか) 処理処理処理 if ( 条件式 ) then 真の時に実行する部分 end if ( 条件式 ) then 真の時に実行する部分 else 偽の時に実行する部分 end 15

16 SDLとはグラフィックスプログラムを作成する命令集 Ruby 用その他のプログラム言語用も Windows 以外のさまざまなOSにも対応 16

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) 17

18 SDL: 座標描画には座標指定が必要 X 座標左が0, 右に増える SDL 画面 480 Y 座標上が0, 下に増える 18

19 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

20 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

21 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

22 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

23 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

24 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

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) # 画面表示の更新 25

26 最終課題以下の問題から選択して解答プログラムが完成したら教員を呼ぶ 26

27 最終課題 1: 国旗の描画課題 : 国旗の描画次ページの国旗の4つ以上を1つの画面内に描く以前のお絵描き + 国旗 2つを1 画面でもよい配置は自由 ( 上下左右どれでもよい) どこかに自分の名前を入れる名字か名前漢字英字ひらがなカタカナOK 27

28 最終課題 1: 国旗の描画下記の国旗から4つ以上選択自分の名前も記載するギリシャイスラエルオリンピックモルディブグルジアアイスランドニシェール 28

29 最終課題 2: ボール処理の改造ボールの数を2つに (まず練習 ) 別々の変数を用意する例 : (x1,y1) (dx1,dy1)と(x2,y2) (dx2,dy2)などそれぞれの変数を別々に処理 (x1,y1)と(x2,y2)を増減 (x1,y1)と(x2,y2)を座標チェック二つのボールの描画ボールの数を3つに (こちらが課題 ) 自分で考えるボール2つのプログラムを参考にするボールの色は赤青緑にする 3つのボールを線でつないで三角形を描く 29

30 最終課題 2: ボール処理の改造 30

31 最終課題 3: サイコロ描画課題 : 乱数とグラフィックス処理乱数の結果で画面にサイコロを描画ヒント rand(6)+1 で1~6まで計算 if 文で条件分岐それぞれのthen 節の中でサイコロの絵を描く 31

32 最終課題 4: デジタル時計の描画課題 : 時刻とグラフィックス処理時刻を取得してデジタル時計を描画する四角形の個数で時分秒を表現それぞれ横に並べる時は赤分針は緑秒針は青デザインや配置は自分で工夫することヒント時は12 個 (または24 個 ) 横幅 50ドット (25ドット) 分秒は60 個横幅 10ドット 32

33 最終課題 4: デジタル時計の描画 Y 座標 0 0 X 座標時には四角形を最大 12 個 (または24 個 ) 配置 640 分には四角形を最大 60 個配置秒には四角形を最大 60 個配置

34 最終課題 4: デジタル時計の描画考え方時刻の取得は Time.now 複数の四角形描画には for 文繰り返し回数の指定に時分秒の値を利用四角形の左上座標を計算して描画大きさは時分秒で異なる時なら12か24 個分秒は60 個 sleep(0.1)しながら描画ループ 34

35 最終課題 5: アナログ時計の描画課題 : 時刻とグラフィックス処理時刻を取得してアナログ時計を描画する時針は赤分針は緑秒針は青時計の周りの円も描く( 白色など) ヒント時計の針先の座標計算座標を元に描画 35

36 最終課題 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

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

38 最終課題 5: アナログ時計の描画ヒント3: 座標計算と針描画秒針の(x, y) 座標 (radはラジアンを格納した変数 ) x = r*math.cos(rad) y = r*math.sin(rad) 画面描画の座標軸に合わせる座標軸はxは同じ yは反対 (y 座標増加は下方向 ) 画面描画の中心座標は(320, 200) x2 = x : xはそのまま+320スライド y2 = y * (-1) : yは反転して+200スライド画面描画 x2, y2を用いて秒針を描画これを時分秒のそれぞれで描画する 38

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 39

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]を反転 (3) n 個のボールの描画 (4) (2)へ戻る 40

KINGSOFT Office 2016 動作環境対応日本語版版共通利用上記動作以上以上空容量以上他接続環境推奨必要 2

KINGSOFT Office 2016 動作環境対応日本語版版共通利用上記動作以上以上空容量以上他接続環境推奨必要 2 目次動作環境特長方法方法起動終了方法方法操作方法使方使方使方詳細設定使方 KINGSOFT Office 2016 動作環境対応日本語版版共通利用上記動作以上以上空容量以上他接続環境推奨必要 2 KINGSOFT Office 2016 特長主特長以