Morton 26 de julio de 2013 a las 08.22
   Imprimir artículo
elWebmaster.com

Crea el efecto de pantalla derretida de Doom en tu sitio web utilizando Javascript y Canvas


doom-wide¿Recuerdas la presentación del clásico Doom, donde una pantalla se derretía para pasar a la siguiente? En este artículo recrearemos el efecto utilizando Javascript y Canvas. ¿Estás listo?

Haz clic en este enlace para ver una demostración >>

Lo primero que necesitamos es dividir lógicamente la pantalla en columnas, permitiéndoles moverse en forma independiente.

doom-post-1

Luego, a cada columna le asignaremos un valor de altura que sea menor que 0. Empezaremos asignándole a la primera columna un valor aleatorio entre 0 y -100, y cada columna vecina tendrá un valor aleatorio alrededor de 50 números mayor o menor de la columna vecina. Tendremos que poner también un límite fijo para los valores, nunca permitiendo que un valor sea mayor a 0 o menor a -100.

doom-post-2

A mayor diferencia entre columnas, más aleatorio se volverá el efecto. La razón de mantener los valores de las columnas en un rango cercano de sus columnas vecinas es para crear un efecto visual rodante. El siguiente paso es bajar las columnas para revelar la imagen detrás.

Para eso, vamos a usar dos imágenes, la primera es el fondo y la dibujaremos primero, luego colocaremos la segunda imagen en columnas compensando la posición y de cada columna por su valor, incrementándolo cada vez que la función doMelt() es llamada, hasta que todos los valores de las columnas sean mayores a la altura de la imagen.

doom-post-3

El html requerido es mínimo, sólo necesitamos el canvas:

  1. <canvas id="canvas"></canvas>

Para el efecto de derretido vamos a crear un elemento canvas en la memoria, y es aquí donde dibujaremos las columnas. Usaremos bgImage y meltImage para cambiar entre la imagen que está en el fondo y la que se está derritiendo.

  1. var meltCan = document.createElement("canvas"),
  2. meltCtx = meltCan.getContext("2d"),
  3. images = [image1, image2],
  4. bgImage = 1,
  5. meltImage = 0,

Con la siguiente configuración, controlamos como se verá el efecto. colSize controla el ancho de las columnas, maxDev controla el valor más alto que una columna puede alcanzar, maxDiff controla la diferencia máxima entre las columnas vecinas, y fallSpeed controla la velocidad con la que caerán las columnas.

  1. settings = {
  2. colSize: 2,
  3. maxDev: 100,
  4. maxDiff: 50,
  5. fallSpeed: 6,
  6. }

La función init() es donde configuramos los valores iniciales de nuestra columna y dibujamos la imagen que derretiremos en nuestro canvas temporal. Asignamos al primer elemento un número aleatorio que esté entre 0 y el valor de maxDev, y luego por cada columna vecina tomaremos un valor que esté entre el rango maxDiff que hayamos establecido.

function init() {
meltCtx.drawImage(images[meltImage],0,0);

for (var x = 0; x < columns; x++) { if (x === 0) { y[x] = -Math.floor(Math.random() * settings.maxDev); } else { y[x] = y[x - 1] + (Math.floor(Math.random() * settings.maxDiff) - settings.maxDiff / 2); } if (y[x] > 0) {
y[x] = 0;
} else if (y[x] < -settings.maxDev) { y[x] = -settings.maxDev; } } } [/javascript] La función doMelt() es donde la magia sucede. Primero dibujamos nuestra imagen que está detrás de la imagen derretida al canvas, Luego la iteramos a través de las columnas incrementando el valor de fallSpeed. Si el valor no es mayor a 0, significa que el usuario no podrá ver el efecto aún, así que la posición y de las columnas (yPos) seguirá siendo 0. Si el valor de la columna es mayor a 0, la posición y de las columnas es establecida al valor de las columnas. Luego usamos drawImage para dibujar la columna desde el canvas temporario al canvas primario usando la compensación de su y a través de yPos. [javascript] function doMelt() { ctx.drawImage(images[bgImage],0,0); done = true; for (col = 0; col < columns; col++) { y[col] += settings.fallSpeed; if (y[col] < 0 ) { done = false; yPos = 0; }else if(y[col] < height){ done = false; yPos = y[col]; } ctx.drawImage(meltCan, col * settings.colSize, 0, settings.colSize, height, col * settings.colSize, yPos, settings.colSize, height); } if(done){ var swap = meltImage; meltImage = bgImage; bgImage = swap; init(); } requestAnimationFrame(domelt); } [/javascript] Haz clic en este enlace para ver una demostración >>

Eso es todo. ¡Esperamos que te haya sido de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder