Variable blur around a shape
Hi, is it possible to have a blur on (say a circle) that is bigger on one side than on the other?
I need some shadow areas that have a stronger blur (wider/larger) along some sections that on others - all one shape though.
Perhaps there's some clever way to do this with clipping or masking?
\d
On 14/4/11 09:26, donn wrote:
Hi, is it possible to have a blur on (say a circle) that is bigger on one side than on the other?
I need some shadow areas that have a stronger blur (wider/larger) along some sections that on others - all one shape though.
Perhaps there's some clever way to do this with clipping or masking?
Possibly this screenshot could serve as an example? http://inkscape.org/screenshots/gallery/inkscape-0.45-depthoffield.png
Quoting from http://inkscape.org/screenshots/index.php?lang=en&version=0.45:
This screenshot demonstrates the use of Gaussian Blur for imitating the "depth of field" effect where different parts of an object are blurred to different extent depending on how far they are from you. Also you can see here our History dialog with a complete list of actions in performed on the document the current editing session.
hth, ~suv
On 14/04/2011 12:26, ~suv wrote:
Possibly this screenshot could serve as an example? http://inkscape.org/screenshots/gallery/inkscape-0.45-depthoffield.png
Ah,cunning. Thanks, that gives me something to go with.
\d
On 14/4/11 14:14, Moritz Moeller wrote:
On 04/14/2011 12:26 PM, ~suv wrote:
On 14/4/11 09:26, donn wrote:
Hi, is it possible to have a blur on (say a circle) that is bigger on one side than on the other?
Possibly this screenshot could serve as an example? http://inkscape.org/screenshots/gallery/inkscape-0.45-depthoffield.png
This is just blending the blur. The blur radius is still constant. This looks completely different that a variable-radius blur.
Afaik the OP's request is not possible with standard SVG effects.
Perhaps you missed
On 14/4/11 09:26, donn wrote:
(...)
Perhaps there's some clever way to do this with clipping or masking?
There's no claim in the linked screenshot and in the quoted description to actually use a varying blur radius ("demonstrates the use of Gaussian Blur for _imitating_ the "depth of field" effect where different parts of an object are blurred to different extent")
~suv
On 2011-04-14 14:14, Moritz Moeller wrote:
On 04/14/2011 12:26 PM, ~suv wrote:
Possibly this screenshot could serve as an example? http://inkscape.org/screenshots/gallery/inkscape-0.45-depthoffield.png
This is just blending the blur. The blur radius is still constant. This looks completely different that a variable-radius blur.
Afaik the OP's request is not possible with standard SVG effects.
Yes and no. You are right that it's just an approximation, but then, so are most (if not all) filters, so that's not a problem per se. However, you are right that in general this particular approximation is pretty bad and that it is not trivial to create a really good approximation in SVG. Still, for most artistic purposes the proposed method is probably okay, especially when using more intermediate steps.
Another way to think of it would be: A blurred circle that has wind blowing across it -- you say "blow from 280 degrees at 5% strength" and you get a bigger blur on the north-west side and a smaller one on the 280 degree south east side. For bonus points allow the 'wind' to follow a path!
Anyway, I gather this is not native to SVG or Inkscape, so faking it by masks or just overlapping shapes with different blurs seems to be the way to go.
Thanks all. \d
On 14/4/11 14:46, Moritz Moeller wrote:
On 04/14/2011 01:37 PM, ~suv wrote:
Perhaps you missed
On 14/4/11 09:26, donn wrote:
(...)
Perhaps there's some clever way to do this with clipping or masking?
There's no claim in the linked screenshot and in the quoted description to actually use a varying blur radius ("demonstrates the use of Gaussian Blur for _imitating_ the "depth of field" effect where different parts of an object are blurred to different extent")
I did not miss anything and neither did I take part part of the OPs message out of context to make a point. ;)
The OP asked for /varying/ blur radius /via/ (possibly) clipping or masking. He did /not/ ask for clipping or masking to fade a /constant/ blur.
I would tend to think the difference is totally apparent but my background is in film. :)
You are right - my earlier reply was uncalled-for, sorry ...
~suv
On 04/14/2011 12:26 PM, ~suv wrote:
On 14/4/11 09:26, donn wrote:
Hi, is it possible to have a blur on (say a circle) that is bigger on one side than on the other?
Possibly this screenshot could serve as an example? http://inkscape.org/screenshots/gallery/inkscape-0.45-depthoffield.png
This is just blending the blur. The blur radius is still constant. This looks completely different that a variable-radius blur.
Afaik the OP's request is not possible with standard SVG effects.
.mm
On Thu, 2011-04-14 at 15:05 +0200, Moritz Moeller wrote:
On 04/14/2011 01:56 PM, donn wrote:
Another way to think of it would be: A blurred circle that has wind blowing across it -- you say "blow from 280 degrees at 5% strength" and you get a bigger blur on the north-west side and a smaller one on the 280 degree south east side. For bonus points allow the 'wind' to follow a path!
Imho the best way for many application is what high end compositing apps use. Ann offset curve. The diameter of the blur is the distance between the original and the offset curve. The offset curve can be freely edited, only # of CVs matches original. However, afaik SVG filters always apply to a the whole of a shape, they do not take some curve as a parameter, so I guess the spec currently doesn't even contain the means to add this, unless I miss sth.
Another option which could use mask is an effect which takes the mask a multiplier for one of its parameters. I.e. density*blur radius. This would cover most applications, I guess.
Attached is a screen shot from the high-end compositing app 'Nuke'. Though this is raster-based, the depicted effect is purely steered by Beziers.
.mm
It looks like this effect could be simulated with mesh gradients. I've been working on getting mesh gradients added to the SVG standard.
Tav
On 04/14/2011 01:37 PM, ~suv wrote:
Perhaps you missed
On 14/4/11 09:26, donn wrote:
(...)
Perhaps there's some clever way to do this with clipping or masking?
There's no claim in the linked screenshot and in the quoted description to actually use a varying blur radius ("demonstrates the use of Gaussian Blur for _imitating_ the "depth of field" effect where different parts of an object are blurred to different extent")
I did not miss anything and neither did I take part part of the OPs message out of context to make a point. ;)
The OP asked for /varying/ blur radius /via/ (possibly) clipping or masking. He did /not/ ask for clipping or masking to fade a /constant/ blur.
I would tend to think the difference is totally apparent but my background is in film. :)
.mm
On 2011-04-14 14:19, Tavmjong Bah wrote:
On Thu, 2011-04-14 at 15:05 +0200, Moritz Moeller wrote:
Attached is a screen shot from the high-end compositing app 'Nuke'. Though this is raster-based, the depicted effect is purely steered by Beziers.
.mm
It looks like this effect could be simulated with mesh gradients. I've been working on getting mesh gradients added to the SVG standard.
I think that this particular effect is probably more similar to diffusion curves. Mesh gradients are cool, but in this particular case might not be the easiest to handle (you'd have to figure out how to subdivide the space within the outer curve). I expect the method in Moritz's screenshot to essentially use a simple (linear?) interpolation between two curves though, like can be done with this method: http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm (Note that Inkscape also has some functionality to do this, by means of the Interpolate extension.)
On 04/14/2011 01:56 PM, donn wrote:
Another way to think of it would be: A blurred circle that has wind blowing across it -- you say "blow from 280 degrees at 5% strength" and you get a bigger blur on the north-west side and a smaller one on the 280 degree south east side. For bonus points allow the 'wind' to follow a path!
Imho the best way for many application is what high end compositing apps use. Ann offset curve. The diameter of the blur is the distance between the original and the offset curve. The offset curve can be freely edited, only # of CVs matches original. However, afaik SVG filters always apply to a the whole of a shape, they do not take some curve as a parameter, so I guess the spec currently doesn't even contain the means to add this, unless I miss sth.
Another option which could use mask is an effect which takes the mask a multiplier for one of its parameters. I.e. density*blur radius. This would cover most applications, I guess.
Attached is a screen shot from the high-end compositing app 'Nuke'. Though this is raster-based, the depicted effect is purely steered by Beziers.
.mm
On Thu, 2011-04-14 at 14:55 +0200, Jasper van de Gronde wrote:
On 2011-04-14 14:19, Tavmjong Bah wrote:
On Thu, 2011-04-14 at 15:05 +0200, Moritz Moeller wrote:
Attached is a screen shot from the high-end compositing app 'Nuke'. Though this is raster-based, the depicted effect is purely steered by Beziers.
.mm
It looks like this effect could be simulated with mesh gradients. I've been working on getting mesh gradients added to the SVG standard.
I think that this particular effect is probably more similar to diffusion curves. Mesh gradients are cool, but in this particular case might not be the easiest to handle (you'd have to figure out how to subdivide the space within the outer curve). I expect the method in Moritz's screenshot to essentially use a simple (linear?) interpolation between two curves though, like can be done with this method: http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm (Note that Inkscape also has some functionality to do this, by means of the Interpolate extension.)
If the offset path is originally created by duplicating the first then you already have matching sets of Bezier curves (or segments that can be converted to Bezier curves). The endpoints of each pairs of Beziers would simply need to be connected to form a mesh patch.
On 04/14/2011 02:55 PM, Jasper van de Gronde wrote:
I think that this particular effect is probably more similar to diffusion curves. Mesh gradients are cool, but in this particular case might not be the easiest to handle (you'd have to figure out how to subdivide the space within the outer curve). I expect the method in Moritz's screenshot to essentially use a simple (linear?) interpolation between two curves though
It is a smoothstep-like function with global controls via the 'feather' and 'feather falloff' knobs. It would be cooler if these were per-CV too.
But I guess this is just having parameters to steer the replica interpolation.
.mm
On 2011-04-14 16:01, Tavmjong Bah wrote:
On Thu, 2011-04-14 at 14:55 +0200, Jasper van de Gronde wrote:
On 2011-04-14 14:19, Tavmjong Bah wrote:
On Thu, 2011-04-14 at 15:05 +0200, Moritz Moeller wrote:
Attached is a screen shot from the high-end compositing app 'Nuke'. Though this is raster-based, the depicted effect is purely steered by Beziers.
.mm
It looks like this effect could be simulated with mesh gradients. I've been working on getting mesh gradients added to the SVG standard.
I think that this particular effect is probably more similar to diffusion curves. Mesh gradients are cool, but in this particular case might not be the easiest to handle (you'd have to figure out how to subdivide the space within the outer curve). I expect the method in Moritz's screenshot to essentially use a simple (linear?) interpolation between two curves though, like can be done with this method: http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm (Note that Inkscape also has some functionality to do this, by means of the Interpolate extension.)
If the offset path is originally created by duplicating the first then you already have matching sets of Bezier curves (or segments that can be converted to Bezier curves). The endpoints of each pairs of Beziers would simply need to be connected to form a mesh patch.
Good point :) (Although I think linear interpolation between two paths is probably still easier than either other method.)
participants (5)
-
donn -
Jasper van de Gronde -
Moritz Moeller -
Tavmjong Bah -
~suv