4. 図形描画

学習のポイント

• 図形の描画モデルを理解する．
• 図形を描画するための関数の使い方を学ぶ．
• 制御構造の復習

描画関数の使い方

　図形は，一つのウィンドウ上に描画する．このウィンドウの大きさを指定して開くための関数として描画領域を開く() がある．ウィンドウの大きさは横方向および縦方向の画素（ピクセルと呼ぶ）の数で指定する．それぞれの図形の色は光の3 原色(赤(R),緑(G), 青(B)) の加法混色で表現する．3 原色それぞれの強さを0～255 の範囲で指定する．例えば，(255,0,0) は赤，(255,255,0) は黄，(0,0,0) は黒を表す．座標系は，通常のx-y 座標平面と同じであるが，y 軸の向きが逆となっている(下向きに正)．座標系の原点は描画ウインドウの左上隅である．

　図形は，線分，折れ線などの線図形と，長方形，楕円，多角形などの面図形， および，文字図形からなる． 図形を描くには，原則として先に描画属性を指定しなければならない．描画属性としては，線の太さ，線の種類，線の色等の線図形に適応されるもの，塗りつぶしの色等の面図形に適応されるもの， および，フォントの種類，フォントサイズ等の文字図形に適応されるものがある．描画属性を指定しない場合は，予め定められた属性値が用いられ，一旦，設定した属性値は，同じ属性に対して新たに設定されるまで有効である．

　図形を描画するための関数としては，線分の描画，長方形の描画，楕円の描画，円の描画，文字列の描画等に関する関数がある．

[例題4.1] 300 × 300 の描画ウィンドウを開き，丸と四角と文字列を描いてみよう．

1
描画領域を開く(300,300)        /* 300x300 の描画ウィンドうを開く */
2
塗色(255,0,0)                /* 塗潰しの色を赤にセット */
3
塗円(150,150,50)             /* 中心(150,150), 半径50の円を描く */
4
線の太さ(3)                   /* 線の太さを 3 にセット */
5
塗長方形(160,220,60,30)       /* (160,220)に横60, 縦30の長方形を描く */
6
塗色(0,255,255)　　　　　　    /* 塗潰しの色を水色にセット */
7
文字サイズ(24)                /* フォントサイズを 24にセット */
8
文字列("ようこそ",100,70)      /* (100,70) に文字列を描画 */

　1 行目の描画領域を開く() 関数で，300 ピクセル四方の描画ウィンドウを開く．2 行目では面図形の塗りつぶしの色を赤に設定し，3 行目ではその色で中心(150,150)として半径50 の円を描く．4 行目では線の太さを3 に指定し，5 行目で(230,300) の位置に横80，縦30 の赤い長方形を描く．線の太さが太くなっていることに注意．6 行目で塗りつぶしの色(この場合は文字の色)を水色に指定し，7 行目でフォントサイズを24 ポイントに指定している．8 行目で"ようこそ"という文字列を(100,70) の位置に表示している．

練習問題

[練習4.1] 上記の例題のプログラムを修正し，円の色を緑に，中心座標を(50,50) として描画してみよう．

繰り返しを利用した描画

[例題4.2] 240 × 240 の描画ウィンドウに，半径15の8 つの赤い円を互いに接するように水平に配置せよ．円の中心のy座標は100 とする．

xxxxxxxxxx
8
1
変数 x
2
描画領域を開く(240,240)
3
線色(255,0,0)
4
x ← 15
5
x < 240 の間，
6
  | 円(x, 100, 15)
7
  | x ← x + 30
8
を繰り返す

　8つの円を並べるために必要な描画命令は以下の通りである．

xxxxxxxxxx
8
1
円( 15, 100, 15)
2
円( 45, 100, 15)
3
円( 75, 100, 15)
4
円(105, 100, 15)
5
円(135, 100, 15)
6
円(165, 100, 15)
7
円(195, 100, 15)
8
円(225, 100, 15)

　円()の第1 引数の値が，15, 45, 75,... のように 30 ずつ増加している．従ってこれらの描画関数を繰り返しの制御構造を用いて記述すると，4～8 行目のようになる． 　まず，4 行目で制御変数 x を 15 に初期化し，繰り返し毎に制御変数の増分30 を 7 行目で加えている． 　なお、例題の解答例以外にも様々な繰り返しの構成の方法があり得る．以下では，一つの別解を示す．

[例題4.2(別解)]

xxxxxxxxxx
8
1
変数 k
2
描画領域を開く(400,400)
3
線色(255,0,0)
4
k ← 1
5
k <= 8 の間，
6
  | 円(k*30-15, 100, 15)
7
  | k ← k + 1
8
を繰り返す

練習問題

[練習4.2] (円を並べる(1)) 240 × 240 の描画ウィンドウに，半径15 の緑色の円を中心座標が(20,20), (40,40), (60,60), ... となるように対角線に並べよ．

[練習4.3] (円を並べる(2)) 240 × 240 の描画ウィンドウに，半径15 の緑色の円を中心座標が(220,20), (200,40), (180,60), ... となるように前問とは逆の対角線上に並べよ．

補充問題

[補4.1] (方眼紙1) 100 × 100 の描画ウィンドウに，縦横 20ピクセルの間隔で直線を引き，方眼紙を作成せよ．

[補4.2] (方眼紙2) 100 × 100 の描画ウィンドウに，一辺20 の正方形を並べて方眼紙を作成せよ．

[練習1.39] (同心円) 400 × 400 の描画ウィンドウの真中に，半径がそれぞれ20, 40, 60,... ,200 の同心円を描け．