From 4aecf23ca6c252f71c566e28e9de95bac499f784 Mon Sep 17 00:00:00 2001 From: Bumblebee00 Date: Sun, 7 Jan 2024 15:01:04 +0100 Subject: [PATCH 1/3] lerpColor in HSL or HSB mode will find the shortest path on the color wheel (so wrap around from hue=360 to hue=0 if needed) --- src/color/creating_reading.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 070f4669c2..457f6db07d 100644 --- 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); From 4fffe39110c5c1c7072073e55d76ba569cd4fbc7 Mon Sep 17 00:00:00 2001 From: Bumblebee00 Date: Sun, 7 Jan 2024 18:06:02 +0100 Subject: [PATCH 2/3] modified unit tests for color lerping. they were incorrect in HSL and HSB mode --- test/unit/color/creating_reading.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/test/unit/color/creating_reading.js b/test/unit/color/creating_reading.js index 5abedaa73e..9c085c9f86 100644 --- 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, [122, 96, 103, 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); From 3efb76cda1a9a7eadc73a2e81044baf351ae886b Mon Sep 17 00:00:00 2001 From: Bumblebee00 Date: Sun, 7 Jan 2024 21:05:01 +0100 Subject: [PATCH 3/3] corrected typo --- test/unit/color/creating_reading.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/color/creating_reading.js b/test/unit/color/creating_reading.js index 9c085c9f86..d313cfbbce 100644 --- a/test/unit/color/creating_reading.js +++ b/test/unit/color/creating_reading.js @@ -160,7 +160,7 @@ suite('color/CreatingReading', function() { var interA = myp5.lerpColor(fromColor, toColor, 0.33); var interB = myp5.lerpColor(fromColor, toColor, 0.66); assert.deepEqual(interA.levels, [190, 44, 63, 255]); - assert.deepEqual(interB.levels, [122, 96, 103, 255] ); + assert.deepEqual(interB.levels, [164, 53, 162, 255]); }); test('should correctly get lerp colors in HSB', function() { myp5.colorMode(myp5.HSB);