| ポイント |
<![CDATA[
X = 0.412391 * r + 0.357584 * g + 0.180481 * b;
Y = 0.212639 * r + 0.715169 * g + 0.072192 * b;
Z = 0.019331 * r + 0.119195 * g + 0.950532 * b;
x = Math.floor((X / (X + Y + Z)) * s);
y = Math.floor((Y / (X + Y + Z)) * s);
]]>
|
| 説 明 |
RGBカラーをCIE空間にマッピングするにはRGBをCIE XYZに変換します。RGBからXYZへの変換については■変換を参照してください。変換された値を元にz=0としてx=(X/(X+Y+Z))、y=(Y/(X+Y+Z))としてマッピングする座標を計算します。スタイルシートを利用して座標と表示色を指定しdocument.write()でタグごと出力します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>RGBカラーをCIE空間に描く</title>
</head>
<body>
<script language="JavaScript"><!--
s = 500;
bs = 12;
function drawBar()
{
zindex = 0;
for (r=0; r<=255; r+=51)
{
for (g=0; g<=255; g+=51)
{
for (b=0; b<=255; b+=51)
{
X = 0.412391 * r + 0.357584 * g + 0.180481 * b;
Y = 0.212639 * r + 0.715169 * g + 0.072192 * b;
Z = 0.019331 * r + 0.119195 * g + 0.950532 * b;
x = Math.floor((X / (X + Y + Z)) * s);
y = Math.floor((Y / (X + Y + Z)) * s);
zindex++;
str = "<div style='position:absolute;width:"+bs+"px;height:"+bs+"px;z-index:"+zindex+";";
str = str + "background-color:rgb("+r+","+g+","+b+");";
str = str + "border:1px solid #808080;left:"+x+";top:"+y+"'></div>";
document.write(str);
}
}
}
}
drawBar();
// --></script>
</body>
</html>
]]>
|
| 補足説明 |
サンプルではマッピングされるY座標がコンピューターの座標になっているため数学座標系に修正するにはy = 300 - y;（300は基準原点のY座標）のようにします。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
RGBカラーをCIE空間に描く