EN
JavaScript - HSV color space visualization
4 points
In this article, we would like to show how using JavaScript, visualize HSV color space.
Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#space { border: 1px solid silver; }7
8
</style>9
</head>10
<body>11
<canvas id="space" width="520" height="150"></canvas>12
<script>13
14
// Utils:15
16
function toRgb$1(hsv) {17
var d = 0.0166666666666666 * hsv.hue;18
var c = hsv.value * hsv.saturation;19
var x = c - c * Math.abs(d % 2.0 - 1.0);20
var m = hsv.value - c;21
c += m;22
x += m;23
switch (d >>> 0) {24
case 0: return {red: c, green: x, blue: m};25
case 1: return {red: x, green: c, blue: m};26
case 2: return {red: m, green: c, blue: x};27
case 3: return {red: m, green: x, blue: c};28
case 4: return {red: x, green: m, blue: c};29
}30
return {red: c, green: m, blue: x};31
}32
33
function toRgb$2(hsv) {34
var rgb = toRgb$1(hsv);35
return {36
red: Math.round(255 * rgb.red),37
green: Math.round(255 * rgb.green),38
blue: Math.round(255 * rgb.blue)39
};40
}41
42
function drawPixel(data, width, x, y, rgb) {43
var roundedX = Math.round(x);44
var roundedY = Math.round(y);45
var index = 4 * (width * roundedY + roundedX);46
data[index + 0] = rgb.red;47
data[index + 1] = rgb.green;48
data[index + 2] = rgb.blue;49
data[index + 3] = 255;50
}51
52
// Example:53
54
var canvas = document.querySelector('#space');55
var context = canvas.getContext('2d');56
57
var image = context.createImageData(canvas.width, canvas.height);58
59
var hLimit = canvas.width - 1;60
var sLimit = canvas.height - 1;61
62
for (var x = 0; x < canvas.width; x += 1) {63
for (var y = 0; y < canvas.height; y += 1) {64
var hsv = {65
hue: 360.0 * (x / hLimit),66
saturation: 1.0 * (y / sLimit),67
value: 1.0 // HSV value component (from 0 to 1)68
};69
var rgb = toRgb$2(hsv);70
drawPixel(image.data, canvas.width, x, y, rgb);71
}72
}73
74
context.putImageData(image, 0, 0);75
76
</script>77
</body>78
</html>
In this section, value component is configurable.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#space { border: 1px solid silver; }7
8
.field { margin: 20px 0 0 0; display: block; }9
.label { display: block; }10
.input { width: 520px; }11
12
</style>13
</head>14
<body>15
<canvas id="space" width="520" height="150"></canvas>16
<script>17
18
// Utils:19
20
function toRgb$1(hsv) {21
var d = 0.0166666666666666 * hsv.hue;22
var c = hsv.value * hsv.saturation;23
var x = c - c * Math.abs(d % 2.0 - 1.0);24
var m = hsv.value - c;25
c += m;26
x += m;27
switch (d >>> 0) {28
case 0: return {red: c, green: x, blue: m};29
case 1: return {red: x, green: c, blue: m};30
case 2: return {red: m, green: c, blue: x};31
case 3: return {red: m, green: x, blue: c};32
case 4: return {red: x, green: m, blue: c};33
}34
return {red: c, green: m, blue: x};35
}36
37
function toRgb$2(hsv) {38
var rgb = toRgb$1(hsv);39
return {40
red: Math.round(255 * rgb.red),41
green: Math.round(255 * rgb.green),42
blue: Math.round(255 * rgb.blue)43
};44
}45
46
function drawPixel(data, width, x, y, rgb) {47
var roundedX = Math.round(x);48
var roundedY = Math.round(y);49
var index = 4 * (width * roundedY + roundedX);50
data[index + 0] = rgb.red;51
data[index + 1] = rgb.green;52
data[index + 2] = rgb.blue;53
data[index + 3] = 255;54
}55
56
// Example:57
58
var canvas = document.querySelector('#space');59
var context = canvas.getContext('2d');60
61
var image = context.createImageData(canvas.width, canvas.height);62
63
var hLimit = canvas.width - 1;64
var sLimit = canvas.height - 1;65
66
function drawSpace(vValue) {67
for (var x = 0; x < canvas.width; x += 1) {68
for (var y = 0; y < canvas.height; y += 1) {69
var hsv = {70
hue: 360.0 * (x / hLimit),71
saturation: 1.0 * (y / sLimit),72
value: vValue73
};74
var rgb = toRgb$2(hsv);75
drawPixel(image.data, canvas.width, x, y, rgb);76
}77
}78
context.putImageData(image, 0, 0);79
}80
81
drawSpace(1.0);82
83
</script>84
<label class="field">85
<span class="label">HSV value component (form 0 to 1):</span>86
<input87
class="input"88
type="range"89
value="1"90
min="0"91
max="1"92
step="0.01"93
oninput="drawSpace(parseFloat(this.value))"94
/>95
</label>96
</body>97
</html>
