el efecto moiré

este tema nos introduce en el uso del efecto moiré/muaré a travez del código. el efecto es simple, pero con enormes posibilidades de exploración en el campo de creative coding.

concepto
es un patrón de interferencia emergente al sobreponer dos retículas en ángulos diferentes o con tamaños diferentes.
si sobreponemos dos retículas o tramas y cambiamos ya se el ángulo o la escala de alguna de ellas es posible que obtengamos este efecto, veamos un ejemplo.
si tenemos una trama como esta:

y la sobreponemos a sí misma para después hacerla girar se obtendrá un resultado inesperado para los que no conocen el efecto moiré:

este efecto se puede fácilmente implementar en código. en nuestro caso usamos el lenguaje de programación processing.

primer sketch
nuestro primer sketch de este tema reproduce exactamente lo que vimos en el ejemplo anterior, programándolo en processing.
veamos primero el resultado:

declaraciones
nuestro primer paso sería la declaración de las variables que vamos a usar, en este caso usamos dos variable para cargar las retículas o tramas que usaremos, una de ellas se mantendrá estática y la otra girará, lo mismo que un ángulo «beta» que definirá el giro en cada momento de la segunda imagen:

PImage cuadricula1, cuadricula2;
float beta;

setup()
en el setup tenemos algunas asignaciones importantes. primero usamos el modo de imagen conocido como CENTER que hace que la imagen se despliegue a partir de su punto central y no de la esquina superior izquierda como sería por omisión en processing; esto facilita que a la hora de girar la segunda imagen gire con su punto central como centro de la rotación.

después se cargan las imágenes, nótese que es la misma imagen en formato .png, que se usa dos veces, y finalmente se declara a beta como cero para iniciar en una posición en que ambas imágenes se sobreponen exactamente una encima de la otra:

imageMode(CENTER);
cuadricula1 = loadImage(«puntos.png»);
cuadricula2 = loadImage(«puntos.png»);
beta = 0; 

draw()
también en el draw() la programación es muy simple. primero se despliega la primera imagen para lo cual se traslada el centro coordenado a la mitad de la ventana:

translate (width/2, height/2);
image(cuadricula1, 0, 0);

después de esto se procede a desplegar la segunda cuadrícula para lo que se rota de acuerdo al ángulo «beta» en ese momento, se guarda y restaura el sistema coordenado para ir acumulando el ángulo de giro:

pushMatrix();
rotate(beta);
image(cuadricula2, 0, 0);
popMatrix();

finalmente se aumenta el ángulo según la velocidad que se desee:

beta+= TWO_PI/2000;