[ CG実習 >  CG実習 課題(2021) >  OpenGLでの2次元図形の描画 ]

[課題01]: OpenGLでの2次元図形の描画

課題

次に示すサンプルプログラムを参考にして, さまざまな図形を組み合わせて,自由に絵を描いて画像を生成するプログラムを作成し, そのプログラムを提出して下さい

注意

プログラムを提出する前に「課題提出に関する注意」をよく読んでおいてください

サンプルプログラム

次のサンプルプログラムでは三色旗(フランスの国旗)を描きます. 何かキーを押すとプログラムが終了します.

次に別のサンプルを示します.上向き・下向きの矢印のボタンが並べて配置してあるパネルをイメージしています.

サンプルプログラムは次のように実行します.

$ ruby  tricolore.rb
$ ruby  updown.rb

いずれもウインドウ上で何かキーを押すとプログラムは終了します.

課題で作成するプログラムも同様に実行して操作することになります.

ファイルのダウンロード

この授業のサンプルファイル等はダウンロードして利用して下さい. ブラウザの画面で開くと「文字化け」します. ダウンロードするにはリンクを右クリックして「Save Link as」を 選んで下さい.ファイル名は必要に応じて変更して下さい. なおダウンロード先は「Home」としてください.

課題の進め方

この課題では次のテンプレートに基づいて何らかの絵を描くプログラムを作成して下さい.

このテンプレートはサンプルプログラムから図形のデータを取り除いたものです. ダウンロードするときにファイル名は適宜変えてください. 課題で作成するプログラムには,基本的に自由に名前をつけて構いません. ただし日本語や空白文字を入れないようにして下さい. またRubyスクリプトであることを示す拡張子(.rb)を,名前の最後に必ずつけて下さい. Emacsの利用法については前回の課題のページ(サンプルプログラムによるテスト)も参照してください.

プログラムで絵を描くには,次に示す部分に図形プリミティブのデータを適宜追加して下さい.



# 描画処理
display = Proc.new {
  GL.Clear(GL::COLOR_BUFFER_BIT) # 背景のクリア

  ###
  ### GL.Clear...GL.Flushの間に図形プリミティブのデータを並べて絵を描く
  ### (この説明文は削除して構いません)
  ###

  GL.Flush() # 描画強制実行
}


図形の描き方については,授業資料の「図形プリミティブ」を参考にして下さい. なお画面に入るのは次の範囲です.


    -1 ≦ x ≦ 1 かつ -1 ≦ y ≦ 1 

プリミティブはいくつでも描けます. それぞれのプリミティブの記述(GL.Begin...GL.End())を順に並べていきます.プリミティブを入れ子にはできません. なお「背景のクリア」が先頭で「描画の強制実行」が末尾に書かれているようにして下さい.

なお重ね描きが可能です.描画した図形に重なりがある場合は, 後から描いた図形で上書きされます.

作成するプログラムは上に示したサンプルプログラムと同様に実行して操作することになります.

色の指定

色はR,G,B(赤,緑,青)の組み合わせで指定します(サンプルプログラムを参考にして下さい). 値はいずれも0.0-1.0の範囲で指定します.


    GL.Color(0.000,0.125,0.624) # 三色旗の「青」
    GL.Color(1.0,1.0,1.0)       # 白
    GL.Color(0.957,0.165,0.255) # 三色旗の「赤」

なお指定する際にR,G,Bの組み合わせで自分の表現したい色を記述することは必ずしも簡単ではないでしょう. そこで,Colortable(色表)と色データを調べられるプログラムを用意しましたので必要に応じて使ってみてください.

円の描画

図形プリミティブによって円を近似的に描くことができます. しかし今回学習した方法で円に見える図形を描くにはかなり手間が必要となることでしょう. そこでこの実習では次のようにして(近似的な)円を簡単に描けるようにしています. なお円の描画処理は「GL.Begin..GL.End」で囲う必要はありませんので注意してください.


require "opengl"
require "glu"
require "glut"
require "cg/mglutils" # プログラムの先頭にこの行を追加する

### 以下はいずれも「display」の中に記述する
### GL.Begin...GL.Endで囲わずに記述する
### 色はプリミティブと同様にGL.Colorで指定する

# (x,y)を中心として半径rの円(円周)を描く
MGLUtils.circle([x,y],r)

# (x,y)を中心として半径rの円板(塗りつぶした円)を描く
MGLUtils.disc([x,y],r)

# (x,y)を中心として半径rでa0の方向からa1の方向までの円弧を描く.a0,a1はx軸の正の方向を0としたdegree(0-360)で指定する.
MGLUtils.arc([x,y],r,a0,a1)

# (x,y)を中心として半径rでa0の方向からa1の方向までの扇形を描く.a0,a1はx軸の正の方向を0としたdegree(0-360)で指定する.
MGLUtils.fan([x,y],r,a0,a1)

その他

プログラムで利用するかもしれない情報を挙げておきます.

Tips

課題に取り組むにあたって,以下も適宜参照して下さい.

履歴とファイル名の補完について,説明を簡単にするために「GNOME端末の機能」としていますが, 正しくはGNOME端末上で動作しているシェル(shell)の機能です.
[ CG実習 >  CG実習 課題(2021) >  OpenGLでの2次元図形の描画 ]