Creación de texturas con funciones de ruido

Flash Player 9 y posterior, Adobe AIR 1.0 y posterior

Para modificar la apariencia de un mapa de bits, se le puede aplicar un efecto de ruido utilizando para ello los métodos noise() o perlinNoise() . Un efecto de ruido puede asemejarse a la estática que aparece en una pantalla de televisión no sintonizada.

Para aplicar un efecto de ruido a un mapa de bits se utiliza el método noise() . Este método aplica un valor de color aleatorio a los píxeles que se hallan dentro de un área especificada de una imagen de mapa de bits.

Este método acepta cinco parámetros:

  • randomSeed (int): número de inicialización aleatorio que determinará el patrón. A pesar de lo que indica su nombre, este número crea los mismos resultados siempre que se pasa el mismo número. Para obtener un resultado realmente aleatorio, es necesario utilizar el método Math.random() para transmitir un número aleatorio a este parámetro.

  • low (uint): este parámetro hace referencia al valor más bajo que se generará para cada píxel (de 0 a 255). El valor predeterminado es 0. Si se establece un valor más bajo, se originará un patrón de ruido más oscuro, mientras que con un valor más alto, el patrón será más brillante.

  • high (uint): este parámetro hace referencia al valor más alto que se generará para cada píxel (de 0 a 255). El valor predeterminado es 255. Si se establece un valor más bajo, se originará un patrón de ruido más oscuro, mientras que con un valor más alto, el patrón será más brillante.

  • channelOptions (uint): este parámetro especifica el canal de color del objeto de mapa de bits al que se aplicará el patrón de ruido. El número puede ser una combinación de cualquiera de los cuatro valores ARGB de los canales de color. El valor predeterminado es 7.

  • grayScale (Boolean): cuando se define como true , este parámetro aplica el valor de randomSeed a los píxeles del mapa de bits, de modo que se elimina todo el color de la imagen. El canal alfa no se ve afectado por este parámetro. El valor predeterminado es false .

En el siguiente ejemplo se crea una imagen de mapa de bits y se le aplica un patrón de ruido azul:

package 
{ 
    import flash.display.Sprite; 
    import flash.display.Bitmap; 
    import flash.display.BitmapData; 
    import flash.display.BitmapDataChannel; 
 
    public class BitmapNoise1 extends Sprite 
    { 
        public function BitmapNoise1() 
        { 
            var myBitmap:BitmapData = new BitmapData(250, 250,false, 0xff000000); 
            myBitmap.noise(500, 0, 255, BitmapDataChannel.BLUE,false); 
            var image:Bitmap = new Bitmap(myBitmap); 
            addChild(image); 
        } 
    } 
}

Si se desea crear una textura de apariencia más orgánica, es aconsejable utilizar el método perlinNoise() . El método perlinNoise() produce texturas orgánicas realistas que resultan idóneas para humo, nubes, agua, fuego e incluso explosiones.

Dado que se genera mediante un algoritmo, el método perlinNoise() utiliza menos memoria que las texturas basadas en mapas de bits. Sin embargo, puede repercutir en el uso del procesador y ralentizar el contenido, haciendo que la pantalla se vuelva a dibujar más lentamente que la velocidad de fotogramas, sobre todo en equipos antiguos. Principalmente esto se debe a los cálculos en punto flotante que se deben ejecutar para procesar los algoritmos de ruido Perlin.

Este método acepta nueve parámetros (los seis primeros son obligatorios):

  • baseX (Number): determina el valor x (tamaño) de los patrones creados.

  • baseY (Number): determina el valor y (tamaño) de los patrones creados.

  • numOctaves (uint): número de octavas o funciones de ruido individuales que se van a combinar para crear este ruido. A mayor número de octavas, mayor detalle pero también más tiempo de procesamiento.

  • randomSeed (int): el número de inicialización aleatorio funciona exactamente igual que en la función noise() . Para obtener un resultado realmente aleatorio, es necesario utilizar el método Math.random() para transmitir un número aleatorio a este parámetro.

  • stitch (Boolean): si se establece en true , este método intenta unir (o suavizar) los bordes de transición de la imagen para crear texturas continuas que se pueden utilizar como mosaicos para rellenos de mapas de bits.

  • fractalNoise (Boolean): este parámetro hace referencia a los bordes de los degradados generados mediante este método. Si se define como true , el método genera ruido fractal que suaviza los bordes del efecto. Si se define como false , genera turbulencia. Una imagen con turbulencia presenta discontinuidades visibles en el degradado que pueden producir efectos visuales más nítidos, como llamas u olas del mar.

  • channelOptions (uint): el parámetro channelOptions funciona del mismo modo que en el método noise() . Con él es posible especificar a qué canal de color (del mapa de bits) se aplicará el patrón de ruido. El número puede ser una combinación de cualquiera de los cuatro valores ARGB de los canales de color. El valor predeterminado es 7.

  • grayScale (Boolean): el parámetro grayScale funciona del mismo modo que en el método noise() . Si se define como true , aplica el valor de randomSeed a los píxeles del mapa de bits, de modo que se elimina todo el color de la imagen. El valor predeterminado es false .

  • offsets (Conjunto): conjunto de puntos que corresponde a desplazamientos x e y para cada octava. Mediante la manipulación de los valores de desplazamiento se pueden mover suavemente las capas de la imagen. Cada punto de la conjunto de desplazamiento afecta a una función de ruido de octava específica. El valor predeterminado es null .

En el siguiente ejemplo se crea un objeto BitmapData de 150 x 150 píxeles que llama al método perlinNoise() para generar un efecto de nubes azul y verde:

package 
{ 
    import flash.display.Sprite; 
    import flash.display.Bitmap; 
    import flash.display.BitmapData; 
    import flash.display.BitmapDataChannel; 
 
    public class BitmapNoise2 extends Sprite 
    { 
        public function BitmapNoise2() 
        { 
            var myBitmapDataObject:BitmapData = 
                new BitmapData(150, 150, false, 0x00FF0000); 
             
            var seed:Number = Math.floor(Math.random() * 100); 
            var channels:uint = BitmapDataChannel.GREEN | BitmapDataChannel.BLUE  
            myBitmapDataObject.perlinNoise(100, 80, 6, seed, false, true, channels, false, null); 
             
            var myBitmap:Bitmap = new Bitmap(myBitmapDataObject); 
            addChild(myBitmap); 
        } 
    } 
}