Acceder directamente a la información de los pixels de la imagen de un elemento CANVAS, nos da la posibilidad de hacer cosas interesantes. La lectura y escritura de estos datos es mucho más rápida, porque se hace a través de un array. Así que podemos conseguir un bonito efecto psicodélico que recuerde a los años 70, los alucinógenos y las lámparas de lava, con muy poco esfuerzo.
Lo primero que hay que saber, es que los datos de la imagen están en un array unidimensional, en el que se sucede la información de todos los pixel, de izquierda a derecha y de arriba a abajo. Además cada pixel está formado por cuatro valores: componente roja (red), componente verde (green), componente azul (blue) y valor de transparencia (alpha).
Lo que vamos a hacer es evaluar una función seno (usaremos período 512 y amplitud 1024) para cada punto de la pantalla, y el valor que obtengamos se lo asignamos a las 3 componentes. Pero así solamente conseguiremos unas manchas blancas y negras, ya que las tres componentes tienen el mismo valor. Así que también vamos a cambiar ligeramente cada color, de manera que aparezcan efectos vistosos en los bordes de dichas manchas.
Vamos a verlo paso a paso. Primero calculamos la función, que realmente es la suma de varias funciones seno para romper un poco la periodicidad, donde coinciden los máximos, tendremos una mancha blanca y donde estén los mínimos tendremos una mancha negra, como se ve en la figura 1.
El siguiente paso es dividir el valor de cada componente por un número distinto, así evitamos que cada componente pase del mínimo al máximo de la misma forma, alteramos la suavidad, por decirlo de alguna manera. Así, si el rojo por ejemplo, alcanza más suavemente el valor máximo que el azul y el verde, se notará un borde rojo entre el blanco y el negro. Esto se puede ver en la figura 2. Ajustando bien estos valores, podemos conseguir unas manchas con bordes más definidos, como se muestra en la figura 3.
Por último, podemos cambiar el signo a alguna de las componentes. Por la manera que funciona el array de datos, poner un valor negativo tiene como resultado pasar del valor x a (máx – x), es decir, lo que antes era el valor máximo, ahora es el mínimo y viceversa. Con lo que el resultado es parecido a ponerle un filtro de color a todo el dibujo, como se ve en la figura 4.
Cogiendo todo esto, podemos conseguir algo así:
Entre iteración e iteración, también cambiamos los parámetros un poco para conseguir el efecto de movimiento.