Dear friends,

i have seen a lot of vectorart on the web that uses a kind of shading with a grainy look.
Like little speckles.

Can this be achieved with a filter ?

Example:
https://blog.spoongraphics.co.uk/wp-con ... ype/22.jpg

Hi.

Sort of, yes it is possible. Although there are some limitations you have to keep in mind.

First, the shading is based on a gradient. That is preferably represented by a gradient fill attribute of an object.
The grainy filter should take that as an input and use those luminosity levels as a base point.

Therefore it'd need a bit of random displacement, then a way to "flatten" the gradient to match the look in the example.

The displacement filter primitive would take a turbulence noise filter primitive as an input. That primitive is not "per-object-wrap-around", nor the result would be. To draw clean edges you need to clip the filtered gradient objects.

Flattening the gradient is another part of the consideration. If that's a black to transparent it's easy to pull off.
In general, you can use the luminosity levels of the input to map any colours onto the gradient. That means if you'd distort a pre-existing gradient to simple colour steps dithering together, it can get quite complicated to set up the filter.

Edit:
attaching a quick and dirty example with two filters within.

One represents a greyscale copy of a gradient with a black scattering,
the other takes in the alpha channel of the filtered objects and represents that with the black scattering.

The bottom line is, you need to make these filtered shading objects larger than their output size and clip them with the shapes you want to be shaded.

Dear Lazur,

thanks for you quick reply !

Im afraid i have to confess i dont understand most of the things you posted, but yes, a black and white gradient with this grain effect would be good enough for what i had in mind.

Or at least i think it would be, if the Multiply Layermode can be applied to get rid of the white.

Of course a black to transparent gradient would be even better.

Can you make such a filter ?

Attached some example what can be achieved with the current filter primitives in my previous post.

It's nowhere perfect, the even displacement for some dithering is not equal to resampling a channel with somekind of algorithm like Floyd-Steinberg.
The problem with the resampling is (amongst the lack of filter primitive) that it depends on the output pixels, the output resolution-output screen px size. It is easily computed with a fixed set of pixels -raster image in a raster editor- but with scalable vector graphics, the effect would not scale as expected. Wouldn't produce the same look at 200% zoom level as at 50%.

Here is an interesting article of a few kind of different dithering with 2bit raster images.

Dear Lazur,

thank you for the filter !

I tried it, and im afraid i have to say, its not quite there.

The grain is restricted to a very small area and the particles are too small.
It almost looks like the Dissolve Layermode.

Is there a way to modify the filter some more ?

Set the "particles" as small as possible -so that they appear one pixel and not producing "granules" or clusters.

There is a way however to distort these further on but needs more visual input.
If you have more examples it'd be easier to aim at.
For example if you want those "pixels" to grow a bit, a morphology primitive can expand the coverage. Leading more of the "black" being present so it'd take a component transfer filter primitive to "correct" the input channel.


Attaching some examples.

Lazur wrote:If you have more examples it'd be easier to aim at.

I'd like to try something like this:
https://blog.spoongraphics.co.uk/wp-con ... d-type.jpg

Much of that chalkboard drawing feel comes from the additional raster textures added in "post-production".
Filtering is procedural, based on a generated formula which repeats. The hardest part of the challenge is making it able to mimmick the real randomness with the smooth noise built in the filters.
Details can be added in by adding new layers of filter textures and tweaking the filter settings but it will never cut the real deal.
(Here is a chalkboard filter I made 3 years ago. The principals are still the same...)

Having said these, gave it a go.
The background texture is also drawn with the help of filtering.

svg source



Not so satisfied with the background although the lettering and the requested "grainy gradient" looks fine to me. At least on this zoom level.
But when zoomed in -at the point where the computer starts melting- it could use a little work.

Here is a detail at 300% zooming:

Lazur wrote:Having said these, gave it a go.

Omg Lazur, what you created is not only exactly like the link i provided, its even better !
Absolutely lovely !

Now please bear with me, because i need a bit of help, on how to apply this to my own work.
I took the liberty to take your svg file apart, study it and try to make the filter work for me, but i cant do it.

First of all, i noticed, the grain texture seems to create transparency (after i deleted the background).
When i change the document background colour, it always shines through.....



Second, after i delete the background and ungroup the letter, the filter changes...
Why ???



And finally, when i try to apply the filter to a gradient, this happens:

Glad you like it!

A little explanation on the structure.
There are two squares on top, one filtered with "chalkpowder scattergrain" and the other with "chalkpowder overlay".
They both use the filtered object as an input so that their colour can be changed by the fill attribute of the object. It adds in some transparency as if the object was painted and excess paint removed with a sponge.

The bottom object depicting the base blackboard is a path filtered with the "blackboard" filter. The object is grouped and "wood grain overlay" filter is added to the group.
These two could be merged together into one filter or rather one long filter chain could be rigged from the start as one.
But for practical reasons, that is the easiest workaround to chain two filters together.
-The filter editor cannot organise subchains, there is no real visual output for the viewport besides adding in an extra merge filter primitive and moving connectors and there is no way merging them with the filter editor. The more complex it gets the less control you have since you need to track which primitive setting affects the desired look. There is no way to label important parts either.-

