. . . . . .

.

......

コンピュータグラフィックス第 4回　色彩の表現

細部 博史

法政大学 情報科学部

2013年 10月 9日

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 1 / 22

. . . . . .

色彩の表現

人の眼は光の波長に応じて色を知覚する．

光の 3原色は人の眼の構造に基づく．

コンピュータも光の 3原色を基本として色を扱う．

色の表現には，光の 3原色を基本とするものだけでなく，他の基準によるものもある．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 2 / 22

. . . . . .

可視光

光は電磁波．

人の眼に見える光を可視光と呼ぶ．可視光の波長は約 380 nm∼780 nm．

1 nm = 10−9 m

特定の波長のみからなる光を単色光と呼ぶ．単色光には青，緑，赤などがある．

白の単色光は存在しない．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 3 / 22

. . . . . .

光の 3原色

人の眼の網膜は可視光に反応する錐体細胞と桿体細胞を持つ．

錐体は 3種類 (S錐体，M錐体，L錐体)あり，それぞれ主に青，緑，赤に反応．

桿体は感度が高く，暗いところで働く．

光の波長に対する 3種類の錐体の反応の違いによって色が知覚される．

3種類の錐体に対応する青，緑，赤を光の 3原色と呼ぶ．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 4 / 22

. . . . . .

加法混色

光の 3原色を組み合わせることで，様々な色を表現できる．

光を重ねて別の色を作ることを加法混色と呼ぶ．

コンピュータのディスプレイは光の 3原色の加法混色を行う．

�

� �

���� ��

�

�

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 5 / 22

. . . . . .

減法混色

絵の具のように色を混ぜると暗くなることを減法混色と呼ぶ．

この場合の 3原色としてシアン，マゼンタ，黄が用いられる．

プリンタなどのカラー印刷は減法混色を行う．

�

���� ���

�

�

�

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 6 / 22

. . . . . .

カラーモデル

色を複数 (通常 3∼4個)の成分で表現する方法をカラーモデルと呼ぶ．代表的なカラーモデル：

RGBCMYYIQHSV

カラーモデルによって表現された色の集合を色空間と呼ぶ．

カラーモデルに類似の概念である表色系 (color system)は，カラーモデルよりも厳密に規格等として定められたもの．

例：マンセル表色系，XYZ表色系

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 7 / 22

. . . . . .

RGB, CMYカラーモデル

RGBカラーモデルは光の 3原色の加法混色に対応し，赤 (red)，緑 (green)，青(blue)を成分として用いる．

CMYカラーモデルは減法混色に対応し，シアン (cyan)，マゼンタ (magenta)，黄(yellow)を成分として用いる．

各成分を 0∼1で表すときの RGB, CMYカラーモデルの関係： R

GB

+

CMY

=

111

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 8 / 22

. . . . . .

YIQカラーモデル

輝度成分 Yと, 2つの色成分 I (オレンジ∼シアン), Q (緑∼マゼンタ)を用いる．アナログカラーテレビ放送の信号方式である NTSCで用いられた．

白黒放送との互換性．人の眼が輝度に敏感であることを利用した情報量の削減．

RGB, YIQカラーモデルの関係： YIQ

=

0.299 0.587 0.1140.596 −0.274 −0.3220.211 −0.522 −0.311

RGB

この式でカラー画像からグレースケール画像への変換が可能．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 9 / 22

. . . . . .

HSVカラーモデル

色相，彩度，明度を成分として用いる．色相 (hue)： 色の種類彩度 (saturation)： 色の鮮やかさ明度 (value)： 色の明るさRGBカラーモデルよりも直観的と言われる．CGアプリケーションにおける色の選択や，可視化アプリケーションにおける色を用いた表現などに使われることが多い．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 10 / 22

. . . . . .

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/#html4http://www.w3.org/TR/css3-color/#svg-colorhttp://www.w3.org/TR/SVG/types.html#ColorKeyword

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 11 / 22

. . . . . .

演習問題 (1)

...1 80C0FFはどのような色か．

...2 「肌色」を 6桁の 16進数で表せ．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 12 / 22

. . . . . .

Scalable Vector Graphics (SVG)

2次元ベクタグラフィックスを記述するための言語．線分や円などの図形をデータとして扱って作成する画像をベクタグラフィックスまたはベクタ画像と呼ぶことがある．対になる概念はラスタグラフィックスまたはラスタ画像であり，CGをラスタ化した画像や，カメラで撮影した画像を指す．

W3C (HTML等の標準化を行う団体)によって策定された．http://www.w3.org/TR/SVG/

XMLをベースとする．

Internet Explorerや，Firefox，Chrome等の多くのブラウザで表示できる．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 13 / 22

. . . . . .

SVG (続き)

図形の記述は，要素を階層的に組み合わせることで行う．

以下の内容からなるテキストファイル (拡張子は svg) を出発点とすればよい．

1 <?xml version="1.0" standalone="no"?>

2 <!DOCTYPE svg PUBLIC " -//W3C//DTD SVG 1.1//EN"

3 "http ://www.w3.org/Graphics/SVG /1.1/ DTD/svg11.dtd">

4 <svg xmlns="http :// www.w3.org /2000/ svg" version="1.1"

5 width="ビューポートの幅" height="ビューポートの高さ">

6 <!-- ここに要素を記述する -->

7 </svg >

