| ポイント |
<![CDATA[
r = g = b = 0;
if (s < 0) s = 0;
if (s > 1) s = 1;
if (v < 0) v = 0;
if (v > 1) v = 1;
h = h % 360;
if (h < 0) h = h + 360;
h = h / 60;
i = Math.floor(h);
f = h - i;
p1 = v * (1 - s);
p2 = v * (1 - s*f);
p3 = v * (1 - s*(1 - f));
if (i == 0) { r = v; g = p3; b = p1; }
if (i == 1) { r = p2;g = v; b = p1; }
if (i == 2) { r = p1;g = v; b = p3; }
if (i == 3) { r = p1;g = p2; b = v; }
if (i == 4) { r = p3;g = p1; b = v; }
if (i == 5) { r = v; g = p1; b = p2; }
]]>
|
| 説 明 |
このプログラムは技術評論社「C言語による最新プログラム辞典」第二巻を参考にJavaScript風にアレンジしましたものです。
カラーチャートサンプルを表示 |
| サンプル |
<![CDATA[
<html>
<head>
<title>HSV→RGB</title>
<script Language="JavaScript"><!--
function HSVtoRGB()
{
h = eval(document.myFORM.H.value);
s = eval(document.myFORM.S.value);
v = eval(document.myFORM.V.value);
r = g = b = 0;
if (s < 0) s = 0;
if (s > 1) s = 1;
if (v < 0) v = 0;
if (v > 1) v = 1;
h = h % 360;
if (h < 0) h = h + 360;
h = h / 60;
i = Math.floor(h);
f = h - i;
p1 = v * (1 - s);
p2 = v * (1 - s*f);
p3 = v * (1 - s*(1 - f));
if (i == 0) { r = v; g = p3; b = p1; }
if (i == 1) { r = p2;g = v; b = p1; }
if (i == 2) { r = p1;g = v; b = p3; }
if (i == 3) { r = p1;g = p2; b = v; }
if (i == 4) { r = p3;g = p1; b = v; }
if (i == 5) { r = v; g = p1; b = p2; }
document.myFORM.red.value = r;
document.myFORM.green.value = g;
document.myFORM.blue.value = b;
}
// --></script>
</head>
<body>
HSV (Hue, Saturation, Value) → RGB
<form name="myFORM">
H：<input type="text" name="H"><br>
S：<input type="text" name="S"><br>
V：<input type="text" name="V"><br>
<input type="button" onClick="HSVtoRGB()" value="RGBに変換"><br>
赤(R)：<input type="text" name="red"><br>
緑(G)：<input type="text" name="green"><br>
青(B)：<input type="text" name="blue"><br>
</form>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
HSV→RGB