How do I get rid of the white edges on these blurred ellipses?

krashe1313

So I'm working on a project that randomizes the color and placement of ellipses. Which works(?), based tweaking what I found in the Processing guides on their website. Problem is, if you look at the picture screen shot, where the circles overlap there is a white blurred edge rather than the color of one circle blurring into the next.

Any idea on how to fix this? Or do I need my eyes checked? Thanks!

PImage cir;
    void setup() {
      size(400, 400);


      background(255);
      for(int x = 0; x < 100; x++)
      {
        PGraphics pg = createGraphics(200,200);
        pg.beginDraw();
        pg.background(255,255,255,0);
        pg.fill(random(255), random(255), random(255));
        pg.noStroke();
        pg.ellipse(100,100,50,50);
        pg.filter(BLUR,5);
        pg.endDraw();
        cir = pg.get();
        imageMode(CENTER);
        image( cir, random(width), random(height));
       }
        println("done");
    }
    void draw() {

    }

benja

I may be wrong here, but think blur doesn't consider the transparency of the background. If your project doesn't really depend on multiple different PGraphics, i would recommend to use only one with an opque background and draw all the circles onto that PGraphics-object.
That would be a lot faster too.

Another tip: You don't need to create a PImage with get(), you can just use the PGraphics directly with image().

void setup() {
  size(400, 400);
  background(255);

  PGraphics pg = createGraphics(width, height);

  pg.beginDraw();
  pg.noStroke();  
  pg.background(255);

  for (int x = 0; x < 100; x++)
  {
    pg.fill(random(255), random(255), random(255));
    pg.ellipse(random(width), random(height), 50, 50);
  }

  pg.filter(BLUR, 5);
  pg.endDraw();

  image( pg, 0, 0);
  println("done");
}

krashe1313

Benja, Thanks for the simplified code example and using the PGraphics directly with image(). I'll use that; less lines the better.

I'll look into what you've presented here. This is going to part of a visual / artist piece so I'm not sure if this code is going to work quite the way I ultimately intend to. I used a loop to create a lot of dots for testing purposes. In the finished piece they'll be created by various prompts in real time.

Thank you for your help!

krashe1313

K, so I'm still stuck and maybe there is a better way to do this. You're example worked great IF I were to create the dots all at once. But if I do it with a mouse click, as expected, I get the same problem of white halo-ing, because each dot is created at the time of the click.

Thoughts? And thank you.

here's what I'm toying with now:

void setup()
{
  size(400, 400);
  background(255);


}

void draw()
{

 if(mousePressed == true)
 {

 PGraphics pg = createGraphics(400, 400);
  pg.beginDraw();
  pg.noStroke();  
  pg.background(255,0);



    pg.fill(random(255), random(255), random(255));
    pg.ellipse(random(width), random(height), 50, 50);


  pg.filter(BLUR, 5);
  pg.endDraw();

  image( pg, 0, 0);
  println("done");
 }//end if
}//end draw()

benja

The halo appears, because you have a transparent background for the PGraphics again. You don't need to create a new PGraphics-object for every circle. You can use just one PGraphics and draw all the circles there. And when a new circle is drawn, you can draw the PGraphics as an image and apply the blur.

PGraphics pg;

void setup()
{
  size(400, 400);
  background(255);

  // create PGraphics and set fill/stroke
  pg = createGraphics(400, 400);
  pg.beginDraw();
  pg.background(255);
  pg.noStroke();  
  pg.endDraw();
}

void draw() {
}

void mousePressed() {
  // draw a random ellipse onto the PGraphics
  pg.beginDraw();
  pg.fill(random(255), random(255), random(255));
  pg.ellipse(random(width), random(height), 50, 50);
  pg.endDraw();

  // white background
  background(255);
  // draw PGraphics
  image( pg, 0, 0);
  // apply blur-filter
  filter(BLUR, 5);
}

krashe1313

Ahhhhhh! I get what you were saying more clearly now! Thank you! I thought I was understanding you the first time; but as I was trying to toy with things I realized that I didn't.

This make so much sense now. To be honest, I'm having a dense "Oh yeah. That should have been obvious" moment now. This should really speed things up... literally. The way I was doing it was getting a bit bogged down.

I really appreciate your help.

Please accept this digital beer as a token of my gratitude:

Man, I've missed Processing...

koogs

The other way of doing this would be to have a fuzzy white PNG with relevant transparency and use tint () to set the colour before adding it to the main picture.

Might be faster despite using an image because you can probably skip the blur()

krashe1313

Cool. I'll have to try that and compare. Thanks!