コンピュータの表示方式

コンピュータのグラフィック表示の方式は以下の 2 種類があります。

1. ラスタスキャン方式
2. ベクタスキャン方式

• ラスタスキャン方式

ラスタスキャン方式は、おなじみの方式です。
画面にたくさんの点を整列させ、その点の色や明るさを変化させることにより図形を表現します。
パソコンやテレビの液晶画面を虫眼鏡で拡大して見ると、たくさんの点が明滅していることを確認できるでしょう。
この「点」自体が移動することはありません。

「点」それぞれに色や明るさを持たせることができるため、静止画はもちろん動画も色鮮やかな表示が可能という特徴があります。
方眼紙のように並んだ点の明滅により表示を行うため、点のある場所しか光りません。
このため、表示は整数位置を指定することになります。(小数は扱えないが、精度が高い)

• ベクタスキャン方式

ベクタスキャン方式は、画面の裏側からレーザー光線 (陰極線なので、正しくは「電子ビーム」) を当て、
そのレーザー光線を電気で捻じ曲げて画面との衝突位置を変化させることにより図形を表示します。
黒い画用紙に白いペンで線を描くのと同じです。

レーザー光線は素早く移動するので、そのままだと描画した図形を目で追うことが困難です。
ベクタスキャン方式の画面には、図形がよく見えるように光の残像時間が長くなる工夫がしてあるものがあります。

飛行場の管制室や映画のシーンでレーダー表示を見ることがありますが、あの丸い画面がベクタスキャンです。
最近ではコンピュータ化が進んだ結果、レーダー表示もラスタスキャン方式に置き換えられているようですが…。

レーザー光線の強弱により表示の濃淡を表現するので、多色を扱うことは出来ません (製造すると高価になりすぎるため、やらない)。
表示する「点」の位置は、画面の 1/3 や 2/5 という値を直接扱います。
このため、表示は実数の位置を指定することになります。(小数も扱えるが、全体的に精度が高くない)

近年のコンピュータはラスタスキャン方式の表示装置しか持たないないため、グラフィック表示と言えばラスタスキャン方式を指します。

前述のとおり、コンピュータの表示装置はラスタスキャン方式のため、点を描くときは整数位置を扱います。
これはいわゆる「解像度(かいぞうど)」と呼ばれているものです。
液晶モニターの性能を調べるときに 3840x2160 等の表記を見たことがあると思います。

例えば 1024x768 なら 1,024 個の横に並ぶ点の集まりが縦に 768 行存在し、全部で 786,432 個の光る点で画面が作られていることを示しています。
画面の中央に点を表示するなら、横位置 512、縦位置 384 を指定して、一点を光らせます。
点の隙間は 512.5, 384.5 に相当するので、正確にはちょっとだけズレている。

屁理屈のようですが「線(せん)」と「線分(せんぶん)」は意味が異なります。
「線」は無限に続く真っ直ぐな直線や曲線のことを指し、「線分」は「線」の一部分を指します。
表示において無限に続く「線」を扱うことは出来ません。ここでは「線分」を「線」と略します。

概念上 (表示をしない場合) の線は面積や色を考慮する必要はありませんが^*1、表示をする場合は必ず面積や色を指定します。
シャープペンシル(シャーペン)で紙に線を描くときにさえ 0.5mm の幅で 10cm の長さを黒色で、という具合に面積と色が必要になります。
ラスタスキャン方式では、方眼紙のように整列した点をいくつも使って線を表現します。
^*1例えば「境界線(きょうかいせん)」や「放物線(ほうぶつせん)」には面積も色もありません。

線の描画と傾き

ここからは「数学」の知識が必要になります。
小学生のお友達は、近所の高校生のお兄さん (大学生でも OK) に教えてもらってください。
小学校の先生は、なぜか数学を知らないので聞いてはいけません。

実は、数学を小学生に教えるのは難しいことなので、大学生のお兄さんの勉強にもなります。

数学では、平面を互いに直角の横線と縦線で表し、横位置を「X 座標(エックスざひょう)」、縦位置を「Y 座標(ワイざひょう)」と呼び、まとめて (X,Y) と記述します。
X, Y ともに 0(ゼロ) の場所を「原点(げんてん)」と呼びます。

