There are several ways to do this... although I feel like the "normal" ones won't be what you're looking for.
1
First, the obvious: there's a blur filter already available in Processing. But it blurs the whole image. You could still use it successfully by drawing the "blurred circles" first, blurring the image then drawing the sharp circles.
But There's two problems here: first I'm pretty sure that it won't be the result you're looking for. Second, that method is awfully costly. Unless you have a monster machine, it'll slow down.
2
You can draw an already blurred circle to a PImage and use it instead of the sharp circle when the blur conditions applies. While this approach would work, I still doubt that you're looking for this. I'm giving you some code in case you want to try it yourself (but only the Ball class, as the rest doesn't have to change):
class Ball {
//1.Attributes
PGraphics blurredCircle;
boolean blur;
float xPos, yPos, xSpeed, ySpeed, blurSize;
float size;
color colour;
//2.Constructor
Ball() {
blur = false;
blurSize = 200;
xPos = width / 2;
yPos = height / 2;
xSpeed = random(-4, 4);
ySpeed = random(-4, 4);
size = random(700, 1000);
colour = color(random(0, 255), random(0, 255), random(0, 255));
// drawing a blurred circle to memory
blurredCircle = createGraphics((int)(size+2*blurSize), (int)(size+2*blurSize), P2D);
blurredCircle.beginDraw();
blurredCircle.background(0, 0, 0, 0); // using transparency to avoid drawing a white rectangle around the circle
blurredCircle.stroke(colour, 100);
blurredCircle.fill(colour, 100);
blurredCircle.ellipseMode(CENTER);
blurredCircle.ellipse(blurredCircle.width/2, blurredCircle.height/2, size, size);
blurredCircle.filter(BLUR, blurSize);
blurredCircle.endDraw();
}
//3.Actions
void render() {
if (blur) {
imageMode(CENTER);
image(blurredCircle, xPos, yPos);
} else {
stroke(colour, 100);
fill(colour, 100);
ellipse(xPos, yPos, size, size);
}
UpdateSpeed();
UpdateBlur();
}
void UpdateSpeed() {
xPos += xSpeed;
yPos += ySpeed;
// direction
if (xPos < 0 || xPos > width) {
xSpeed *= -1;
}
if (yPos < 0 || yPos > height) {
ySpeed *= -1;
}
}
void UpdateBlur() {
int blurDistance = 50;
blur = xPos < 0 + blurDistance || xPos > width - blurDistance || yPos < 0 + blurDistance || yPos > height - blurDistance;
}
}
3
This one is kind of just me trying to get some interesting result. I drew a blurred circle to a PImage then adjusted the algorithm so there's a "core" circle which size never change with a "blurred" circle getting bigger as it gets near the border:
ArrayList < Ball > list = new ArrayList();
void setup() {
//fullScreen(P2D);
size(500, 500, P2D);
for (int iter = 0; iter < 5; iter++) //qty of balls on the screen
list.add(new Ball());
}
void draw() {
background(0);
// way better!
for (Ball thisBall : list)
thisBall.render();
}
class Ball {
//1.Attributes
PGraphics blurredCircle;
float xPos, yPos, xSpeed, ySpeed, blurSize, blur, blurDistance, maxBlurPercentIncrease;
float size;
color colour;
//2.Constructor
Ball() {
blur = 1;
blurSize = 200;
blurDistance = 200;
maxBlurPercentIncrease = 75;
xPos = width / 2;
yPos = height / 2;
xSpeed = random(-2, 2);
ySpeed = random(-2, 2);
size = random(200, 400);
colour = color(random(0, 255), random(0, 255), random(0, 255));
// drawing a blurred circle to memory
blurredCircle = createGraphics((int)(size+2*blurSize), (int)(size+2*blurSize), P2D);
blurredCircle.beginDraw();
blurredCircle.background(0, 0, 0, 0); // using transparency to avoid drawing a white rectangle around the circle
blurredCircle.noStroke();
blurredCircle.fill(colour, 100);
blurredCircle.ellipseMode(CENTER);
blurredCircle.ellipse(blurredCircle.width/2, blurredCircle.height/2, size, size);
blurredCircle.filter(BLUR, blurSize);
blurredCircle.endDraw();
}
//3.Actions
void render() {
UpdateBlur();
float currentSize = size * blur;
imageMode(CENTER);
image(blurredCircle, xPos, yPos, currentSize, currentSize);
noStroke();
fill(colour, 100);
ellipse(xPos, yPos, size/2, size/2);
fill(255);
UpdateSpeed();
}
void UpdateSpeed() {
xPos += xSpeed;
yPos += ySpeed;
// direction
if (xPos < 0 || xPos > width) {
xSpeed *= -1;
}
if (yPos < 0 || yPos > height) {
ySpeed *= -1;
}
}
void UpdateBlur() {
float[] values = { xPos, yPos, abs(xPos-width), abs(yPos-height) };
float min = min(values);
if (min == 0) {
min = 1;
}
blur = 1;
if (min < blurDistance) {
float adjustment = ((blurDistance-min)/blurDistance)*maxBlurPercentIncrease;
if (adjustment > 5) {
blur += adjustment/100;
}
}
}
}
I'm encouraging you to experiment along these lines as I imagine you have something precise in mind. Good luck!
