Mask Neopixel

hello programmers,
I am currently working on a mask with neopixel, I want to reproduce some figures, for this I created arrays with the positions of the pixels that must be turned on and then created two functions so that the positions are updated and displayed, however, I have had some problems that I have not been able to solve, no matter how much i have sought to do it, I am new to programming and I cannot think of how to solve it.

This is a fragment of the code I wrote:

 int spin2Hu[46]={59, 81, 84, 86, 95, 96, 97, 98, 122, 127, 135, 76, 137, 125, 124, 98, 99, 100, 120, 130, 131, 71, 70, 46, 39, 38, 28, 25, 24, 23, 32, 33, 45, 51, 43, 35, 30, 23, 22, 21, 20, 141, 139, 56, 59}; 


void recorridoHu(int r, int g, int b){
    
   numeroPixeld = spin2Hu[posicionH - 5];
    numeroPixel= spin2Hu[posicionH];
    tira.setPixelColor(numeroPixel, r, g, b);
    tira.show();
  tira.setPixelColor(numeroPixeld, 0, 0, 0);
    
    if(posicionH > 43){
     posicionH = 0;
     
      } 
    } 

void SOH(){ 

    
 tiempoTranscurrido = millis();
 if(tiempoTranscurrido - tiempoCambio > velocidad)
    {
      tiempoCambio = tiempoTranscurrido;
      posicionH++;
 
    
}
}

I wanted to achieve a queue effect on the trail, that's why I created the variable numeroPixeld, that way the pixels would turn off some time later. The problem appears when the NumeroPixel variable reaches 43 and is updated to 0, NumeroPixeld does not go through the other values, so the last pixels remain on, losing the effect.
Investigating how to make the effect better I found the scanner effect of this page, in which the colors are blurring, I have tried to replicate this effect in my project but I have not succeeded.

My specific questions would be:

  1. how could I achieve a fading effect on my project (similar to the link).
  2. how to ensure that when the array position is restarted, the back of the queue is not turned on.

I appreciate any response that can lead me in the right direction.

You need to use the modulus operator (%) to make sure it wraps around properly. You can also save a lot of memory by making your spin2Hu array of type byte (0-255) rather than int (2 bytes)

const byte spin2Hu[46] = {59, 81, 84, 86, 95, 96, 97, 98, 122, 127, 135, 76, 137, 125, 124, 98, 99, 100, 120, 130, 131, 71, 70, 46, 39, 38, 28, 25, 24, 23, 32, 33, 45, 51, 43, 35, 30, 23, 22, 21, 20, 141, 139, 56, 59};
const int numElements = sizeof(spin2Hu) / sizeof(spin2Hu[0]);

void recorridoHu(int r, int g, int b) {

  byte idx = (posicionH - 5 + numElements) % numElements;
  numeroPixeld = spin2Hu[idx];
  numeroPixel = spin2Hu[posicionH];
  tira.setPixelColor(numeroPixel, r, g, b);
  tira.show();
  tira.setPixelColor(numeroPixeld, 0, 0, 0);

  if (posicionH >= numElements) {
    posicionH = 0;
  }
}

void SOH() {
  tiempoTranscurrido = millis();
  if (tiempoTranscurrido - tiempoCambio > velocidad)
  {
    tiempoCambio = tiempoTranscurrido;
    posicionH++;
  }
}

Thank you very much, with the change in the code now the last leds are not on, however, I really do not understand very well how this works:

blh64:
byte idx = (posicionH - 5 + numElements) % numElements;

Could you explain to me, please, how does it work, I think this could help me achieve the faded I want to achieve.

Ahh and thanks for the recommendation to make the change of the array type, I have many other arrays of type int, I will change them right away

If posicionH has the value 0...45, then subtracting 5 gives the range of -5...40. But you can't use a negative index so you add the number of elements (46) which makes the range (41...86) and then you use the modulus operator that maps the value to 0..45