Comunidad de diseño web y desarrollo en internet

Efecto de agua con la clase BitmapData de Flash 8

Este efecto genera oleajes por inicio puntual (gota). Utiliza el filtro de Convolución que actúa como principio de Huygens (cada punto es nuevo centro emisor de onda), Añadiendo suma y diferencia al resultado en cada ciclo y un nuevo desplazamiento terminamos el efecto. Está colocado sobre el canal azul aunque puede colocarse sobre todos, pero es mejor utilizar el canal bajo y, si se desea, añadir otro filtro de color al final para conseguir aceite, vino , mercurio, etc.

Para probarlo, da click sobre la siguiente imagen:


CLICKAR Y MOVER

Como en nuestros anteriores efectos de creación de nubes y de relieve sobre una imagen, sólo debes colocar este código en el primer keyframe.

Código :

import flash.display.*;
import flash.geom.*;
import flash.filters.*;
img = BitmapData.loadBitmap("imagen");
w = img.width;
h = img.height;
pt = new Point();
Nx = new Matrix();
Mx = new Matrix();
Mx.scale(2, 2);
sal = new BitmapData(w/2, h/2);
sal1 = sal2=new BitmapData(w, h);
ori = acum=new BitmapData(w/2, h/2, false, 128);
attachBitmap(sal2, 0);
ola = new ConvolutionFilter(3, 3, [0, 1, 0, 1, 1, 1, 0, 1, 0], 5);
ade = new ColorTransform(0, 0, .9958, 1, 0, 0, 2, 0);
agua = new DisplacementMapFilter(sal2, pt, 4, 4, 128, 128);
onMouseDown = onMouseUp=function () {
   pul = !pul;
};
onEnterFrame = function () {
   if (pul) {
      ori.setPixel(_xmouse/2, _ymouse/2, 0);
   }
   sal.applyFilter(ori, new Rectangle(0, 0, w/2, h/2), pt, ola);
   sal.draw(sal, Nx, null, "add");
   sal.draw(acum, Nx, null, "difference");
   sal.draw(sal, Nx, ade);
   sal1.draw(sal, Mx, null, null, null, true);
   sal2.applyFilter(img, new Rectangle(0, 0, w, h), pt, agua);
   acum = ori;
   ori = sal.clone();
};

El valor de .9958 de azul en la transformación de color es muy crítico y se ajusta en diezmilésimas dependiendo del tamaño de la imagen y el desplazamiento. Si se desfasa demasiado no parará el efecto nunca ( aunque esto pueda ser útil a veces).

agua = new DisplacementMapFilter(sal2, pt, 4, 4, 128, 128); Los valores 128, 128 dan la profundidad de la ola, valores menores producen oleaje más suave.

También se puede cambiar el generador de puntos al gusto, con Math.random() (para lluvia), u otra función cualquiera.

Las deformaciones para inclinación y ovalado (escalado x e y distinto), se pueden aplicar sobre la matriz Mx.

Todos los efectos de esta serie los desarrollo y atiendo en este post.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate