使用javascript创建彩虹追逐

Question

I'm trying to create a rainbow cycle/chase effect on 9 pixels.

i need to prepare a json statement that updates all 9 pixels at once

So far i've been able to make all 9 pixels change colors, but not in a chase pattern

here is my code:

  var colors = [
"248,12,18",
"238,17,0",    
"255,51,17",    
"255,68,34",
"255,102,68",
"255,153,51",   
"254,174,45",
"204,187,51",
"208,195,16",   
"170,204,34",
"105,208,37",
"34,204,170",   
"18,189,185",
"17,170,187",
"68,68,221",    
"51,17,187",
"59,12,189",
"68,34,153"
]
var i = 0
function f(array) {
 var howManyTimes = array.length;
 json = 'http://xxx.xxxxxxxxxxxxxx.xxx/xxxxx?
  hash='+globalHash+'&colours={"1": ['+array[i]+'], "0": 
  ['+array[i]+'], "3": ['+array[i]+'], "2": ['+array[i]+'], "5": 
  ['+array[i]+'], "4": ['+array[i]+'], "7": ['+array[i]+'], "6": 
  ['+array[i]+'], "9": ['+array[i]+'], "8": ['+array[i]+']}'
sendColorChange(json);
i++;
if (i == howManyTimes) { i = 0}
if( i < howManyTimes ){
    setTimeout(function(){f(array)}, 1000);
 }
}

so what i need is for the variable json to change every iteration, but instead of changing every pixel to the same color each iteration, i would like it to chase forward, nice little assci art here as an example:

[]=pixel  
r=red  
g=green  
b=blue  
w=white  
however, the colors that i want to use are rgb values in the colors array  
iteration 1:  
[r][][][][][][][][][]  
iteration 2:  
[g][r][][][][][][][][]  
iteration 3:  
[b][g][r][][][][][][][]  
iteration 4:  
[w][b][g][r][][][][][][]  
and so on  

i hope that clears it up a little

Answer 1

Old question, but would still like to answer.

If you can use HSL values, you can simply set your S(aturation) and L(ight) to a value you like and increment your H(ue) value on a loop to create a rainbow chase effect.

I use this setup in a rainbow script for webpages I created, where it would look something like this:

for(rainbowelements.length; let i = 0; i++) {
  rainbowelements[i].style.color = 'hsl(' + counter + ', 100%, 70%)';
  counter++
}

This means that every run the for loop makes, the counter will go up one, changing the hue slightly. As your question isn't the clearest to me, I'm afraid that's as far as I can help. Good luck!