Un amigo mio ha desenterrado una cracktro de antigüedad, la podéis ver aquí:
En su blog ha planteado una pregunta, ¿cómo se hace el efecto de bandera ondulante? Me había dado cuenta de que en realidad, aunque viese el efecto ese mil veces, nunca traté de imitarlo. Mi primera idea fue un algoritmo iterativo, el que deformaría la superficie de la textura tal como si fuera un trapo posado sobre unas ondas. Pero con muchas vueltas que le di, no podía conseguir el efecto 3d que podemos ver en la dicha intro.
Pues entonces se me ha ocurrido que todo debe ser mucho más sencillo de lo que pensaba. Lo que tenemos es una proyección de perspectiva en su forma más sencilla, con la cámara mirando a lo largo de la eje z. Entonces la transformación es muy fácil y la podemos escribir como:
u = t/(1+z)
v = s/(1+z), donde u,v son las coordenadas de la textura y t,s son las coordenadas de pantalla
He aquí el resultado. Trabaja bastante bien en los navegadores modernos, salvo a los de los móviles que todavía no dan abasto con la cantidad de calculaciones con punto flotante (JavaScript no tiene números enteros). Lo he hecho en Processing, y lo que podéis ver en vuestro navegador funciona gracias a processing.js. El código fuente está aquí, perdonad que parece un poco feo, es la labor del amor.
Mientras explicaba como funciona al amigo mio, se me ha ocurrido hacer una demonstración de la funcion que hace agitar la imagen. La función es:
f(x, y, t) = (sin(cos(t)+x) + cos(sin(t)+y)) + 0.5*sin(0.3*t+sqrt(x^2+y^2))
Se trata de tener algo que pareciera ondas atravesando en direcciones distintas, de modo que podemos alterarla como nos de la gana y cada variación producirá resultado que agite bastante bien. Como tenemos el tercero argumento, t, o sea tiempo, no podemos ilustrar como se comporta en un gráfico sin animación. No pudé encontrar ninguna herramienta para hacer animaciónes de este tipo, por eso escribió un pequeño script en Python que produciera otro script para gnuplot. El script se ve como lo siguiente:
outdir='c:/temp/babor/png/' print 'f(x, y, time) = (sin(cos(time)+x) + cos(sin(time)+y)) + 0.5*sin(0.3*time+sqrt(x*x*2+y*y*2))' print 'set xrange [-1:1]' print 'set yrange [-1:1]' print 'set zrange [-2:2.6]' print 'set term png' for itime in xrange(0,600): ftime = itime / 10.0 print 'set output "%sbabor%03d.png"' % (outdir,itime) print 'time=%f' % ftime print 'splot f(x,y,time)'
El script hecho con la ayuda de este script me ha proporcionado 600 imagenes png, los cuales abrí en VirtualDub y guardé como película avi. Vedla aquí:
No insisto que sea la copia exacta del original pero se parece bastante.
En el tiempo de la intro original se trataba de un trabajo mucho más complejo, con las calculaciones en números enteros y un montón de código en ensamblador. Pues entonces también solíamos disponer de más tiempo que el día de hoy.
La música que suena en las ambas variaciones es el tema de Yehat, la raza de aves nobles con aire trágico de Star Control 2.
Snurfel 