. ...
コンピュータグラフィックス
第4回 色彩の表現 細部 博史 法政大学 情報科学部 2013年10月9日色彩の表現
人の眼は光の波長に応じて色を知覚する． 光の3原色は人の眼の構造に基づく． コンピュータも光の3原色を基本として色を扱う． 色の表現には，光の3原色を基本とするものだけでなく，他の基準 によるものもある．可視光
光は電磁波． 人の眼に見える光を可視光と呼ぶ． 可視光の波長は約380 nm∼780 nm． 1 nm = 10−9 m 特定の波長のみからなる光を単色光と呼ぶ．単色光には青，緑，赤 などがある． 白の単色光は存在しない．光の
3
原色
人の眼の網膜は可視光に 反応する錐体細胞と桿体 細胞を持つ． 錐体は3種類(S錐体，M 錐体，L錐体)あり，それ ぞれ主に青，緑，赤に 反応． 桿体は感度が高く，暗い ところで働く． 光の波長に対する3種類 の錐体の反応の違いに よって色が知覚される． 3種類の錐体に対応する 青，緑，赤を光の3原加法混色
光の3原色を組み合わせることで，様々な色を表現できる． 光を重ねて別の色を作ることを加法混色と呼ぶ． コンピュータのディスプレイは光の3原色の加法混色を行う．㟷
⥳
㉥
ⓑ
䝅䜰䞁 䝬䝊䞁䝍
㯤
㯮
減法混色
絵の具のように色を混ぜると暗くなることを減法混色と呼ぶ． この場合の3原色としてシアン，マゼンタ，黄が用いられる． プリンタなどのカラー印刷は減法混色を行う．㯤
䝬䝊䞁䝍
䝅䜰䞁
㯮
㉥
⥳
㟷
ⓑ
カラーモデル
色を複数(通常3∼4個)の成分で表現する方法をカラーモデルと 呼ぶ． 代表的なカラーモデル： RGB CMY YIQ HSV カラーモデルによって表現された色の集合を色空間と呼ぶ． カラーモデルに類似の概念である表色系(color system)は，カラーモ デルよりも厳密に規格等として定められたもの． 例：マンセル表色系，XYZ表色系RGB, CMY
カラーモデル
RGBカラーモデルは光の3原色の加法混 色に対応し，赤(red)，緑(green)，青 (blue)を成分として用いる． CMYカラーモデルは減法混色に対応し， シアン(cyan)，マゼンタ(magenta)，黄 (yellow)を成分として用いる． 各成分を0∼1で表すときのRGB, CMY カラーモデルの関係： GR B + MC Y = 11 1 YIQ
カラーモデル
輝度成分Yと, 2つの色成分I (オレンジ∼シアン), Q (緑∼マゼン タ)を用いる． アナログカラーテレビ放送の信号方式であるNTSCで用いられた． 白黒放送との互換性． 人の眼が輝度に敏感であることを利用した情報量の削減． RGB, YIQカラーモデルの関係： YI Q = 0.2990.596 −0.274 −0.3220.587 0.114 0.211 −0.522 −0.311 GR B この式でカラー画像からグレースケール画像への変換が可能．HSV
カラーモデル
色相，彩度，明度を成分として用いる． 色相(hue)： 色の種類 彩度(saturation)： 色の鮮やかさ 明度(value)： 色の明るさ RGBカラーモデルよりも直観的と言われる． CGアプリケーションにおける色の選択や，可視化アプリケーション における色を用いた表現などに使われることが多い．CG
における色の扱い
コンピュータのディスプレイは光の3原色であるRGBを用いて色を 表現する． フレームバッファもピクセルごとにRGB情報を持つ． R, G, Bのそれぞれに8ビット(0∼255)を割り当て，全体で24ビッ トを用いて色を表現することが多い． データのレベルではさらにαチャネルと呼ばれる 8 ビットの不透明度 (0 が透明，255 が不透明) を表すデータを付け加えることが多い (RGB と合わせて 32 ビット)． RGBの24ビットを6桁の16進数にしたもので，色を表すことも 多い． 例：白は FFFFFF, 黒は 000000，マゼンタは FF00FF CSS3やSVG等のウェブ関連の標準規格では，16個の基本色や147 個の拡張色が名前付きで定められている． http://www.w3.org/TR/css3-color/#html4 http://www.w3.org/TR/css3-color/#svg-color演習問題
(1)
. .. 1 80C0FFはどのような色か． . .. 2 「肌色」を6桁の16進数で表せ．Scalable Vector Graphics (SVG)
2次元ベクタグラフィックスを記述するための言語． 線分や円などの図形をデータとして扱って作成する画像をベクタグラ フィックスまたはベクタ画像と呼ぶことがある． 対になる概念はラスタグラフィックスまたはラスタ画像であり，CG を ラスタ化した画像や，カメラで撮影した画像を指す． W3C (HTML等の標準化を行う団体)によって策定された． http://www.w3.org/TR/SVG/ XMLをベースとする．Internet Explorerや，Firefox，Chrome等の多くのブラウザで表示で
SVG
(続き)
図形の記述は，要素を階層的に組み合わせることで行う． 以下の内容からなるテキストファイル(拡張子はsvg) を出発点とす ればよい． 1 <? xml v e r s i o n = " 1.0 " s t a n d a l o n e = " no " ? > 2 <! D O C T Y P E svg P U B L I C " -// W3C // DTD SVG 1 . 1 / / EN " 3 " h t t p :// www . w3 . org / G r a p h i c s / SVG / 1 . 1 / DTD / s v g 1 1 . dtd " > 4 < svg x m l n s = " h t t p :// www . w3 . org / 2 0 0 0 / svg " v e r s i o n = " 1.1 " 5 w i d t h = "ビューポートの幅" h e i g h t = "ビューポートの高さ" > 6 <! - - ここに要素を記述する - - > 7 </ svg > 座標系として，左上を原点とする2次元直交座標系を用いる． 階層モデリングも可能．SVG
(続き)
図形はグラフィックス要素として記述される．具体的なグラフィック
ス要素として，rect (長方形)，circle (円)，ellipse (楕円)，line (線
分)，polyline (ポリライン)，polygon (ポリゴン)，path (3次ベジエ
曲線等の線)などがある． 例えばrect要素は以下のように記述する． 1 < r e c t x = "左上の頂点の x 座標" y = "左上の頂点の y 座標" 2 w i d t h = "幅" h e i g h t = "高さ" 3 f i l l = "内部の色" s t r o k e = "辺の色" stroke - w i d t h = "辺の太さ" / > g要素によって図形をグループ化し，さらに座標変換を記述して階 層モデリングをすることができる． 1 < g t r a n s f o r m = "座標変換" > 2 <! - - ここに図形を記述する - - > 3 </ g >
SVG
(続き)
座標変換は，g要素やグラフィックス要素のtransform属性として指 定する． 1 < g t r a n s f o r m = " t r a n s l a t e ( -10 , -20) s c a l e (2) r o t a t e ( 4 5 ) 2 t r a n s l a t e (5 ,10) " > 3 <! - - ここに図形を記述する - - > 4 </ g > 座標変換として例えば以下を指定できる． translate(tx, ty) : 平行移動 T (tx, ty) scale(sx, sy) : 拡大・縮小 S (sx, sy) rotate(a) : 回転 R(a)他の座標変換として，matrix, 1引数のtranslate, 1引数のscale, 3引
数のrotate, skewX, skewYがある．
