fix: lerp colors in current color mode

Author: pupuking723

src/color/p5.Color.js

@@ -302,15 +302,18 @@ class Color {
   }
 
   lerp(color, amt, mode){
+    const source = mode ? this.#toColorMode(mode)._color : this._color;
+    const target = mode ? color.#toColorMode(mode)._color : color._color;
+
     // Find the closest common ancestor color space
     let spaceIndex = -1;
     while(
       (
-        spaceIndex+1 < this._color.space.path.length ||
-        spaceIndex+1 < color._color.space.path.length
+        spaceIndex+1 < source.space.path.length ||
+        spaceIndex+1 < target.space.path.length
       ) &&
-      this._color.space.path[spaceIndex+1] ===
-        color._color.space.path[spaceIndex+1]
+      source.space.path[spaceIndex+1] ===
+        target.space.path[spaceIndex+1]
     ){
       spaceIndex += 1;
     }
@@ -320,8 +323,8 @@ class Color {
       throw new Error('Cannot lerp colors. No common color space found');
     }
 
-    const obj = range(this._color, color._color, {
-      space: this._color.space.path[spaceIndex].id
+    const obj = range(source, target, {
+      space: source.space.path[spaceIndex].id
     })(amt);
 
     return new Color(obj, mode || this.mode);

test/unit/color/creating_reading.js

@@ -71,33 +71,31 @@ suite('color/CreatingReading', function() {
     });
 
     test('should correctly get lerp colors in HSL', function() {
-      // NOTE: This is equivalent to RGB case so is testing nothing new
       mockP5Prototype.colorMode(mockP5Prototype.HSL);
       var interA = mockP5Prototype.lerpColor(fromColor, toColor, 0.33);
       var interB = mockP5Prototype.lerpColor(fromColor, toColor, 0.66);
 
-      assert.closeTo(interA._color.coords[0], 37, 1);
-      assert.closeTo(interA._color.coords[1], 43, 1);
+      assert.closeTo(interA._color.coords[0], 352, 1);
+      assert.closeTo(interA._color.coords[1], 63, 1);
       assert.closeTo(interA._color.coords[2], 46, 1);
 
-      assert.closeTo(interB._color.coords[0], 345, 1);
-      assert.closeTo(interB._color.coords[1], 12, 1);
+      assert.closeTo(interB._color.coords[0], 301, 1);
+      assert.closeTo(interB._color.coords[1], 51, 1);
       assert.closeTo(interB._color.coords[2], 43, 1);
     });
 
     test('should correctly get lerp colors in HSB', function() {
-      // NOTE: This is equivalent to RGB case so is testing nothing new
       mockP5Prototype.colorMode(mockP5Prototype.HSB);
       var interA = mockP5Prototype.lerpColor(fromColor, toColor, 0.33);
       var interB = mockP5Prototype.lerpColor(fromColor, toColor, 0.66);
 
-      assert.closeTo(interA._color.coords[0], 37, 1);
-      assert.closeTo(interA._color.coords[1], 60, 1);
-      assert.closeTo(interA._color.coords[2], 66, 1);
+      assert.closeTo(interA._color.coords[0], 352, 1);
+      assert.closeTo(interA._color.coords[1], 76, 1);
+      assert.closeTo(interA._color.coords[2], 75, 1);
 
-      assert.closeTo(interB._color.coords[0], 345, 1);
-      assert.closeTo(interB._color.coords[1], 20, 1);
-      assert.closeTo(interB._color.coords[2], 47, 1);
+      assert.closeTo(interB._color.coords[0], 301, 1);
+      assert.closeTo(interB._color.coords[1], 66, 1);
+      assert.closeTo(interB._color.coords[2], 65, 1);
     });
 
     test.todo('should not extrapolate', function() {
@@ -136,14 +134,14 @@ suite('color/CreatingReading', function() {
       var interA = mockP5Prototype.lerpColor(fromColor, toColor, 0.33);
       var interB = mockP5Prototype.lerpColor(fromColor, toColor, 0.66);
 
-      assert.closeTo(interA._color.coords[0], 37, 1);
-      assert.closeTo(interA._color.coords[1], 43, 1);
+      assert.closeTo(interA._color.coords[0], 352, 1);
+      assert.closeTo(interA._color.coords[1], 63, 1);
       assert.closeTo(interA._color.coords[2], 46, 1);
       assert.closeTo(interA._color.alpha, 0.38, 0.01);
 
-      assert.closeTo(interB._color.coords[0], 345, 1);
-      assert.closeTo(interB._color.coords[1], 11, 1);
-      assert.closeTo(interB._color.coords[2], 42, 1);
+      assert.closeTo(interB._color.coords[0], 301, 1);
+      assert.closeTo(interB._color.coords[1], 51, 1);
+      assert.closeTo(interB._color.coords[2], 43, 1);
       assert.closeTo(interB._color.alpha, 0.58, 0.01);
     });
 
@@ -152,14 +150,14 @@ suite('color/CreatingReading', function() {
       var interA = mockP5Prototype.lerpColor(fromColor, toColor, 0.33);
       var interB = mockP5Prototype.lerpColor(fromColor, toColor, 0.66);
 
-      assert.closeTo(interA._color.coords[0], 37, 1);
-      assert.closeTo(interA._color.coords[1], 60, 1);
-      assert.closeTo(interA._color.coords[2], 66, 1);
+      assert.closeTo(interA._color.coords[0], 352, 1);
+      assert.closeTo(interA._color.coords[1], 76, 1);
+      assert.closeTo(interA._color.coords[2], 75, 1);
       assert.closeTo(interA._color.alpha, 0.38, 0.01);
 
-      assert.closeTo(interB._color.coords[0], 345, 1);
-      assert.closeTo(interB._color.coords[1], 20, 1);
-      assert.closeTo(interB._color.coords[2], 47, 1);
+      assert.closeTo(interB._color.coords[0], 301, 1);
+      assert.closeTo(interB._color.coords[1], 66, 1);
+      assert.closeTo(interB._color.coords[2], 65, 1);
       assert.closeTo(interB._color.alpha, 0.58, 0.01);
     });