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.
C4RL05 said,
February 6, 2008 @ 12:20 am
Love it.
zh. said,
February 11, 2008 @ 11:07 pm
Great!!!
Maybe you’ll give us some source?
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
Liam Walsh said,
July 20, 2008 @ 9:56 am
http://www.motiondraw.com/md/as_samples/t/gradientTween/gradientTweenEditor.html
Here’s an example of a similar (but cruder) implementation of the algorithm with the source code. (Not my work or my source code, but I have made it work and it’s pretty fast.)
Joaqo said,
August 20, 2008 @ 2:28 pm
Here is a much simpler way to do it (*simpler* referring to the amount of code).
It also includes an interesting glitch that I found (OMG, evil rgb triangles aligned in a sierpinsky-triangle-like way!) , which will be displayed at the right of the gradient. (code involving this glitch will be included between comment lines)
Add this to your main timeline:
var bData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
////////glitch>
var wData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
////////> 16;
color1_g = (color1&0×00ff00) >> 8;
color1_b = (color1&0×0000ff);
color2_r = (color2&0xff0000) >> 16;
color2_g = (color2&0×00ff00) >> 8;
color2_b = (color2&0×0000ff);
color3_r = (color3&0xff0000) >> 16;
color3_g = (color3&0×00ff00) >> 8;
color3_b = (color3&0×0000ff);
color4_r = (color4&0xff0000) >> 16;
color4_g = (color4&0×00ff00) >> 8;
color4_b = (color4&0×0000ff);
for (i = 0; i
color = rcolor
var wbmp = new Bitmap(wData);
wbmp.x = stage.stageWidth/2
addChild(wbmp)
////////
Joaqo said,
August 20, 2008 @ 2:30 pm
var bData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
////////glitch>
var wData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
////////> 16;
color1_g = (color1&0x00ff00) >> 8;
color1_b = (color1&0x0000ff);
color2_r = (color2&0xff0000) >> 16;
color2_g = (color2&0x00ff00) >> 8;
color2_b = (color2&0x0000ff);
color3_r = (color3&0xff0000) >> 16;
color3_g = (color3&0x00ff00) >> 8;
color3_b = (color3&0x0000ff);
color4_r = (color4&0xff0000) >> 16;
color4_g = (color4&0x00ff00) >> 8;
color4_b = (color4&0x0000ff);
for (i = 0; i
color = rcolor
var wbmp = new Bitmap(wData);
wbmp.x = stage.stageWidth/2
addChild(wbmp)
////////
Joaqo said,
August 20, 2008 @ 2:45 pm
… The code shows incompletely and incorrectly, so here is a link to the text file with the code:
http://joaqo182.googlepages.com/MultiGradient.txt
And here is the compiled swf:
http://joaqo182.googlepages.com/MultiGradient.swf