I have a little script that animates a canvas by changing the displayed texture. My textures are placed on the same image, one below the others and have the same size (16x16). I have a JS object that describes my animation, something like this:

{
  animation: {
    frames: [
      0,
      1,
      2
    ]
  }
}

Where texture 0 (the first, from top) is displayed before the second, before the third. Each texture is displayed 500ms.

I want to add interpolation to my animation, to create one image by 100ms. For this, I'm not sure how to do this but I'm thinking of using a manual calculation on each pixel for the moment: pixel_img_ab-x[i][j] = (pixel_img_b[i][j] - pixel_img_a[i][j]) / 5 * (x + 1) + pixel_img_a[i] Where:

• a and b are indexes of two consecutive textures
• foo[i][j] is the pixel (i, j) for the image foo
• x is the current image to compute between image a and image b (0 < x < 5)

I have a question about optimisation, my animation loop so I have to recompute all frames between my texture at each time. Is it better to do that (recompute each time, more computationally intensive) or is it better to precompute all intermediate images and store them in my animation object (heavier in memory)?

As a reminder:

• Each texture is 16*16
• I have 20 textures by animation at most (so 20 * display time with interpolation mode)
• I have defined the display time to 500ms for the example but this may vary somewhat (within the same range)

Here the current code (without interpolation function): https://codepen.io/theogiraudet/pen/OJzoNJZ?editors=0010

Thanks for your answer!