Controlled Blur or Edge Detect effect using Convolution Kernel

Programming Questions

daeva0123

Controlled Blur or Edge Detect effect using Convolution Kernel

in Programming Questions • 3 years ago

This is something I've been curious about for a while but never was never quite able to figure out. There are few examples online using convolution kernels to create blurring and other effects, but one thing was bugging me; How would it be possible to have a static image in processing, mouseclick in a certain area gradually blurring that small section of the image?

Id be very interested to hear of anyones attempt at trying to do this or anything similar :)

PS Itd be very cool to see methods for motion blurring if anyone knows of any!

Cheers

-Dave

Replies(7)

daeva0123

Re: Controlled Blur or Edge Detect effect using Convolution Kernel

3 years ago

anyone?

bjordal

Re: Controlled Blur or Edge Detect effect using Convolution Kernel

3 years ago

Challenge accepted!

Right so here is what i guess you were asking for, getting the circular fall-off to look good was a pain in the... but here it is

Copy code

PImage img;
PImage temp;
float[][] kernel = {{1,2,1},{2,4,2},{1,2,1}};
int blurRect = 50;
float blurRage = dist(blurRect-10,blurRect-10,0,0); //don't change this
void setup(){
img=loadImage("image.jpg");
temp = createImage(img.width,img.height,ARGB);
temp.set(0,0,img);
size(img.width,img.height);
}
void draw(){
image(img,0,0);
}
void mouseDragged(){
for(int y = max(mouseY-blurRect-1,1);y<min(mouseY+blurRect+1,height-1);y++){
for(int x = max(mouseX-blurRect-1,1);x<min(mouseX+blurRect+1,width-1);x++){
float rsum = 0;
float gsum = 0;
float bsum = 0;
float a = min((dist(mouseX,mouseY,x,y)+5)/blurRage,1);
for(int h = 0; h<3;h++){
for(int w = 0; w<3;w++){
color c = img.get(x+w-1,y+h-1);
rsum += red(c)*kernel[w][h];
gsum += green(c)*kernel[w][h];
bsum += blue(c)*kernel[w][h];
}
}
color c = img.get(x,y);
rsum /= 15.95;
gsum /= 15.95;
bsum /= 15.95;
rsum = (rsum*(1-a)+red(c)*a);
gsum = (gsum*(1-a)+green(c)*a);
bsum = (bsum*(1-a)+blue(c)*a);
temp.set(x,y,color(rsum,gsum,bsum));
}
}
img.set(0,0,temp);
}

daeva0123

Re: Controlled Blur or Edge Detect effect using Convolution Kernel

3 years ago

Wow :) Very Nice.

Thats Just what I meant!

bjordal

Re: Re: Controlled Blur or Edge Detect effect using Convolution Kernel

3 years ago

btw

Copy code

rsum /= 15.95;

just to make things clear 15.95 is: the sum of all numbers in the kernel minus 0.05

daeva0123

Re: Controlled Blur or Edge Detect effect using Convolution Kernel

3 years ago

LOL yeah im still reading though it bit by bit to get an understanding. Just trying to grasp how you got the circle brush on the mouse cursor hehe.

Good Stuff.

daeva0123

Re: Controlled Blur or Edge Detect effect using Convolution Kernel

3 years ago

BJordal,

Do you know of any good websites or books that can explain the use of convolution kernels for these kind of effects?

Thanks

-Dave

bjordal

Re: Controlled Blur or Edge Detect effect using Convolution Kernel

3 years ago

well all i've read is this: http://developer.apple.com/mac/library/documentation/Performance/Conceptual/vImage/ConvolutionOperations/ConvolutionOperations.html

but besides that, no.

Top Reply