2016年07月01日

できるだけわかりやすく説明してみるという実験:CG(コンピューターグラフィックス)の基礎 〜 2D編

あなたが普段なにげなく使っているPCでは、ウィンドウを開いたり閉じたり、お絵描きソフトで何かを描いてみたり、とにかく画面上には何らかの「描画」がされている。
これは広い意味での「CG(コンピューターグラフィックス)」によるもので、あなたがなにげなく使っているうちにも、その小さな箱の中では、あるアルゴリズムに従って、色々な描画が無数にされているのである。

ここで中学生のころの数学でならった「座標軸」を思い出してほしい。
X軸とY軸からなるあの座標軸。
「こんなこと習っても将来何の役にも立たない!」なんて生意気なことを言ったものだが、いやいやいや、これがこういうところに出てくるんですよ。

X-Y座標上のある一点は、Xの値とYの値で一意に決まる。

2d-xy
この図ではX=3、Y=2というある点を表している。この点は(3, 2)と表すことができる。
"(3, 2)"といえばこの1点しかない。
コンピューターの描画では画面上のある一点をこうやってXとYの値で決定している。
「◯◯万画素」などとよく聞くと思うが、あれはこの点の数で、たとえばX軸に800点、Y軸に640点あれば、その画面は800x640=512000ということで、「51万2千画素」ということになる。
そして、その画面上の(400, 320)が画面の中心点になる、ということだ。

この画面にある一本の直線を引くことを考える。
ひとつの点がXとYの値で決定されたように、一本の直線は二つの点、つまり、二つのXとYの組み合わせで決定する。
2d-line


この図では、先ほどの(3, 2)に加えて(1, 3)という点が描かれているが、この2点を結ぶ直線は上記以外にはありえない。言い換えれば、ある直線は2つの点で決定する。

CGで直線を描くときは、このように2つの点(=2組のX,Y値=4つの値)を与えることで描く。

では、四角形を描く場合はどうなるのだろうか?
四角形は辺が4つあるので、上記の流れからすると、2つの点 x 4で8つの点を指定する必要があるのか?
あるいは4つの点を指示するだけで、それらを結べばいいのか?

正解は、、、「2点を指示するだけでよい」である。
2d-rect
この図では、先ほどの直線と同様、(3, 2)と(1, 3)の2点だけを指示しているが、その2点から上記のように四角形を確定することができる。
実際にPCに描画されるときも、たとえばウィンドウのような四角い形状のものはこのように2点だけを指示することで四角形を決定している。

さらに円はどうなるか?
円は、中心点と半径を指示すれば決定することができる。つまり、X, Yと半径の値ということで3つの値で円が一意に決まる。
2d-circle
コンピューターが実際に円を描くときは、コンパスで円を描くのと同様に、中心点を決めて、その周りにぐるっと線を引く、ということをする。
だが、「中心点と半径」という指示の仕方よりももっと感覚的な指示として、先ほどの四角形のように2点を指示し、「その四角形に内接する円」というやりかたもある。
2d-circle2
この場合は、この円を描こうと思ったプログラマにとっては感覚的なのかも知れないが、PC内部では、「中心点と半径」を計算して、それに置き換えて描くことになる。

以上、コンピューターで図を描くときの基本の話だった。これからPCを使うときに、何かが表示されたときには、上記のようなことが内部では行われているのだ、ということを思い出してほしい。

【今回のまとめ】
  • PCの画面に何らかの図やウィンドウなどが描かれるときには内部で描画処理が行われている。
  • 画面上のある一点はX-Y座標上のXの値とYの値で一意に決まる。
  • 直線は2つの点、つまり4つの値を指示することで描かれる。
  • 四角形も2つの点、つまり4つの値を指示することで描かれる。
  • 円は1つの点と半径、つまり3つの値を指示することで描かれるが、より感覚的に指示したい場合に、2つの点で指示することもできる。 


OLランキングで1位になりたい!賛同していただける方は下記をクリック!