座標系として，左上を原点とする 2次元直交座標系を用いる．

階層モデリングも可能．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 14 / 22

. . . . . .

SVG (続き)

図形はグラフィックス要素として記述される．具体的なグラフィックス要素として，rect (長方形)，circle (円)，ellipse (楕円)，line (線分)，polyline (ポリライン)，polygon (ポリゴン)，path (3次ベジエ曲線等の線)などがある．

例えば rect要素は以下のように記述する．

1 <rect x="左上の頂点の x 座標" y="左上の頂点の y 座標"

2 width="幅" height="高さ"

3 fill="内部の色" stroke="辺の色" stroke -width="辺の太さ" />

g要素によって図形をグループ化し，さらに座標変換を記述して階層モデリングをすることができる．

1 <g transform="座標変換">

2 <!-- ここに図形を記述する -->

3 </g>

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 15 / 22

. . . . . .

SVG (続き)

座標変換は，g要素やグラフィックス要素の transform属性として指定する．

1 <g transform="translate (-10,-20) scale (2) rotate (45)

2 translate (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がある．

transform属性に複数の座標変換を記述した場合，左側の座標変換のほうが階層モデリングで外側の座標変換として用いられる．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 16 / 22

. . . . . .

演習問題 (2)

...1 以下では transform属性で 3引数の rotateを用いることで，(250, 250)を中心とする 30◦の回転を行っている．

1 <?xml version="1.0" standalone="no"?>

2 <!DOCTYPE svg PUBLIC " -//W3C//DTD SVG 1.1//EN"

3 "http ://www.w3.org/Graphics/SVG /1.1/ DTD/svg11.dtd">

4 <svg xmlns="http :// www.w3.org /2000/ svg" version="1.1"

5 width="500" height="500">

6 <rect transform="rotate (30, 250, 250)"

7 x="100" y="150" width="300" height="200"

8 fill="blue" stroke="red" stroke -width="2" />

9 </svg >

3引数の rotateを用いずに，同等の座標変換を記述せよ．

...2 P0(27, 27), P1(54, 54), P2(81, 54), P3(108, 27) を制御点とする 3次ベジエ曲線を SVGで描け．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 17 / 22

. . . . . .

課題 1：SVG描画プログラム

SVG描画プログラム Render2Dを実装せよ．途中まで実装されたものが，Render2D.zipとして授業支援システムから入手できる．これは Eclipseのアーカイブファイルであり，Eclipseにインポート可能である．

追記：インポートは，Eclipseのメニューで「ファイル」→「インポート」を選択し，「一般」の「既存プロジェクトをワークスペースへ」を選択し，「アーカイブ・ファイルの選択」で Render2D.zipを参照し，「すべて選択」の後，「完了」とすればよい．

基本的には，後述の指示に従ってソースファイル Render2D.javaを完成させればよい．

本プログラムでは画面描画のために Processingのライブラリ core.jarを用いているが，特に深い知識は必要としない．

テスト用の例題 test.svgがプロジェクトに含まれる．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 18 / 22

. . . . . .

課題 1：SVG描画プログラム (続き)

具体的な課題は以下の通り (より詳細な説明がソースファイル内にある)．...1 (a) メソッドMatrix.transformを完成させよ．(b) メソッドMatrix.multiplyを完成させよ．(c) メソッド Element.transformを完成させよ．(d) メソッド Element.translateを完成させよ．(e) メソッド Element.scaleを完成させよ．(f) メソッド Element.rotateを完成させよ．

...2 メソッド PolyShapeElement.drawLinesを完成させよ．

...3 メソッド RoundShapeElement.drawArcを完成させよ．

...4 メソッド PathElement.drawBezierを完成させよ．

...5 (a) メソッドMatrix.inverseを完成させよ．(b) メソッド ImageElement.mapを完成させよ．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 19 / 22

. . . . . .

課題 1：SVG描画プログラム (続き)

締切：10月 22日 (火) 23:55

提出先：授業支援システム提出物：

以下を含むレポート (Wordまたは PDFファイル)

学生証番号，氏名課題の各設問に対して作成したプログラムに関する説明．プログラム作成のために行った考察等を記述する．設問5(b)以外は簡潔なものでよい．完成させたプログラムで例題 test.svgを表示した結果の画像

完成させた Render2D.java

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 20 / 22

. . . . . .

課題 1：SVG描画プログラム (続き)

補足：

原則として，プログラムは自力で完成させること．

自力で完成できなかった場合，レポートには，どこまではわかっていて，どこからがわからなかったかを書くようにすること．

他人のプログラムのコピーは絶対に禁止．

クリッピングやラスタ化を実装する必要はない．円やベジエ曲線の描画には，Processingにあらかじめ実装されたメソッドを用いるのではなく，自分で作成すること．

適当な個数の辺からなるポリラインとして近似する．

本プログラムでは stroke-widthに対する座標変換を考慮していないが，そのままで構わない．

このために，大きな scaleなどが指定されている場合には，全く異なる結果が得られる．

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 21 / 22

. . . . . .

まとめ

色彩の表現

可視光，光の 3原色

加法混色，減法混色

カラーモデル

CGにおける色の扱い

SVG

課題 1：SVG描画プログラム

細部 博史 (法政大学) コンピュータグラフィックス 2013 年 10 月 9 日 22 / 22