From 473a67165510c48dbe626a61a3e54b8f2a8b2207 Mon Sep 17 00:00:00 2001 From: Timothy Austen Date: Fri, 30 Oct 2015 13:12:31 +0200 Subject: [PATCH 1/5] Add function boundInfinity --- tinycolor.js | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/tinycolor.js b/tinycolor.js index f3e5cda..6fcead2 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -407,7 +407,7 @@ function rgbToHsl(r, g, b) { function hslToRgb(h, s, l) { var r, g, b; - h = bound01(h, 360); + h = boundInfinity(h, 360); s = bound01(s, 100); l = bound01(l, 100); @@ -470,7 +470,7 @@ function rgbToHsv(r, g, b) { // *Returns:* { r, g, b } in the set [0, 255] function hsvToRgb(h, s, v) { - h = bound01(h, 360) * 6; + h = boundInfinity(h, 360) * 6; s = bound01(s, 100); v = bound01(v, 100); @@ -993,7 +993,28 @@ function bound01(n, max) { return (n % max) / parseFloat(max); } -// Force a number between 0 and 1 +// Take input from [-infinity, infinity] and return it as [0, 1] +function boundInfinity(n, max) { + if (isOnePointZero(n)) { n = "100%"; } + + var processPercent = isPercentage(n); + n = mathMin(max, mathMax(0, parseFloat(n))); + + // Automatically convert percentage into number + if (processPercent) { + n = parseInt(n * max, 10) / 100; + } + + // Handle floating point rounding errors + if ((math.abs(n - max) < 0.000001)) { + return 1; + } + + // Convert into [0, 1] range if it isn't already + return (n < 0 ? n % max + max : m1 % max) / parseFloat(max); +} + + // Force a number between 0 and 1 function clamp01(val) { return mathMin(1, mathMax(0, val)); } From a04d9d9fff6317c8618d8923a557d664275133ff Mon Sep 17 00:00:00 2001 From: Timothy Austen Date: Fri, 30 Oct 2015 13:20:34 +0200 Subject: [PATCH 2/5] Fix function boundInfinity --- tinycolor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tinycolor.js b/tinycolor.js index 6fcead2..62e99a2 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -1011,7 +1011,7 @@ function boundInfinity(n, max) { } // Convert into [0, 1] range if it isn't already - return (n < 0 ? n % max + max : m1 % max) / parseFloat(max); + return (n < 0 ? n % max + max : n % max) / parseFloat(max); } // Force a number between 0 and 1 From b82f92197c86bf627ba3023b53a900efe8bcbf47 Mon Sep 17 00:00:00 2001 From: Timothy Austen Date: Fri, 30 Oct 2015 18:17:44 +0200 Subject: [PATCH 3/5] Normalize values for degrees that are not [0,360] --- testcolorwheel/index.html | 92 +++++++++++++++++++++++++++++++++++++++ tinycolor.js | 10 ----- 2 files changed, 92 insertions(+), 10 deletions(-) create mode 100644 testcolorwheel/index.html diff --git a/testcolorwheel/index.html b/testcolorwheel/index.html new file mode 100644 index 0000000..6b5176b --- /dev/null +++ b/testcolorwheel/index.html @@ -0,0 +1,92 @@ + + + + + Color wheel test + + +
+
+ + + + + + + diff --git a/tinycolor.js b/tinycolor.js index 62e99a2..c18db4e 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -995,16 +995,6 @@ function bound01(n, max) { // Take input from [-infinity, infinity] and return it as [0, 1] function boundInfinity(n, max) { - if (isOnePointZero(n)) { n = "100%"; } - - var processPercent = isPercentage(n); - n = mathMin(max, mathMax(0, parseFloat(n))); - - // Automatically convert percentage into number - if (processPercent) { - n = parseInt(n * max, 10) / 100; - } - // Handle floating point rounding errors if ((math.abs(n - max) < 0.000001)) { return 1; From 9307a226c46bfd73af4d0c76ef96b2bd6e0694ca Mon Sep 17 00:00:00 2001 From: Timothy Austen Date: Sat, 31 Oct 2015 12:25:49 +0200 Subject: [PATCH 4/5] Add functionality to function bound01 to handle values given in degrees. Remove function boundInfinity. --- testcolorwheel/index.html | 56 +++++++++++---------------------------- tinycolor.js | 32 +++++++++++----------- 2 files changed, 32 insertions(+), 56 deletions(-) diff --git a/testcolorwheel/index.html b/testcolorwheel/index.html index 6b5176b..42e8a5c 100644 --- a/testcolorwheel/index.html +++ b/testcolorwheel/index.html @@ -30,13 +30,7 @@ // Production cdn // https://cdn.jsdelivr.net/tinycolor/1.2.1/tinycolor-min.js -var outOfRangeHue = -700, - normalizedHue, - outOfRangeHslString, - normalizedHslString, - hueHtmlOutOfRange, - hueHtmlNormalized, - rgb; +var outOfRangeHue = -700; // Core function to add to tinycolor.js function normalizeOutOfRangeHue(m1) { @@ -46,44 +40,26 @@ // Implement library function write2doc() { + // Show output in document + var normalizedHue; outOfRangeHue += 1; normalizedHue = normalizeOutOfRangeHue(outOfRangeHue); - // Show output in document - outOfRangeHslString = 'hsl ' + outOfRangeHue + ' 100% 50%'; - hueHtmloutOfRange = 'Out-of-range hue: ' + - outOfRangeHue + '
' + - tinycolor(outOfRangeHslString).toHslString(); - document.getElementById('outOfRange') - .style - .backgroundColor = tinycolor(outOfRangeHslString).toRgbString(); - document.getElementById('outOfRange') - .innerHTML = hueHtmloutOfRange; - - normalizedHslString = 'hsl ' + normalizedHue + ' 100% 50%'; - hueHtmlNormalized = 'Normalized hue: ' + - normalizedHue + '
' + - tinycolor(normalizedHslString).toHslString(); - document.getElementById('normalized') - .style - .backgroundColor = tinycolor(normalizedHslString).toRgbString(); - document.getElementById('normalized') - .innerHTML = hueHtmlNormalized; - + function htmlOutput(hue, hueDesc, rangeId) { + var hslString = 'hsl ' + hue + ' 100% 50%'; + hueHtml = hueDesc + + hue + '
' + + tinycolor(hslString).toHslString(); + document.getElementById(rangeId) + .style + .backgroundColor = tinycolor(hslString).toRgbString(); + document.getElementById(rangeId) + .innerHTML = hueHtml; + } + htmlOutput(outOfRangeHue, 'Out-of-range hue: ', 'outOfRange'); + htmlOutput(normalizedHue, 'Normalized hue: ', 'normalized'); } setInterval(write2doc, 10); - -// Show output in document -outOfRangeHslString = 'hsl ' + outOfRangeHue + ' 100% 50%'; -hueHtmloutOfRange = 'Out-of-range hue: ' + - outOfRangeHue + '
' + - tinycolor(outOfRangeHslString).toHslString(); -document.getElementById('outOfRange') - .style - .backgroundColor = tinycolor(outOfRangeHslString).toRgbString(); -document.getElementById('outOfRange') - .innerHTML = hueHtmloutOfRange; - //]]> diff --git a/tinycolor.js b/tinycolor.js index c18db4e..f12ed1e 100644 --- a/tinycolor.js +++ b/tinycolor.js @@ -407,7 +407,7 @@ function rgbToHsl(r, g, b) { function hslToRgb(h, s, l) { var r, g, b; - h = boundInfinity(h, 360); + h = bound01(h, 360); s = bound01(s, 100); l = bound01(l, 100); @@ -470,7 +470,7 @@ function rgbToHsv(r, g, b) { // *Returns:* { r, g, b } in the set [0, 255] function hsvToRgb(h, s, v) { - h = boundInfinity(h, 360) * 6; + h = bound01(h, 360) * 6; s = bound01(s, 100); v = bound01(v, 100); @@ -977,7 +977,8 @@ function bound01(n, max) { if (isOnePointZero(n)) { n = "100%"; } var processPercent = isPercentage(n); - n = mathMin(max, mathMax(0, parseFloat(n))); + // If range [0,360] then do nothing. + n = max === 360 ? n : mathMin(max, mathMax(0, parseFloat(n))); // Automatically convert percentage into number if (processPercent) { @@ -989,21 +990,20 @@ function bound01(n, max) { return 1; } - // Convert into [0, 1] range if it isn't already - return (n % max) / parseFloat(max); -} - -// Take input from [-infinity, infinity] and return it as [0, 1] -function boundInfinity(n, max) { - // Handle floating point rounding errors - if ((math.abs(n - max) < 0.000001)) { - return 1; + if (max === 360) { + // If n is a hue given in degrees, + // wrap around out-of-range values into [0, 360] range + // then convert into [0, 1]. + n = (n < 0 ? n % max + max : n % max) / parseFloat(max); + } else { + // If n not a hue given in degrees + // Convert into [0, 1] range if it isn't already. + n = (n % max) / parseFloat(max); } - - // Convert into [0, 1] range if it isn't already - return (n < 0 ? n % max + max : n % max) / parseFloat(max); -} + return n; +} + // Force a number between 0 and 1 function clamp01(val) { return mathMin(1, mathMax(0, val)); From b619bc3f66cf294b2d3c918b9a6a3f441491b6a0 Mon Sep 17 00:00:00 2001 From: Timothy Austen Date: Sun, 1 Nov 2015 19:38:01 +0200 Subject: [PATCH 5/5] Remove test folder --- testcolorwheel/index.html | 68 --------------------------------------- 1 file changed, 68 deletions(-) delete mode 100644 testcolorwheel/index.html diff --git a/testcolorwheel/index.html b/testcolorwheel/index.html deleted file mode 100644 index 42e8a5c..0000000 --- a/testcolorwheel/index.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - Color wheel test - - -
-
- - - - - - -