Skip to content

Commit e8443b2

Browse files
authored
Merge pull request #14589 from Remi-Tribia/dev
Color chromatic lerp function
2 parents 7c6ba6c + 7f8c270 commit e8443b2

File tree

2 files changed

+34
-0
lines changed

2 files changed

+34
-0
lines changed

docs/api/math/Color.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,18 @@ <h3>[method:Color lerp]( [param:Color color], [param:Float alpha] ) </h3>
218218
this color and 1.0 is the first argument.
219219
</p>
220220

221+
<h3>[method:Color lerpHSL]( [param:Color color], [param:Float alpha] ) </h3>
222+
<p>
223+
[page:Color color] - color to converge on.<br />
224+
[page:Float alpha] - interpolation factor in the closed interval [0, 1].<br /><br />
225+
226+
Linearly interpolates this color's HSL values toward the HSL values of the passed argument.
227+
It differs from the classic [page:.lerp] by not interpolating straight from one color to the other,
228+
but instead going through all the hues in between those two colors.
229+
The alpha argument can be thought of as the ratio between the two colors, where 0.0 is
230+
this color and 1.0 is the first argument.
231+
</p>
232+
221233
<h3>[method:Color multiply]( [param:Color color] ) </h3>
222234
<p>Multiplies this color's RGB values by the given [page:Color color]'s RGB values.</p>
223235

src/math/Color.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -541,6 +541,28 @@ Object.assign( Color.prototype, {
541541

542542
},
543543

544+
lerpHSL: function () {
545+
546+
var hslA = { h: 0, s: 0, l: 0 };
547+
var hslB = { h: 0, s: 0, l: 0 };
548+
549+
return function lerpHSL( color, alpha ) {
550+
551+
this.getHSL( hslA );
552+
color.getHSL( hslB );
553+
554+
var h = _Math.lerp( hslA.h, hslB.h, alpha );
555+
var s = _Math.lerp( hslA.s, hslB.s, alpha );
556+
var l = _Math.lerp( hslA.l, hslB.l, alpha );
557+
558+
this.setHSL( h, s, l );
559+
560+
return this;
561+
562+
};
563+
564+
}(),
565+
544566
equals: function ( c ) {
545567

546568
return ( c.r === this.r ) && ( c.g === this.g ) && ( c.b === this.b );

0 commit comments

Comments
 (0)