Color change over many function loops
I am writing a recursive fractal tree program in Javascript . The way it works can be described as follows.
Imagine a turtle drawing a line. From the end of that line, it rotates to the left, draws a line, then rotates to the right and draws a second line. This is repeated for the two new lines that were drawn, and so on, until a beautiful fractal tree with many branches appears.
However, I want the tree to start out brown and turn greener with each new branch, like this one here . I can make each rectangular branch red or each left one-way branch yellow, but I want each branch to be created slightly less brown and green than its predecessor. I could achieve this with an integer variable such as length, because the length of each new branch can be equal length - y
, making smaller branches each time.
How can I do this using color? This is not how I could do a "bump" (brown - (slightly brown)).
Anyway, for recovery, I would like to use the Javascript way to have each branch generated less brown and greener than the last, just like you can make each branch smaller than the last with length = length - y
.
source to share
CSS allows you to express a color in RGB (red, green, blue) format. For example: the color white, most often encoded in CSS as #ffffff, can be encoded as rgb (255, 255, 255).
In RGB, the higher the value of the second argument, which denotes green, the more greenish the produced color will be.
Start with brown, keep adding green and voila!
https://jsfiddle.net/r9gajrdd/5/
let red = 118;
let green = 89;
let blue = 3;
let rgb;
for ( let i = 10; i--; ) {
green = Math.min(green + 10, 253);
rgb = `rgb(${red}, ${green}, ${blue})`;
}
source to share