We present a custom AS3 MarbleTexture class for creating marble-textured display objects completely from code. The class creates a Sprite with the same shape and mouse interactivity as any source Sprite that you pass to the constructor. The texture is created with a combination of BitmapData methods perlinNoise and copyChannel as well as DisplacementMapFilter and ColorMatrixFilter. Textures come in three colors: pink, blue, and white. Click on a screen shot below or on the corresponding text link to open a Flash movie with examples in a new window.
'Pink' radio button selection gives:
|
'Blue' radio button selection gives:
|
Download
- Download all source files corresponding to this effects: marble.zip
Download the zip package linked above for the complete, commented, and easy to customize source code.
MarbleTexture AS3 Class
Using the MarbleTexture class is similar to using the WoodTexture class: create a Sprite with whatever graphics and display children you like, then feed this Sprite to the constructor of the MarbleTexture class. See AS3 WoodTexture Class - Apply Wood Texture to Any Display Object for detailed explanations.
There are a few parameters available for customization of the texture. These include roundingAmount and roundingSize, which control how the marble appears to round three dimensionally near the borders of the display object. Also some coloring parameters are available, which are used inside the class to modify a ColorMatrixFilter: brightenFactor, fullColor, and offsetColor. See the colors used in the code of our example above and experiment with different values. More detailed information on these parameters is given below.
How MarbleTexture Class Works
The marble texture is based on Perlin noise. Since the color variations in Perlin noise alone are a little too rounded and smooth looking to appear like marble, we distort it. We have found that using a DisplacementMapFilter on the Perlin noise bitmap does the trick, with the Perlin noise bitmap itself serving as the displacement map. This creates a more jagged variation of hues.
After distorting the Perlin noise BitmapData object, we transform its color with a ColorMatrixFilter. This filter is constructed in such a way so that only one channel of the Perlin noise (the red channel) is used to control the output color. When the red value of a pixel is zero, a base color called the offsetColor will result in the output image. Increasing amounts of red will cause increasing amounts of another color, fullColor, to be mixed into the output color. (This color is called fullColor because it will be the color achieved when a source pixel is at its maximum red value.) The color variation is made more intense by increasing the brightenFactor value, which brightens the value of a pixel before it is read to determine the output color.
See our comments on the WoodTexture class at AS3 WoodTexture Class - Apply Wood Texture to Any Display Object for more details about the methods used to map the texture to a given Sprite.
Related Flash and Math Tutorials
Here are a few Flash and Math tutorials related to Perlin Noise, ColorMatrixFilter, DisplacementMapFilter, and paletteMap:
- AS3 Flash: Psychedelic Effect via Perlin Noise and DisplacementMapFilter
- Realistic White Clouds on Blue Sky - Perlin Noise and ColorMatrixFilter
- AS3 WoodTexture Class - Apply Wood Texture to Any Display Object
The latter, wood texture, example uses Perlin Noise and the paletteMap method of the BitmapData class.