線を描くときは 2 点の座標が必要になるため、(X₁,Y₁) - (X₂,Y₂) という表記を使います。
数学では -(ハイフン) ではなく ,(コンマ) を使って (X₁,Y₁), (X₂,Y₂) と記述します。

横線を描く

原点から長さ 6 の横線を青色で描画します。
結果のイメージは以下になります。
コンピュータの画面は数学と異なり、右下へ向かって増加する座標[↘]となっています。(英文と同じ)
数学では右上へ向かって増加[↗]します。

< 図 1 >
 長さ 6 は、原点を含むので (0,0) - (5,0) の線になります。


コンピュータで処理するときは、X 座標をひとつずつ移動しながら点を描画し続けます。
< 表 1 >

順番	X 座標	Y 座標
1	0	0
2	1	0
3	2	0
4	3	0
5	4	0
6	5	0

縦線を描く

上記と同様に、原点から長さ 6 の縦線を青色で描画します。
結果のイメージは以下になります。

< 図 2 >
 X,Y の座標で表すと、(0,0) - (0,5) です。


横線の場合と同様に、Y 座標をひとつずつ移動しながら点を描画し続けます。
< 表 2 >

順番	X 座標	Y 座標
1	0	0
2	0	1
3	0	2
4	0	3
5	0	4
6	0	5

斜めの線を描く (1)

原点から長さ 6 の斜め線を青色で描画します。
斜め線の角度を 45°とします。
結果のイメージは以下になります。

< 図 3 >
 X,Y の座標で表すと、(0,0) - (5,5) です。
 長さを 6 としていますが、実は数学的にこの線は 6 になっていません。^*2
 線の描画の説明なので、今はこれで覚えてください。

 ^*2 2 点が与えられたときは、三平方の定理 (中学3年の数学で習います) で解くことができます。
  角度から求めるには、三角関数 (高校の数学で習います) で解くことができます。


横線・縦線の場合と同様に、X, Y を両方ともひとつずつ移動しながら点を描画し続けます。
< 表 3 >

順番	X 座標	Y 座標
1	0	0
2	1	1
3	2	2
4	3	3
5	4	4
6	5	5

斜めの線を描く (2)

原点から (5, 2) への斜め線を青色で描画します。
結果のイメージは以下になります。

< 図 4 >
 X,Y の座標で表すと、(0,0) - (5,2) です。


X の増加が 1 に対して Y はその半分の増加で点を描画し続けます。
< 表 4 >

順番	X 座標	Y 座標
1	0	0
2	1	0
3	2	1
4	3	1
5	4	2
6	5	2

傾き

数学では、直線を表すときに

Y = m ×(かける) X

という式を使います。
この m を「傾き」と呼び、X の変化に対する Y の増加量を示します。

上記の「斜め線を描く (2)」においては、

m =	1
	2

となっていて、直線の式を書き直すと、以下になります。

Y =	1	× X
	2

×(かける) と X(エックス) の記号が似ていて読みにくいので、数学では読みやすくするために ×(かける) を省略して、以下のように記述します。
X, Y は大文字と小文字のどちらを使っても構いません。

Y =	1	X
	2

m = 1 のときは Y = X となり、45°の傾きを表します。

コンピュータで線を描く場合は、傾きが重要です。
X と Y のどちらを優先して描画するかを、傾き 1 (= 角度 45°) を境にして決めます。

傾きが 1 より大きい時は X ではなく Y を元にして計算する

傾きが 1 より大きい時とは、例えば以下の状態のことです。
< 表 5 > 1 より大きい傾きの例

傾き (m)	角度	原点 (0,0) からの距離
		X	Y
3/2	約 56.31°	1	1.5
2	約 63.43°	1	2
5/2	約 68.20°	1	2.5
3	約 71.57°	1	3

角度は参考値です。計算するには三角関数 (高校の数学で習います) が必要なので、ここでは詳細を割愛します。

傾き「m = 2」を、X を元にして Y を計算してみます。
< 表 6 > Y = 2 X の表

順番	X	Y
1	0	2 × 0(X) = 0
2	1	2 × 1(X) = 2
3	2	2 × 2(X) = 4
4	3	2 × 3(X) = 6

< 表 6 > に従って点を描画すると、以下になります。
< 図 5 >



連続した線を描きたかったのに、何か所か途切れています。破線になってしまいました。
元になる数 X より Y の変化量が大きいために生じます。

