Multi Gradient

It’s a gradient created from the corners of the square.
I was googling and I found the Diamond-Square on Wikipedia.

The idea is quite simple.
First you get the top left and bottom left corner colors of the square. Than, you get the half height of the edge and also the average color of those colors.
You repeat that until you have all pixels of the edge.

Note: The average color is not (color2 - color1) * .5.
It’s (color2.r - color1.r) * .5 << 16 + (color2.g - color1.g) * .5 << 8 + (color2.b - color1.b) * .5.

After that, you make the same with the right edge.

Than, you do it for each edge from the top to bottom.

If you work around more, you can create gradient spots from any pixel you wish easily.

3 Comments »

  1. C4RL05 said,

    February 6, 2008 @ 12:20 am

    Love it.

  2. zh. said,

    February 11, 2008 @ 11:07 pm

    Great!!!
    Maybe you’ll give us some source?

  3. frank said,

    May 2, 2008 @ 8:16 pm

    hellokeita,

    thanks for sharing your knowledge with us. I used your GradientBitmapData.as andPointData.as to rebuild your Multi Gradient Example. It’s working, but it’s really slow. In my setup it takes much longer to fill a 400×400 bitmap.

    Maybe you can tell me how to speed the whole thing up?

    I instantiate GradientBitmapData like this:
    var gradientBitmapData:GradientBitmapData = new GradientBitmapData(400, 400,true,0xff00ffff);
    addChild(new Bitmap(gradientBitmapData));

    I add a points like this:
    var topleft:PointColor = new PointColor(0, 0, 0xffff00ff);
    gradientBitmapData.addSpot(topleft);

    Thanks
    Frank

RSS feed for comments on this post · TrackBack URI

Leave a Comment