Skip to content

Instantly share code, notes, and snippets.

@guibranco
Last active October 2, 2018 01:20
Show Gist options
  • Save guibranco/402f3c1ee22b14ed3d5b0562f1142713 to your computer and use it in GitHub Desktop.
Save guibranco/402f3c1ee22b14ed3d5b0562f1142713 to your computer and use it in GitHub Desktop.
Generates a smoothness ordering of a RGB array to a linear gradient scale
function smooth(r, g, b, repetitions){
/* Returns a smootheness HSV translation to a RGB value
@author: Guilherme Branco Stracini (guilherme[at]editorainovacoa[dot]com[dot]br)
@date: 2017-10-24
@version: 1.0
@remarks: Based on Python implementation of https://www.alanzucconi.com/2015/09/30/colour-sorting/ (accessed on 2017-10-24)
@returns: {Object} Returns a object containing the H, S and V keys for each item (Hue, Saturation and Value)
*/
var lum, hsv, h, v;
lum = Math.sqrt(.241 * r + .691 * g + .068 * b);
hsv = rgb2hsv(r, g, b);
h = parseInt(hsv.H * repetitions);
v = parseInt(hsv.V * repetitions);
if (h % 2 == 1)
{
v = repetitions - v;
lum = repetitions - lum;
}
return {H: h, S: lum, V: v};
}
function rgb2hsv(r, g, b){
/* Returns a degree value between 0ยบ and 360ยบ for the defined hue angle,
the saturation and the brightness varying between 0 and 1 as the min and max value available
for a input R G B variables (representing Red, Green and Blue between 0 and 255)
@author: Guilherme Branco Stracini (guilherme[at]editorainovacoa[dot]com[dot]br)
@date: 2017-10-24
@version: 1.0
@remarks: Based on formula available at http://www.ufrgs.br/engcart/PDASR/formulario1.html (accessed on 2017-10-24)
@returns {Object} Returns an object with H, S and V keys
*/
var max, min, h, c;
r = r / 255; //Converts 0...255 to 0...1
g = g / 255; //Converts 0...255 to 0...1
b = b / 255; //Converts 0...255 to 0...1
max = Math.max(r, g, b);
min = Math.min(r, g, b);
c = max - min;
if(c == 0)
c = 1;
if (max == r && g >= b)
h = 60 * (g - b) / c;
else if (max == r /*&& g < b*/)
h = 60 * (g - b) / c + 360;
else if (max == g)
h = 60 * (b - r) / c + 120;
else //if (max == b)
h = 60 * (r - g) / c + 240;
return {H: h, S: c / max, V: max};
}
function hex2RGB(hex){
/* Converts a hexadecimal value to a RGB object that vary between 0 and 255
the saturation and the brightness varying between 0 and 1 as the min and max value available
for a input R G B variables (representing Red, Green and Blue between 0 and 255)
@author: Guilherme Branco Stracini (guilherme[at]editorainovacoa[dot]com[dot]br)
@date: 2017-10-24
@version: 1.0
@returns {Object} Returns an object with R, G and B keys
@example
//returns {R: 255, G: 255, B: 255};
hex2RGB('#FFFFFF');
@example
//returns {R: 255, G: 51, B: 0};
hex2RGB('#FF3300');
*/
var r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if(!r)
return null;
return {R: parseInt(r[1], 16), G: parseInt(r[2], 16), B: parseInt(r[3], 16)};
}
function smoothHexSort(hexA, hexB){
/* Provides a sorting filter for a hexadecimal values, using a smoothness pattern
@author: Guilherme Branco Stracini (guilherme[at]editorainovacoa[dot]com[dot]br)
@date: 2017-10-24
@version: 1.0
@returns {Number} A value for filtering
*/
var rgbA = hex2RGB(hexA);
var rgbB = hex2RGB(hexB);
var sumA = rgbA.R + rgbA.G + rgbA.B;
var sumB = rgbB.R + rgbB.G + rgbB.B;
var hsvA = smooth(rgbA.R, rgbA.G, rgbA.B, 8);
var hsvB = smooth(rgbB.R, rgbB.G, rgbB.B, 8);
var a = hsvA.H + hsvA.S + hsvA.V;
var b = hsvB.H + hsvB.S + hsvB.V;
return a - b;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment