Merge pull request #37 from happo/intentional-transparency

Handle almost-transparent and transparent pixels better

Author: trotzig

snapshots/logo/diff.png

@@ -22,14 +22,22 @@ it('is medium when comparing red and blue', () => {
   expect(delta).toBeLessThan(0.51);
 });
 
-it('is one when comparing transparent and white', () => {
-  expect(colorDelta([0, 0, 0, 0], [255, 255, 255, 255])).toEqual(1);
+it('is one when comparing filler pixel and white', () => {
+  expect(colorDelta([1, 1, 1, 1], [255, 255, 255, 255])).toEqual(1);
 });
 
 it('is large when comparing transparent and black', () => {
   expect(colorDelta([0, 0, 0, 0], [0, 0, 0, 255])).toBeGreaterThan(0.92);
 });
 
-it('is large when comparing white and transparent', () => {
-  expect(colorDelta([255, 255, 255, 255], [0, 0, 0, 0])).toBeGreaterThan(0.92);
+it('is large when comparing white and filler pixel', () => {
+  expect(colorDelta([255, 255, 255, 255], [1, 1, 1, 1])).toBeGreaterThan(0.92);
+});
+
+it('is one when comparing filler pixel and some other color', () => {
+  expect(colorDelta([1, 1, 1, 1], [33, 33, 33, 10])).toEqual(1);
+});
+
+it('is small when comparing transparent and similar color', () => {
+  expect(colorDelta([1, 46, 250, 0], [1, 42, 250, 4])).toBeLessThan(0.05);
 });

src/__tests__/colorDelta-test.js

@@ -22,16 +22,16 @@ it('returns magenta when diff', () => {
   });
 });
 
-it('returns diff when after alpha is zero', () => {
-  currentPixel[3] = 0;
+it('returns diff when after is filler pixel', () => {
+  currentPixel = [1, 1, 1, 1];
   expect(subject()).toEqual({
     diff: 1,
     pixel: [179, 54, 130, 255],
   });
 });
 
-it('returns diff when before alpha is zero', () => {
-  previousPixel[3] = 0;
+it('returns diff when before is filler pixel', () => {
+  previousPixel = [1, 1, 1, 1];
   expect(subject()).toEqual({
     diff: 1,
     pixel: [179, 54, 130, 255],

src/__tests__/getDiffPixel-test.js

@@ -17,6 +17,10 @@ function blend(color, alpha) {
   return 255 + (color - 255) * alpha;
 }
 
+function isFillerPixel([r, g, b, a]) {
+  return r === 1 && g === 1 && b === 1 && a === 1;
+}
+
 // calculate color difference according to the paper "Measuring perceived color
 // difference using YIQ NTSC transmission color space in mobile applications" by
 // Y. Kotsarenko and F. Ramos
@@ -30,7 +34,10 @@ module.exports = function colorDelta(previousPixel, currentPixel) {
     return 0;
   }
 
-  if ((a2 === 0 && a1 > 0) || (a1 === 0 && a2 > 0)) {
+  if (
+    (isFillerPixel(currentPixel) && a1 > 0) ||
+    (isFillerPixel(previousPixel) && a2 > 0)
+  ) {
     return 1;
   }
 

src/colorDelta.js

@@ -13,6 +13,10 @@ function imageTo2DArray({ data, width, height }, paddingRight) {
     for (let location = 0; location < rowSize; location += 1) {
       pixelsInRow[location] = data[row * rowSize + location];
     }
+    for (let location = rowSize; location < rowSize + (paddingRight * 4); location += 1) {
+      pixelsInRow[location] = 1;
+    }
+
     newData.push(pixelsInRow);
   }
   return newData;