"Reset" blur filter

Processing Coding Questions
1

My very first steps with Processing, and I couldn’t find the answer after Googling it for some time.

size(640, 360);

background(204, 153, 0);
smooth();
background(0);
noStroke();

fill(255,0,0);
ellipse(100,100,12,12);
filter( BLUR, 3 );
fill(255,230,230);
ellipse(100,100,6,6);
  
fill(255,0,0);
ellipse(120,120,12,12);
filter( BLUR, 3 );
fill(255,230,230);
ellipse(120,120,6,6);

This is my code. The two blocks paint a bright circle with emulated glow (by using a darker red with BLUR). But it looks like filter(BLUR, 3) is applied to everything before it. How can I have the two smaller ellipses not be blurred, and the two bigger ones be blurred?

1 Like
2

This works - drawing the two ellipses to a separate image and then drawing the image twice. But probably this is not the most efficient if I want to render thousands of these “glowing” shapes.

background(0);

PGraphics pg = createGraphics(40, 40);
pg.beginDraw();
pg.smooth();
pg.noStroke();
pg.fill(255,0,0);
pg.ellipse(20,20,12,12);
pg.filter( BLUR, 3 );
pg.fill(255,230,230);
pg.ellipse(20,20,6,6);
pg.endDraw();

image(pg, 100, 100);
image(pg, 120, 120);
2 Likes
3

Hi there Kirillg, welcome to the forum.

A way to achieve what you want is by first drawing the two bigger ellipses before calling filter(BLUR, 3), followed by drawing the two smaller ones right after. For example:

int size_ellipse = 192;
int size_glow = size_ellipse / 4;

size(640, 360);
background(204, 153, 0);
smooth();
background(0);
noStroke();

rectMode(CENTER);

fill(255, 0, 0);
ellipse(width * 0.25, height / 2, size_ellipse, size_ellipse);
fill(0, 0, 255);
ellipse(width * 0.75, height / 2, size_ellipse, size_ellipse);
filter(BLUR, 9);

fill(230, 230, 230, 150);
ellipse(width * 0.25, height / 2, size_glow, size_glow);
ellipse(width * 0.75, height / 2, size_glow, size_glow);

As you can see I’ve made some adjustments to your code. It might be a good exercise for you to figure out what these changes are and how these work (in case you didn’t know it already: the reference page is a great place to gather such information).

1 Like