Skip to content

Instantly share code, notes, and snippets.

@twobob
Created September 22, 2023 20:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save twobob/153fa992bd8403128b90c2fb01ad6db9 to your computer and use it in GitHub Desktop.
Save twobob/153fa992bd8403128b90c2fb01ad6db9 to your computer and use it in GitHub Desktop.
chainable Javascript colour filter Object function prototype
// Object.prototype YMMV
const ColorOperation = {
XOR: 'XOR',
DIFF: 'DIFF',
ADD: 'ADD',
SUB: 'SUB',
MAX: 'MAX',
AVG: 'AVG'
};
Object.prototype.filterColours = function(tint, operation = ColorOperation.ADD) {
function componentToHex(c) {
const hex = c.toString(16);
return hex.length === 1 ? "0" + hex : hex;
}
function hexToRgb(hex) {
const bigint = parseInt(hex.substring(1), 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return [r, g, b];
}
const tintRgb = hexToRgb(tint);
for (const [key, color] of Object.entries(this)) {
const colorRgb = hexToRgb(color);
let newR, newG, newB;
switch (operation) {
case ColorOperation.ADD:
newR = Math.min(colorRgb[0] + tintRgb[0], 255);
newG = Math.min(colorRgb[1] + tintRgb[1], 255);
newB = Math.min(colorRgb[2] + tintRgb[2], 255);
break;
case ColorOperation.SUB:
newR = Math.max(colorRgb[0] - tintRgb[0], 0);
newG = Math.max(colorRgb[1] - tintRgb[1], 0);
newB = Math.max(colorRgb[2] - tintRgb[2], 0);
break;
case ColorOperation.XOR:
newR = colorRgb[0] ^ tintRgb[0];
newG = colorRgb[1] ^ tintRgb[1];
newB = colorRgb[2] ^ tintRgb[2];
break;
case ColorOperation.DIFF:
newR = Math.abs(colorRgb[0] - tintRgb[0]);
newG = Math.abs(colorRgb[1] - tintRgb[1]);
newB = Math.abs(colorRgb[2] - tintRgb[2]);
break;
case ColorOperation.MAX:
newR = Math.max(colorRgb[0], tintRgb[0]);
newG = Math.max(colorRgb[1], tintRgb[1]);
newB = Math.max(colorRgb[2], tintRgb[2]);
break;
case ColorOperation.AVG:
newR = Math.round((colorRgb[0] + tintRgb[0]) / 2);
newG = Math.round((colorRgb[1] + tintRgb[1]) / 2);
newB = Math.round((colorRgb[2] + tintRgb[2]) / 2);
break;
}
const newHex = "#" + componentToHex(newR) + componentToHex(newG) + componentToHex(newB);
this[key] = newHex;
}
return this;
};
const colors = {
'physical': '#00422d',
'emotional': '#c0c014',
'intellectual': '#e94e77',
'spiritual': '#f97306',
'awareness': '#480ca8',
'aesthetic': '#6a0577',
'intuition': '#3f88c5'
};
tintColours = { ...colors };
tintColours.filterColours("#b3889a", ColorOperation.MIN)
.filterColours("#b3889a", ColorOperation.XOR)
.filterColours("#b3889a", ColorOperation.AVG)
.filterColours("#555555", ColorOperation.MIN);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment