Skip to content

Instantly share code, notes, and snippets.

@jonathanmarvens
Last active December 15, 2015 14:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jonathanmarvens/5276974 to your computer and use it in GitHub Desktop.
Save jonathanmarvens/5276974 to your computer and use it in GitHub Desktop.
/**
* @author Jonathan Barronville
* @example
* var color_001 = colorShader( '000000', 255 );
* // color_001 === 'ffffff';
* var color_002 = colorShader( 'ffffff', -255 );
* // color_002 === '000000';
* @param {String} color_hex
* @param {Number} amount
* @return {String}
*/
function colorShader( color_hex, amount ) {
'use strict';
if ( ! isHexColorString( color_hex ) ) {
return null;
}
var color_number = parseInt( color_hex, 16 );
var color_rgb = {
'r': ( ( color_number >> 16 ) + amount ),
'g': ( ( color_number & 0xFF ) + amount ),
'b': ( ( ( color_number >> 8 ) & 0xFF ) + amount )
};
if ( color_rgb.r > 0xFF ) {
color_rgb.r = 0xFF;
} else if ( color_rgb.r < 0x00 ) {
color_rgb.r = 0x00;
}
if ( color_rgb.g > 0xFF ) {
color_rgb.g = 0xFF;
} else if ( color_rgb.g < 0x00 ) {
color_rgb.g = 0x00;
}
if ( color_rgb.b > 0xFF ) {
color_rgb.b = 0xFF;
} else if ( color_rgb.b < 0x00 ) {
color_rgb.b = 0x00;
}
var color_new = (
( color_rgb.r << 16 ) | color_rgb.g | ( color_rgb.b << 8 )
).toString( 16 );
if ( color_new.length === 6 ) {
return color_new;
} else {
return ( (
new Array( ( 6 - color_new.length ) + 1 )
).join( '0' ) + color_new );
}
}
function colorShader(a,b){"use strict";if(!isHexColorString(a))return null;var c=parseInt(a,16),d={r:(c>>16)+b,g:(255&c)+b,b:(255&c>>8)+b};d.r>255?d.r=255:0>d.r&&(d.r=0),d.g>255?d.g=255:0>d.g&&(d.g=0),d.b>255?d.b=255:0>d.b&&(d.b=0);var e=(d.r<<16|d.g|d.b<<8).toString(16);return 6===e.length?e:Array(6-e.length+1).join("0")+e}
/**
* @author Jonathan Barronville
* @param {String} hex_string
* @return {Boolean}
*/
function isHexColorString( hex_string ) {
'use strict';
if ( {}.toString.call( hex_string ) !== '[object String]' ) {
return false;
}
hex_string = hex_string.trim();
if ( ! ( /^[0-9a-f]{6}$/i ).test( hex_string ) ) {
return false;
}
return true;
}
function isHexColorString(a){"use strict";return"[object String]"!=={}.toString.call(a)?!1:(a=a.trim(),/^[0-9a-f]{6}$/i.test(a)?!0:!1)}
@nicholasruunu
Copy link

Can't you make this an array and loop over it since you're repeating your actions? :)
https://gist.github.com/jonathanmarvens/5276974#file-color-shader-js-L20

@jonathanmarvens
Copy link
Author

@nicholasruunu: Example?

@nicholasruunu
Copy link

@jonathanmarvens
Javascript is not my strong side, but shouldn't this work?
https://gist.github.com/nicholasruunu/5277063

@nicholasruunu
Copy link

Ah yes, that's what I was trying to do. :)

@jonathanmarvens
Copy link
Author

@nicholasruunu: Thanks, dude! [:)].

@jonathanmarvens
Copy link
Author

@nicholasruunu: It turns out that, after minification & optimizations, the more verbose version with the multiple if ( ... ) { ... } else if ( ... ) { ... } statements is faster. http://bit.ly/10aO1iy. [ ¯(°_o)/¯ ].

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment