CODEWITHSUNDEEP
javascriptloops
alxvo
alxvo

Reputation: 210

Iterate through numbers between two set min and max values

I am making a javascript loop that makes certain elements change color very subtlely every time the loop runs. The value I am changing is the L value of an HSL color.

Right now I have this.

var h = 10,
s = 0.5,
l = 1 / ((i += 0.01) % 10);

color = hsl(h, s, l);

Right now this outputs colors going from light to dark, starting over whenever it hits black (because of the modulo operation).

The L value must be between 0 and 1, however I would like to cap the outputs of my operation to be between 0.1 and 0.9 to avoid the too dark and too bright colors. Does anyone know how to tweak the operation to fit these requirements?

Also I would like to know if someone knows how to make the output reverse (instead of start over from the top) every time it hits min or max, meaning that it outputs numbers like this:

0.9...0.89...[...]...0.11...0..1...0.11...[...]...0.89...0.9...0.89 and so on

Thank you!

Upvotes: 0

Views: 90

Answers (1)

Michael D
Michael D

Reputation: 678

You can cap the output value between 0 and 1 to between 0.1 and 0.9 by:

cappedValue = 0.1 + 0.8 * uncappedValue

For bouncing the value between 0 and 1 you can use

boundcingValue = Math.abs(1 - 2 * valueBetween0and1)

so the resulting solution would be:

var h = 10,
s = 0.5,
l = 1 / ((i += 0.01) % 10);

lbouncing = Math.abs(1 - 2 * l);
lcapped = 0.1 + lbouncing * 0.8;

color = hsl(h, s, lcapped);

haven't tested it though...

Upvotes: 1

Related Questions