Skip to content

Instantly share code, notes, and snippets.

@cou929

cou929/colorspace.js

Last active December 12, 2015 08:39
Show Gist options
  • Save cou929/4745898 to your computer and use it in GitHub Desktop.
Save cou929/4745898 to your computer and use it in GitHub Desktop.
Download ZIP
HSV色空間
Raw
colorspace.js
(function(define) {
define([], function() {
'use strict';
var ColorSpace = function() {};
ColorSpace.prototype.HSVtoRGB = function(h, s, v) {
var r, g, b;
while (h < 0) {
h += 360;
}
h = h % 360;
if (s == 0) {
v = Math.round(v);
return { 'r': v, 'g': v, 'b': v };
}
s = s / 255;
var i = Math.floor(h / 60) % 6,
f = (h / 60) - i,
p = v * (1 - s),
q = v * (1 - f * s),
t = v * (1 - (1 - f) * s);
switch (i) {
case 0 :
r = v; g = t; b = p; break;
case 1 :
r = q; g = v; b = p; break;
case 2 :
r = p; g = v; b = t; break;
case 3 :
r = p; g = q; b = v; break;
case 4 :
r = t; g = p; b = v; break;
case 5 :
r = v; g = p; b = q; break;
}
return {
'r': Math.round(r), 'g': Math.round(g), 'b': Math.round(b)
};
};
ColorSpace.prototype.RGBtoHSV = function(r, g, b, coneModel) {
var h, s, v,
max = Math.max(Math.max(r, g), b),
min = Math.min(Math.min(r, g), b);
if (max == min) {
h = 0;
} else if (max == r) {
h = 60 * (g - b) / (max - min) + 0;
} else if (max == g) {
h = (60 * (b - r) / (max - min)) + 120;
} else {
h = (60 * (r - g) / (max - min)) + 240;
}
while (h < 0) {
h += 360;
}
if (coneModel) {
s = max - min;
} else {
s = (max == 0) ? 0 : (max - min) / max * 255;
}
v = max;
return { 'h': h, 's': s, 'v': v };
};
return ColorSpace;
});
})(typeof define !== 'undefined' ?
define :
typeof module !== 'undefined' ?
function(deps, factory) { module.exports = factory(); } :
function(deps, factory) { this['ColorSpace'] = factory(); }
);
Raw
sample.html
<!DOCTYPE html>
<html>
<head>
<script src="colorspace.js"></script>
</head>
<body>
<div style="margin: 10px; padding: 10px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.5)">
<div style="float: right; color: #ccc; font-size: 2em; font-family: menlo, sans-serif">
<p style="margin: 0">(h, s, v) = (<span id="h-value"></span>, <span id="s-value"></span>, <span id="v-value"></span>)</p>
<p style="margin: 0">(r, g, b) = (<span id="r-value"></span>, <span id="g-value"></span>, <span id="b-value"></span>)</p>
</div>
<div>
<input type="range" name="h" id="h" min="0" max="360" value="0"/><br/>
<input type="range" name="s" id="s" min="0" max="255" value="0"/><br/>
<input type="range" name="v" id="v" min="0" max="255" value="255"/>
</div>
<div style="clear: both"></div>
</div>
<script>
(function() {
var Color = new ColorSpace(),
interval = 100,
memo = { 'h': -1, 's': -1, 'v': -1 },
target = document.body,
input_h = document.getElementById('h'),
input_s = document.getElementById('s'),
input_v = document.getElementById('v'),
value_h = document.getElementById('h-value'),
value_s = document.getElementById('s-value'),
value_v = document.getElementById('v-value'),
value_r = document.getElementById('r-value'),
value_g = document.getElementById('g-value'),
value_b = document.getElementById('b-value');
window.setInterval(function(e) {
var h = parseInt(input_h.value, 10),
s = parseInt(input_s.value, 10),
v = parseInt(input_v.value, 10);
if (memo.h != h || memo.s != s || memo.v != v) {
var rgb = Color.HSVtoRGB(h, s, v),
style = 'background-color: rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
target.setAttribute('style', style);
value_h.innerHTML = h; value_s.innerHTML = s; value_v.innerHTML = v;
value_r.innerHTML = rgb.r; value_g.innerHTML = rgb.g; value_b.innerHTML = rgb.b;
memo.h = h; memo.s = s; memo.v = v;
}
}, interval);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment