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

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() {

    }

Answers

  • Answer ✓

    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");
    }
    
  • 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!

  • 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()
    
  • Answer ✓

    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);
    }
    
  • 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...

  • 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()

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

Sign In or Register to comment.