Merge pull request #41 from happo/negative

Return negative colorDiff if pixel is darker

Author: lencioni

package.json

@@ -20,6 +20,14 @@
     "test-ci": "yarn start-server & yarn test",
     "test": "jest"
   },
+  "prettier": {
+    "trailingComma": "all",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true,
+    "printWidth": 80,
+    "arrowParens": "avoid"
+  },
   "dependencies": {
     "imagetracerjs": "^1.2.5"
   },

src/__tests__/colorDelta-test.js

@@ -1,8 +1,8 @@
-const colorDelta = require("../colorDelta");
-const { colorDeltaChannels } = require("../colorDelta");
+const colorDelta = require('../colorDelta');
+const { colorDeltaChannels } = require('../colorDelta');
 
-describe("colorDelta", () => {
-  it("produces the same results as colorDeltaChannels", () => {
+describe('colorDelta', () => {
+  it('produces the same results as colorDeltaChannels', () => {
     const pixels = [
       [0, 0, 0, 255],
       [255, 255, 255, 255],
@@ -23,54 +23,66 @@ describe("colorDelta", () => {
             pixels[j][0],
             pixels[j][1],
             pixels[j][2],
-            pixels[j][3]
-          )
+            pixels[j][3],
+          ),
         );
       }
     }
   });
 });
 
-it("is large when comparing black and white", () => {
+it('is large when comparing black and white', () => {
   expect(colorDeltaChannels(0, 0, 0, 255, 255, 255, 255, 255)).toBeGreaterThan(
-    0.92
+    0.92,
   );
 });
 
-it("is small when comparing black and very dark grey", () => {
+it('is small when comparing black and very dark grey', () => {
   expect(colorDeltaChannels(0, 0, 0, 255, 10, 10, 10, 255)).toBeLessThan(0.02);
 });
 
-it("is medium when comparing black and medium grey", () => {
+it('is medium when comparing black and medium grey', () => {
   const delta = colorDeltaChannels(0, 0, 0, 255, 127, 127, 127, 255);
   expect(delta).toBeGreaterThan(0.21);
   expect(delta).toBeLessThan(0.24);
 });
 
-it("is medium when comparing red and blue", () => {
-  const delta = colorDeltaChannels(255, 0, 0, 255, 0, 0, 255, 255);
+it('is medium when comparing red and blue', () => {
+  const delta = Math.abs(colorDeltaChannels(255, 0, 0, 255, 0, 0, 255, 255));
   expect(delta).toBeGreaterThan(0.5);
   expect(delta).toBeLessThan(0.51);
 });
 
-it("is one when comparing filler pixel and white", () => {
+it('is one when comparing filler pixel and white', () => {
   expect(colorDeltaChannels(1, 1, 1, 1, 255, 255, 255, 255)).toEqual(1);
 });
 
-it("is large when comparing transparent and black", () => {
-  expect(colorDeltaChannels(0, 0, 0, 0, 0, 0, 0, 255)).toBeGreaterThan(0.92);
+it('is large when comparing transparent and black', () => {
+  expect(
+    Math.abs(colorDeltaChannels(0, 0, 0, 0, 0, 0, 0, 255)),
+  ).toBeGreaterThan(0.92);
 });
 
-it("is large when comparing white and filler pixel", () => {
+it('is large when comparing white and filler pixel', () => {
   expect(colorDeltaChannels(255, 255, 255, 255, 1, 1, 1, 1)).toBeGreaterThan(
-    0.92
+    0.92,
   );
 });
 
-it("is one when comparing filler pixel and some other color", () => {
+it('is one when comparing filler pixel and some other color', () => {
   expect(colorDeltaChannels(1, 1, 1, 1, 33, 33, 33, 10)).toEqual(1);
 });
 
-it("is small when comparing transparent and similar color", () => {
+it('is small when comparing transparent and similar color', () => {
   expect(colorDeltaChannels(1, 46, 250, 0, 1, 42, 250, 4)).toBeLessThan(0.05);
 });
+
+it('is negative when comparing white and black', () => {
+  expect(colorDeltaChannels(255, 255, 255, 255, 0, 0, 0, 255)).toBeLessThan(0);
+});
+
+it('is positive when comparing black and white', () => {
+  expect(colorDeltaChannels(0, 0, 0, 255, 255, 255, 255, 255)).toBeGreaterThan(
+    0,
+  );
+});

src/__tests__/getDiffPixel-test.js

@@ -7,7 +7,17 @@ let currentPixel;
 beforeEach(() => {
   previousPixel = [255, 255, 255, 255];
   currentPixel = [255, 255, 255, 255];
-  subject = () => getDiffPixel(previousPixel, currentPixel);
+  subject = () =>
+    getDiffPixel(
+      previousPixel[0],
+      previousPixel[1],
+      previousPixel[2],
+      previousPixel[3],
+      currentPixel[0],
+      currentPixel[1],
+      currentPixel[2],
+      currentPixel[3],
+    );
 });
 
 it('returns semi-opaque source if no diff', () => {

src/colorDelta.js

@@ -56,11 +56,17 @@ function colorDeltaChannels(r1, g1, b1, a1, r2, g2, b2, a2) {
     b2 = blend(b2, a2);
   }
 
-  const y = rgb2y(r1, g1, b1) - rgb2y(r2, g2, b2);
+  const y1 = rgb2y(r1, g1, b1);
+  const y2 = rgb2y(r2, g2, b2);
+  const y = y1 - y2;
   const i = rgb2i(r1, g1, b1) - rgb2i(r2, g2, b2);
   const q = rgb2q(r1, g1, b1) - rgb2q(r2, g2, b2);
 
-  return (0.5053 * y * y + 0.299 * i * i + 0.1957 * q * q) / MAX_YIQ_DIFFERENCE;
+  const delta =
+    (0.5053 * y * y + 0.299 * i * i + 0.1957 * q * q) / MAX_YIQ_DIFFERENCE;
+
+  // encode whether the pixel lightens or darkens in the sign
+  return y1 > y2 ? -delta : delta;
 }
 
 /**
@@ -83,7 +89,7 @@ function colorDelta(previousPixel, currentPixel) {
     currentPixel[0],
     currentPixel[1],
     currentPixel[2],
-    currentPixel[3]
+    currentPixel[3],
   );
 }
 

src/createDiffImage.js

@@ -22,18 +22,14 @@ module.exports = function createDiffImage({ image1Data, image2Data }) {
     // Render image
     for (let index = 0; index < width; index += 4) {
       const { diff, pixel } = getDiffPixel(
-        [
-          image1Data[row][index],
-          image1Data[row][index + 1],
-          image1Data[row][index + 2],
-          image1Data[row][index + 3],
-        ],
-        [
-          image2Data[row][index],
-          image2Data[row][index + 1],
-          image2Data[row][index + 2],
-          image2Data[row][index + 3],
-        ],
+        image1Data[row][index],
+        image1Data[row][index + 1],
+        image1Data[row][index + 2],
+        image1Data[row][index + 3],
+        image2Data[row][index],
+        image2Data[row][index + 1],
+        image2Data[row][index + 2],
+        image2Data[row][index + 3],
       );
 
       totalDiff += diff;

src/getDiffPixel.js

@@ -1,32 +1,26 @@
-const compose = require('./compose');
-const colorDelta = require('./colorDelta');
+const compose = require("./compose");
+const { colorDeltaChannels } = require("./colorDelta");
 
 const TRANSPARENT = [0, 0, 0, 0];
 
-module.exports = function getDiffPixel(previousPixel, currentPixel) {
+module.exports = function getDiffPixel(r1, g1, b1, a1, r2, g2, b2, a2) {
   // Compute a score that represents the difference between 2 pixels
-  const diff = colorDelta(previousPixel, currentPixel);
+  const diff = Math.abs(colorDeltaChannels(r1, g1, b1, a1, r2, g2, b2, a2));
   if (diff === 0) {
-    if (currentPixel[3] === 0) {
+    if (a2 === 0) {
       return {
         diff,
         pixel: TRANSPARENT,
       };
     }
     return {
       diff,
-      pixel: compose(
-        [currentPixel[0], currentPixel[1], currentPixel[2], 140],
-        TRANSPARENT,
-      ),
+      pixel: compose([r2, g2, b2, 140], TRANSPARENT),
     };
   }
 
   return {
     diff,
-    pixel: compose(
-      [179, 54, 130, 255 * Math.max(0.2, diff)],
-      TRANSPARENT,
-    ),
+    pixel: compose([179, 54, 130, 255 * Math.max(0.2, diff)], TRANSPARENT),
   };
 };