Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

lerpColor in HSL or HSB mode now can loop the color wheel if needed #6708

Merged
merged 3 commits into from
Jan 14, 2024
Merged

lerpColor in HSL or HSB mode now can loop the color wheel if needed #6708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4aecf23
lerpColor in HSL or HSB mode will find the shortest path on the color…
Bumblebee00 Jan 7, 2024
4fffe39
modified unit tests for color lerping. they were incorrect in HSL and…
Bumblebee00 Jan 7, 2024
3efb76c
corrected typo
Bumblebee00 Jan 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions src/color/creating_reading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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);
Expand Down
16 changes: 8 additions & 8 deletions test/unit/color/creating_reading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
Loading