Création de textures avec les fonctions de bruit aléatoire

Flash Player 9 et les versions ultérieures, Adobe AIR 1.0 et les versions ultérieures

Pour modifier l’aspect d’un bitmap, vous pouvez lui appliquer un effet de bruit à l’aide de la méthode noise() ou de la méthode perlinNoise(). La « neige » qui apparaît sur l’écran d’un téléviseur mal réglé est du bruit, ou du souffle.

Pour appliquer un effet de bruit à un bitmap, utilisez la méthode noise(). Cette méthode applique une valeur colorimétrique aléatoire aux pixels de la zone spécifiée d’une image bitmap.

Cette méthode accepte cinq paramètres :

  • randomSeed (int) : valeur aléatoire de départ qui déterminera le motif. En dépit du nom de ce paramètre, une même valeur pour ce nombre produira toujours le même résultat. Pour obtenir un résultat véritablement aléatoire, utilisez la méthode Math.random() pour transmettre un nombre aléatoire pour ce paramètre.

  • low (uint) : ce paramètre représente la valeur la plus faible à générer pour chaque pixel (de 0 à 255). Sa valeur par défaut est 0. Les valeurs les plus basses produisent un motif de bruit sombre, les valeurs les plus élevées produisent un motif de plus en plus clair.

  • high (uint) : ce paramètre représente la valeur la plus élevée à générer pour chaque pixel (de 0 à 255). La valeur par défaut est 255. Les valeurs les plus basses produisent un motif de bruit sombre, les valeurs les plus élevées produisent un motif de plus en plus clair.

  • channelOptions (uint) : ce paramètre indique le canal de couleur de l’objet bitmap auquel le motif de bruit sera appliqué. Ce nombre peut être une combinaison quelconque des quatre valeurs des canaux de couleur (ARVB). La valeur par défaut est 7.

  • grayScale (Boolean) : lorsque ce paramètre est activé (true), la valeur de randomSeed est appliquée aux pixels du bitmap, ce qui donne concrètement un effet de délavé sur toutes les couleurs de l’image. Le canal alpha n’est pas affecté par ce paramètre. La valeur par défaut est false.

L’exemple suivant crée une image bitmap et lui applique un motif de bruit bleu :

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 vous souhaitez créer une texture d’aspect plus organique, utilisez la méthode perlinNoise(). La méthode perlinNoise() produit des textures organiques plus réalistes, qui sont idéales pour des effets de fumée, de nuage, d’eau, de flamme ou même d’explosion.

Comme la méthode perlinNoise() fait appel à un algorithme, elle nécessite moins de mémoire vive que les textures à base de bitmaps. Elle peut malgré tout consommer beaucoup de ressources processeur, ce qui risque de ralentir le contenu et de provoquer des actualisations d’écran plus lentes que la cadence nominale, en particulier sur les ordinateurs plus anciens. En effet, les algorithmes de cette méthode effectuent des calculs en virgule flottante.

Cette méthode accepte neuf paramètres (les six premiers sont obligatoires) :

  • baseX (Number) : détermine la valeur x (taille) des motifs créés.

  • baseY (Number) : détermine la valeur y (taille) des motifs créés.

  • numOctaves: (uint) : nombre d’octaves ou fonctions de bruit individuelles à combiner pour créer ce bruit. Les nombres d’octaves élevés offrent davantage de détails mais nécessitent également un temps de traitement plus important.

  • randomSeed (int) : la valeur aléatoire de départ fonctionne exactement comme dans la fonction noise(). Pour obtenir un résultat véritablement aléatoire, utilisez la méthode Math.random() pour transmettre un nombre aléatoire pour ce paramètre.

  • stitch (Boolean) : si la valeur est true, cette méthode tente de lisser les bords de transition de l’image pour créer des textures sans bords définis, en vue d’une utilisation en mosaïque.

  • fractalNoise (Boolean) : ce paramètre concerne les bords des dégradés générés par cette méthode. S’il a la valeur true, la méthode génère un bruit fractal qui adoucit le pourtour. S’il a la valeur false, la méthode génère des turbulences. Les dégradés d’une image créée avec des turbulences présentent des discontinuités visibles qui permettent de mieux restituer certains effets visuels comme les flammes ou les vagues.

  • channelOptions (uint) : le paramètre channelOptions fonctionne exactement comme dans la méthode noise(). Il indique le canal de couleur de l’objet bitmap auquel le motif de bruit sera appliqué. Ce nombre peut être une combinaison quelconque des quatre valeurs des canaux de couleur (ARVB). La valeur par défaut est 7.

  • grayScale (Boolean) : le paramètre grayScale fonctionne exactement comme dans la méthode noise(). Si ce paramètre est activé (true), la valeur de randomSeed est appliquée aux pixels du bitmap, ce qui donne concrètement un effet de délavé sur toutes les couleurs de l’image. La valeur par défaut est false.

  • offsets: (Array) : un tableau de points correspondant aux décalages x et y pour chaque octave. En modifiant les valeurs de décalage, vous pouvez faire défiler en continu les calques d’une image. Chaque point du tableau de décalage affecte une fonction de bruit pour une octave spécifique. La valeur par défaut est null.

L’exemple suivant crée un objet BitmapData de 150 x 150 pixels qui appelle la méthode perlinNoise() pour générer un effet de nuage vert et bleu :

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); 
        } 
    } 
}