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

Size: px

Start display at page:

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

そよつつの
4 years ago
Views:

1 ( ) / 22

2 3 3 3 ( ) / 22

3 380 nm 780 nm 1 nm = 10 9 m ( ) / 22

4 3 3 (S M L ) ( ) / 22

5 加法混色光の 3 原色を組み合わせることで様々な色を表現できる光を重ねて別の色を作ることを加法混色と呼ぶコンピュータのディスプレイは光の 3 原色の加法混色を行う㯮㟷䝅䜰䞁䝬䝊䞁䝍㯤. 細部博史 (法政大学) コンピュータグラフィックス年 10 月 9 日. 5 / 22

6 3 ( ) / 22

7 ( 3 4 ) RGB CMY YIQ HSV (color system) XYZ ( ) / 22

8 RGB, CMY RGB 3 (red) (green) (blue) CMY (cyan) (magenta) (yellow) 0 1 RGB, CMY R C 1 G B + M Y = 1 1 ( ) / 22

9 YIQ Y, 2 I ( ), Q ( ) NTSC RGB, YIQ Y I = Q R G B ( ) / 22

10 HSV (hue) (saturation) (value) RGB CG ( ) / 22

11 CG 3 RGB RGB R, G, B 8 (0 255) 24 8 (0 255 ) (RGB 32 ) RGB FFFFFF, FF00FF CSS3 SVG ( ) / 22

12 (1).1 80C0FF ( ) / 22

13 Scalable Vector Graphics (SVG) 2 CG W3C (HTML ) XML Internet Explorer Firefox Chrome ( ) / 22

14 SVG ( ) ( svg) 1 <? xml version =" 1.0 " standalone ="no"?> 2 <! DOCTYPE svg PUBLIC " -// W3C // DTD SVG 1.1// EN" 3 " http :// / Graphics / SVG /1.1/ DTD / svg11. dtd "> 4 <svg xmlns =" http :// /2000/ svg " version =" 1.1 " 5 width =" " height =" "> 6  7 </svg > 2 ( ) / 22

15 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> ( ) / 22

16 SVG ( ) g transform 1 <g transform =" translate ( -10, -20) scale (2) rotate (45) 2 translate (5,10) "> 3  4 </g> translate(tx, ty) : T (t x, t y ) scale(sx, sy) : S(s x, s y ) rotate(a) : R(a) matrix, 1 translate, 1 scale, 3 rotate, skewx, skewy transform ( ) / 22

17 (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 :// / Graphics / SVG /1.1/ DTD / svg11. dtd "> 4 <svg xmlns =" http :// /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 P 0 (27, 27), P 1 (54, 54), P 2 (81, 54), P 3 (108, 27) 3 SVG ( ) / 22

18 1 SVG SVG Render2D Render2D.zip Eclipse Eclipse Eclipse Render2D.zip Render2D.java Processing core.jar test.svg ( ) / 22

19 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 ( ) / 22

20 1 SVG ( ) ( ) 23:55 (Word PDF ) 5(b) test.svg Render2D.java ( ) / 22

21 1 SVG ( ) Processing stroke-width scale ( ) / 22

22 3 CG SVG 1 SVG ( ) / 22

G-XML

G-XML G-XML PreSerV for WebG-XML G-XML i 1... 3 1.1 G-XML... 3 1.2... 3 1.3... 4 1.4... 5 2 G-XML... 6 2.1... 6 2.2... 8 2.2.1... 9 2.2.2...13 2.2.3...14 2.2.4...16 2.2.5...16 2.3...17 2.3.2...17 2.3.3...17

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

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