ActionScript Gradient Banding Problem

Question

i'm having a strange issue with banding between certain colors of a gradient.

to create the gradient, i'm drawing evenly spaced circle wedges from the center to the border, and filling each circle wedge from a bitmap line gradient pixel in a loop.

i'm creating a circle with 3600 wedges, although it doesn't look like it based on the screen shot within the orange color that is produced from gradating from red to yellow numbers. adding a orange number between red and yellow doesn't help. but if i create the circle with only 360 wedges, the gradient banding is much more obvious. 3600 is probably overkill, and doesn't really add more detail over, say, making the circle of 1440 wedges, but i don't know any other way to slightly elevate this banding issue.

any ideas how i can fix this, or what i'm doing wrong? could it be caused by the circleMatrix rotation?

Answer 1

I think the banding is being caused by your ratios.

Try this:

graphics.beginGradientFill(GradientType.LINEAR, [nColor, nColor], [1, 1], [0, 255], objMatrix)

Also, should objMatrix actually be circleMatrix?

You can see the difference between [127, 255] and [0, 255] in the LiveDoc's

Answer 2

Edit: Due to precision error some artifact can appear since you have only a range of 255 values to distribute.

To minimize this visual effect you can try to add some blur to your color band, but beware of the join between the left and the right side :

//...

//Assign bitmapData to the leftToRightLine
var leftToRightLineBitmapData:BitmapData = 
                   new BitmapData(leftToRightLine.width,leftToRightLine.height);
leftToRightLineBitmapData.draw(leftToRightLine);

// add some blur filter to the color band
leftToRightLine.filters=[new BlurFilter(2,0, 3)];

// copy the color band on the bitmap but but starting at 1 pixel right to avoid
// the blur on the start
leftToRightLineBitmapData.draw(leftToRightLine, new Matrix(1,0,0,1, 1));

for(var i:int = 1; i < (DEFAULT_BANDING_QUALITY + 1); i++)
{
  //...

---

Without full code to test, hard to know if i aim in the right direction ;)

• There is an error in your radian conversion it's i*Math.pi/180 and not /1800, so now you can go to 360 and not 3600

• why start from 1 and not from 0 ?

• try to play with the line thickness and use the lineGradientStyle

• You referer to an objMatrix but create a circleMatrix