Tengo un pequeño script que anima un lienzo cambiando la textura mostrada. Mis texturas están colocadas en la misma imagen, una debajo de las otras y tienen el mismo tamaño (16x16). Tengo un objeto JS que describe mi animación, algo como esto:

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

Donde la textura 0 (la primera, desde arriba) se muestra antes que la segunda, antes que la tercera. Cada textura se muestra 500ms.

Quiero agregar interpolación a mi animación, para crear una imagen por 100 ms. Para esto, no estoy seguro de cómo hacerlo, pero estoy pensando en usar un cálculo manual en cada píxel por el momento: pixel_img_ab-x[i][j] = (pixel_img_b[i][j] - pixel_img_a[i][j]) / 5 * (x + 1) + pixel_img_a[i] Donde:

• a y b son índices de dos texturas consecutivas
• foo[i][j] es el píxel (i, j) de la imagen foo
• x es la imagen actual para calcular entre la imagen a y la imagen b (0 < x < 5)

Tengo una pregunta sobre la optimización, mi bucle de animación, por lo que tengo que volver a calcular todos los fotogramas entre mi textura en cada momento. ¿Es mejor hacer eso (recalcular cada vez, más computacionalmente intensivo) o es mejor precalcular todas las imágenes intermedias y almacenarlas en mi objeto de animación (más pesado en la memoria)?

Como recordatorio:

• Cada textura es 16*16
• Tengo 20 texturas por animación como máximo (así que 20 * tiempo de visualización con modo de interpolación)
• He definido el tiempo de visualización en 500 ms para el ejemplo, pero esto puede variar un poco (dentro del mismo rango)

Aquí el código actual (sin función de interpolación): https://codepen.io/theogiraudet/pen/OJzoNJZ?editors=0010

¡Gracias por tu respuesta!