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); diff --git a/test/unit/color/creating_reading.js b/test/unit/color/creating_reading.js index 5abedaa73e..d313cfbbce 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, [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);