Merge pull request #6708 from Bumblebee00/circular_color_lerp

lerpColor in HSL or HSB mode now can loop the color wheel if needed
processing · Jan 14, 2024 · a32f909 · a32f909
2 parents f4cc7e1 + 3efb76c
commit a32f909
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js
@@ -380,7 +380,7 @@ p5.prototype.hue = function(c) {
  * @method lerpColor
  * @param  {p5.Color} c1  interpolate from this color.
  * @param  {p5.Color} c2  interpolate to this color.
- * @param  {Number}       amt number between 0 and 1.
+ * @param  {Number}   amt number between 0 and 1.
  * @return {p5.Color}     interpolated color.
  *
  * @example
@@ -429,7 +429,7 @@ p5.prototype.lerpColor = function(c1, c2, amt) {
     fromArray = c1.hsla;
     toArray = c2.hsla;
   } else {
-    throw new Error(`${mode}cannot be used for interpolation.`);
+    throw new Error(`${mode} cannot be used for interpolation.`);
   }
 
   // Prevent extrapolation.
@@ -442,7 +442,22 @@ p5.prototype.lerpColor = function(c1, c2, amt) {
   }
 
   // Perform interpolation.
-  l0 = this.lerp(fromArray[0], toArray[0], amt);
+  if (mode === constants.RGB) {
+    l0 = this.lerp(fromArray[0], toArray[0], amt);
+  }
+  // l0 (hue) has to wrap around (and it's between 0 and 1)
+  else {
+    // find shortest path in the color wheel
+    if (Math.abs(fromArray[0] - toArray[0]) > 0.5) {
+      if (fromArray[0] > toArray[0]) {
+        toArray[0] += 1;
+      } else {
+        fromArray[0] += 1;
+      }
+    }
+    l0 = this.lerp(fromArray[0], toArray[0], amt);
+    if (l0 >= 1) { l0 -= 1; }
+  }
   l1 = this.lerp(fromArray[1], toArray[1], amt);
   l2 = this.lerp(fromArray[2], toArray[2], amt);
   l3 = this.lerp(fromArray[3], toArray[3], amt);

diff --git a/test/unit/color/creating_reading.js b/test/unit/color/creating_reading.js
@@ -159,15 +159,15 @@ suite('color/CreatingReading', function() {
       myp5.colorMode(myp5.HSL);
       var interA = myp5.lerpColor(fromColor, toColor, 0.33);
       var interB = myp5.lerpColor(fromColor, toColor, 0.66);
-      assert.deepEqual(interA.levels, [66, 190, 44, 255]);
-      assert.deepEqual(interB.levels, [53, 164, 161, 255]);
+      assert.deepEqual(interA.levels, [190, 44, 63, 255]);
+      assert.deepEqual(interB.levels, [164, 53, 162, 255]);
     });
     test('should correctly get lerp colors in HSB', function() {
       myp5.colorMode(myp5.HSB);
       var interA = myp5.lerpColor(fromColor, toColor, 0.33);
       var interB = myp5.lerpColor(fromColor, toColor, 0.66);
-      assert.deepEqual(interA.levels, [69, 192, 47, 255]);
-      assert.deepEqual(interB.levels, [56, 166, 163, 255]);
+      assert.deepEqual(interA.levels, [192, 47, 66, 255]);
+      assert.deepEqual(interB.levels, [166, 56, 164, 255]);
     });
     test('should not extrapolate', function() {
       var interA = myp5.lerpColor(fromColor, toColor, -0.5);
@@ -197,15 +197,15 @@ suite('color/CreatingReading', function() {
       myp5.colorMode(myp5.HSL);
       var interA = myp5.lerpColor(fromColor, toColor, 0.33);
       var interB = myp5.lerpColor(fromColor, toColor, 0.66);
-      assert.deepEqual(interA.levels, [66, 190, 44, 99]);
-      assert.deepEqual(interB.levels, [53, 164, 161, 149]);
+      assert.deepEqual(interA.levels, [190, 44, 63, 99]);
+      assert.deepEqual(interB.levels, [164, 53, 162, 149]);
     });
     test('should correctly get lerp colors in HSB with alpha', function() {
       myp5.colorMode(myp5.HSB);
       var interA = myp5.lerpColor(fromColor, toColor, 0.33);
       var interB = myp5.lerpColor(fromColor, toColor, 0.66);
-      assert.deepEqual(interA.levels, [69, 192, 47, 99]);
-      assert.deepEqual(interB.levels, [56, 166, 163, 149]);
+      assert.deepEqual(interA.levels, [192, 47, 66, 99]);
+      assert.deepEqual(interB.levels, [166, 56, 164, 149]);
     });
     test('should not extrapolate', function() {
       var interA = myp5.lerpColor(fromColor, toColor, -0.5);