From 4ff5a8eca1543b2ddfe48c227d5fbcc8573dcf0f Mon Sep 17 00:00:00 2001 From: DPende Date: Sun, 17 Mar 2024 16:20:45 +0100 Subject: [PATCH 1/4] add: added unit test for higher contrast function --- test/core.test.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/test/core.test.js b/test/core.test.js index 93b676e..c27e5c6 100644 --- a/test/core.test.js +++ b/test/core.test.js @@ -4,6 +4,7 @@ import optimizeContrast from "../src/core/optimize_contrast.js"; import changeContrast from "../src/core/change_contrast.js"; import changeTemperature from "../src/core/change_temperature.js"; import changeOpacity from "../src/core/change_opacity.js"; +import higherColorContrast from "../src/core/higher_contrast.js"; describe('convertToBW function', () => { test('converts pixel array to black and white correctly', () => { @@ -131,4 +132,33 @@ describe('changeOpacity function', () => { // Check that the array has correctly changed opacity expect(modifiedArray).toEqual(expectedArray); }); +}); + +describe('higherColorContrast', () => { + test('should return color with higher contrast for dark input color', () => { + const darkColor = [10, 20, 30]; + const expectedResult = [255, 255, 255]; // Expected result for dark color + + const result = higherColorContrast(darkColor); + + expect(result).toEqual(expectedResult); + }); + + test('should return color with higher contrast for light input color', () => { + const lightColor = [200, 210, 220]; + const expectedResult = [0, 0, 0]; // Expected result for light color + + const result = higherColorContrast(lightColor); + + expect(result).toEqual(expectedResult); + }); + + test('should return color with higher contrast for medium input color', () => { + const mediumColor = [120, 130, 140]; + const expectedResult = [0, 0, 0]; // Expected result for medium color + + const result = higherColorContrast(mediumColor); + + expect(result).toEqual(expectedResult); + }); }); \ No newline at end of file From bbb358c7e3f76c7c6f3f53a2d86cba99534ef571 Mon Sep 17 00:00:00 2001 From: DPende Date: Sun, 17 Mar 2024 16:21:45 +0100 Subject: [PATCH 2/4] refactor: improved performance of the function --- demo/scripts/higher_color_contrast_demo.js | 23 ++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 demo/scripts/higher_color_contrast_demo.js diff --git a/demo/scripts/higher_color_contrast_demo.js b/demo/scripts/higher_color_contrast_demo.js new file mode 100644 index 0000000..00fa679 --- /dev/null +++ b/demo/scripts/higher_color_contrast_demo.js @@ -0,0 +1,23 @@ +import EditPix from "../../src/editpix.js"; + +const editpix = new EditPix(); + +//color +const hexColor = "#78828c"; + +//convert color from hex to rgb +const rgbColor = editpix.convertToRgb(hexColor); + +//get the higher contrast color +const higherColorContrastRgb = editpix.getHigherContrast(rgbColor); + +//convert higher contrast color from rgb to hex +const higherColorContrastHex = editpix.convertToHex(higherColorContrastRgb); + + +//display results +document.body.style.backgroundColor = hexColor; +const contrastText = document.createElement("h1"); +contrastText.textContent = "Hello World!" +contrastText.style.color = higherColorContrastHex; +document.body.appendChild(contrastText) From 0762a051a16414c0aed89aca0260818b5f7721f6 Mon Sep 17 00:00:00 2001 From: DPende Date: Sun, 17 Mar 2024 16:22:53 +0100 Subject: [PATCH 3/4] refactor: added demo script for higher contrast function --- src/core/higher_contrast.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/core/higher_contrast.js b/src/core/higher_contrast.js index 2d14923..befed5e 100644 --- a/src/core/higher_contrast.js +++ b/src/core/higher_contrast.js @@ -1,21 +1,13 @@ /** * Function that given a color in the format [R,G,B] converts it to grayscale in the format [R,G,B] - * and then calculates the color with the highest contrast. + * and then calculates the color (black or white) with the highest contrast. * @param {number[]} color Color that has to be converted and compared in the format [R,G,B] * @returns {number[]} Color with the higher contrast of the input color in the format [R,G,B] */ function higherColorContrast(color) { - // Convert the color to grayscale - const grayscale = [ - Math.round(0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2]), - Math.round(0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2]), - Math.round(0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2]) - ]; - - // Calculate the color with the highest contrast - const contrastColor = grayscale.map(channel => channel > 128 ? 0 : 255); - - return contrastColor; + const gray = Math.round(0.299 * color[0] + 0.587 * color[1] + 0.114 * color[2]) + const contrastColor = gray >= 128 ? 0 : 255; + return [contrastColor, contrastColor, contrastColor]; } export default higherColorContrast; From 578271966f18e98904410f62335a2638ac95095a Mon Sep 17 00:00:00 2001 From: DPende Date: Sun, 17 Mar 2024 16:23:18 +0100 Subject: [PATCH 4/4] fix: bugfix --- src/utils.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utils.js b/src/utils.js index cfc46cf..301df44 100644 --- a/src/utils.js +++ b/src/utils.js @@ -89,9 +89,9 @@ function rgbToHsl(r, g, b) { } return [ - h * 360, - s * 100, - l * 100 + Math.round(h * 360), + Math.round(s * 100), + Math.round(l * 100) ]; }