Search code examples
processingtransparencyalpha

Processing: Alpha Stops Increasing When Layering Shapes


I'm working with processing, attempting to make a "glow" effect. I figured if I layer 255 concentric circles on top of eachother, each with alpha = 1, then the centre should have alpha = 255 while the outside should have alpha = 1;

void setup()
{
  size(800, 800);
}

void draw()
{
  noStroke();
  background(0);
  translate(width/2, height/2);

  //Red Circle behind glow
  fill(255, 0, 0, 255);
  ellipse(0, 0, 10, 10);

  //Create glow circles
  for (int i=0; i<255; i++)
   {
     fill(255, 1);
     ellipse(0,0,i,i);
   }
}

This is the result. There's a clear divide at 128 alpha where it seems to stop increasing upon adding more circles.

Using different blend types doesn't appear to fix the issue either.

Is there something obvious I'm missing to get this to work?


Solution

  • By stacking the circles you have to multiply all previous alpha's, not add up for a total.

    A circle with 50% alpha shows 50% of the background. If you add a second circle with 50% alpha it shows 50% of what's beneath, which is the first circle and below that the background. The final result is 50% * 50% = 25% background.

    That means the last circle you draw still has alpha = 1, and it shows 99% of everything underneath. This is not the same as alpha = 255.

    That is the theory anyways. I can't really explain why it maxes out at 128, I tested a few things and it seems to me that this is something peculiar under the hood of processing.

    The solution to get the effect you want is something like this:

    for (int i=128; i>0; i--)
      {
        fill(255, 255, 255, 1);
        ellipse(0, 250, i*2, i*2);
      }
    

    If you want it brighter you can increase the alpha, but 'ring' artefacts will start showing.