破線になるのを防止するには、X を 1/m ずつ増加するか、X と Y を入れ替えて Y の変化量を小さくします。

ここでは、高速演算かつ単純化するため、X と Y を入れ替えることにします。
これは、傾きの分母と分子も入れ替えることを意味します。

Y = m X

→

1  Y =  m  X  m m

→

X =  1  Y m

< 表 7 > X と Y と分母と分子を入れ替えた表 (m' = ½)
Y を元に X を求める。

順番	Y	X → 小数を切り捨て
1	0	½ × 0(Y) = 0.0 → 0
2	1	½ × 1(Y) = 0.5 → 0
3	2	½ × 2(Y) = 1.0 → 1
4	3	½ × 3(Y) = 1.5 → 1
5	4	½ × 4(Y) = 2.0 → 2
6	5	½ × 5(Y) = 2.5 → 2

< 表 7 > に従って点を描画すると、以下になります。
< 図 6 >


連続した点で線を描くことができました。

円を描く

線の描画と同様に円を描きます。

< 図 7 > 例: 半径 5 (= 長さ 6) の円
 半径が小さく、かつ拡大しているため角ばって見えますが、
 半径を大きくして描画すると円に近づいて見えます。


円の軌跡は以下の式で表します。(高校の数学で習います。小学生のお友達は、近所の大学生のお兄さんに教わってください)

X² + Y² = R²
R は円の半径。(Radius の略)

線を描いたのと同様、X または Y を元にして点を描くことにより円を形作ります。
また、45°を境に X と Y を入れ替えて計算するのも線と同じです。

上記の式を、X を元に Y を求める式に変形すると以下になります。

Y = √(R² - X²) …… Ⓐ

同様に、Y を元に X を求める式は以下になります。

X = √(R² - Y²) …… Ⓑ

X を増やしながら Ⓐ で点を描き続け、中心との傾きが 45°を超えたところで Ⓑ に切り替えます。
よく見ると Ⓐ と Ⓑ は X と Y が入れ替わっただけの式なので、Ⓐ だけを計算して、結果を分配するやり方もあります。(← 実はこっちのほうが主流)

< 表 8 > 円の式を使って半径 5 で X を元に Y を求める。Y を元に X を求める

順番	X	Y → 四捨五入(中点の代わり)
1	0	√(52 - 02) = 5.00 → 5
2	1	√(52 - 12) = 4.90 → 5
3	2	√(52 - 22) = 4.58 → 5
4	3	√(52 - 32) = 4.00 → 4
✗ ⑤	4	√(52 - 42) = 3.00 → 3
↓	Y	X → 四捨五入(中点の代わり)
6	0	√(52 - 02) = 5.00 → 5
7	1	√(52 - 12) = 4.90 → 5
8	2	√(52 - 22) = 4.58 → 5
9	3	√(52 - 32) = 4.00 → 4
✗ ⑩	4	√(52 - 42) = 3.00 → 3

 順番 ⑤, ⑩ は、それぞれ傾きが 1 を越えるので点の描画をやめる。
 (⑤: X/Y = 4/3 > 1, ⑩: Y/X = 4/3 > 1)

答えをそれぞれ四捨五入しているのは、円の式の場合は誤差を無視できないためです。
例えば、1.1 と 1.9 では 1.1 を 1、1.9 を 2 とみなして点を描画しないと、角が立った図形になってしまいます。
これを突き詰めると 1.5 をどちらに寄せたら良いか分からなくなりますが、方眼の点描画においては問題になりません。(わざといい加減にしています)

< 表 8 に従って点を描画すると、以下になります。
< 図 8 > 円弧の描画

順番 1～4 (X から Y を求める) 1 2 3 4  →   →   →      順番 6～9 (Y から X を求める) 6 7 8 9  →   →   →

< 図 8 > の点をそれぞれ X 軸^*3、Y 軸^*4の反対側に描画し、
その点をさらにもう一度 X 軸または Y 軸に対する反対側に描画すると以下になります。
< 図 9 > 反対側に点を描画して作った円

^*3原点 (0,0) から水平に引いた直線のことを指します。(X がどんな値でも Y が 0)
^*4原点 (0,0) から垂直に引いた直線のことを指します。(Y がどんな値でも X が 0)

円を描画することができました。