A better color cycle for several elements

[Acccent]

Hey!
 
since I've asked a couple questions I thought I'd give one of the snippets I finished working on, which actually works
 
So I know the new cycle feature allows HSL color manipulation, however that makes for suboptimal cycles through the whole color spectrum. I'm basing my info on this: http://basecase.org/env/on-rainbows — Basically, when using a purely hue-based cycle, you get spikes in luminosity that highlight certain colors and make others look washed out.
 
So I implemented a 'better' cycle!
 
You can find the result here:
Here's what it does:

• it assigns a random initial value to each element (let's call it the color index); this index is used to generate an RGB color
  • an approximation of the golden ratio is used to ensure that the initial colors are as spread out around the hue spectrum as possible
• the initial color index of each element is stored in an array
• we then cycle through all of the elements to increase their index by 2 * Math.PI / 36 (= 10 degrees)
• then animate all of the colors towards a new RGB color, generated from the color index we just increased

 

I initially thought I could do that using only a TimelineMax, but had no success with it; you can find the attempt there:

See the Pen avLLXm by Accent (@Accent) on CodePen

(Seems like it won't work because the values are cached, so each time the animation loops it starts from the initial color index instead of the newly increased one. If anyone has an idea to make that one work, go for it!)

 

Cheers

See the Pen XmeYZJ by Accent (@Accent) on CodePen