The "blackboard" filter generates a plain and simple black texture regardless the colour of the object it is applied on. The colour is defined by three flood fill primitives in the start of the filter chain.

The "wood grain overlay" adds a subtle wood grain texture -uses the filtered object's appearance as an input and uses multiply blending mode for creating the texture. Doesn't fit light coloured objects, but anything below 128 luminance should look fluent.


The rest is the chalk letter.
It is a group of one object with the "chalk" filter added atop.
The "chalk" filter has a similar effect to the "chalkpowder overlay" with two additional twist.
First, it displaces the contours of the filtered shape a slight bit. Then, it uses the luminance level of the filtered object to composite in with a white flood fill.
That means a black to white gradient with that filter is rendered with transparent to white -with the additional distortion and extra noisy transparency.

If you remove the filter from the group you can ungroup it. Now its a group of 6 objects, clipped.
Its structure is built up so that there are edge-to-edge gradients -gradiented objects having the "dither gradient" filter added which is basically the same as in the previous example svg; filter using the alpha channel of the object-.



What can go wrong when ungrouping a filtered object or adding it to custom objects? Filters inherit the transformations of the filtered objects.
Speaking of, it does seems fishy with that dithered gradient filtered orange to transparent gradient.
It has set the displacement filter's displacement slider to the max.
If you add it to any object and scale it up by the bounding box handles and scale all the nodes selected down right after with the node tool it will increase the "feather".

Lazur wrote:Speaking of, it does seems fishy with that dithered gradient filtered orange to transparent gradient.
It has set the displacement filter's displacement slider to the max.
If you add it to any object and scale it up by the bounding box handles and scale all the nodes selected down right after with the node tool it will increase the "feather".

Dear Lazur,

that doesnt seem to work

Found out I'm getting rusty... Will try rigging something more fitting. Got the idea it is possible to do so as that post suggests.

Lazur wrote:Found out I'm getting rusty... Will try rigging something more fitting. Got the idea it is possible to do so as that post suggests.

Dear Lazur,

can i ask you to make this as simple as possible.
All i need is an object with this grain filter applied.

I know, for you as an artist that might be boring, but i think this filter could be useful for a lot of people.

JuliaFlowers2 wrote:can i ask you to make this as simple as possible.
All i need is an object with this grain filter applied.

I know, for you as an artist that might be boring, but i think this filter could be useful for a lot of people.

The filter used for that grain/dither in the current gradient produces only a displaced edge which was somehow enlarged in the process.
Instead, what would do the job is taking each level of the input and representing it with a different intensity noise.

Which is how all those halftone filters were made in that other topic.
First, converting the luminance to alpha in the original image input and using component transfer to generate different intensity levels.
Then, doing the same with a "sample" image which represents each intensity with the same amount, and compositing the generated shades with eachother, stacking the results atop.

Suppose I could look up which of those halftone filters used the most levels in the process because such a filter is quite time consuming to rig.
Although I'm not sure if the luminance was transferred thr best way in the process ("mentioned the whites burning out").

Attaching 4 filters with 3-4-5-6 luminosity steps taken care of and using a simple noise for the sampling.
The rigging is the most efficient in that setup so you could see for yourself how it goes.
Takes 2 new component transfer filter primitives and a composite to add in to the right place, connecting them with the right filter primitives and editing each component transfer filter primitive's "discrete" values...

Will try to make it into a pack (sooner or later).

Ok, just checked and modified one of those templates. Using 36 levels of the intensity -the filter editor pans painfully slow so it's a showstopper for a proper 256 level representation.

Here is that 36 level grainy luminance gradient filter:



Also attaching a (hopefully) improved version of that chalkboard letter. Has a frame added in wich uses blurring so it's quite heavy for rendering though.

Regarding your example here: https://blog.spoongraphics.co.uk/wp-con ... d-type.jpg

There are a couple of extensions which will create these random noise type of effect. I haven't used them, so I don't know exactly how they work. https://inkscape.org/en/~kurn/%E2%98%85streaks and https://inkscape.org/en/~kurn/%E2%98%85blobs

Then there's always just the Noise Fill filter, which is highly configurable by itself. But you might be able to adjust further using Filters Editor. Filters menu > Overlays > Noise Fill. And there are many more filters which you can test. I often find filters which meet my needs, even though the effect I'm after is nothing like the name of the filter would imply. Like possibly something in the Bumps submenu could work for noise or graininess as well. Pixelize could possibly work as well???

Another update with these filters here.

Lazur wrote:Another update with these filters here.

Dear Lazur,

this version of the filter seems to do exactly what i asked for !!

However there is a slight problem: whenever i set a layermode, the filter disappears...
Is this normal behaviour ?

JuliaFlowers2 wrote:However there is a slight problem: whenever i set a layermode, the filter disappears...
Is this normal behaviour ?

My guess it is not normal yet totally intentional.
Would try to group the objects first you want to put on a layer with a custom blending mode.
Even if that means to have a group consisting of one objects within. It's just a container to separate the filters from eachother.
(Custom layermodes are filters too and layers are special groups.)