Wave SVG flags

[GoogleCodeExporter]

Our PNG-based toolchain uses waveflag.c, which I wrote to use two channels of a 
mesh gradient to texture-map the flag on the wave mesh.  With SVG, we don't 
have that preprocessing luxury anymore.

Or so I thought.  I asked an SVG expert today and he pointed our the 
displacement filter:

  http://www.w3.org/TR/SVG/filters.html#feDisplacementMapElement

which, surprisingly, works *exactly* how my waveflag hack works!  So we should 
experient using that, essentially translating my waveflag code to SVG.  And 
then try that on Firefox and Chrome.  It might be the case that they don't 
support this.  Even if they do, librsvg probably doesn't...

At any rate, we should explore.

The alternative is to write a textual filter to map the bezier curves and hope 
for the best...

Original issue reported on code.google.com by behdad@google.com on 1 May 2015 at 9:38

[GoogleCodeExporter]

Actually, librsvg implements this:
https://git.gnome.org/browse/librsvg/tree/rsvg-filter.c#n3329

Doug, feel like giving this a try?

Thanks

Original comment by behdad@google.com on 1 May 2015 at 9:42

[GoogleCodeExporter]

So, if I understand correctly, the idea is to take each flag SVG image and 
apply a filter to it referencing another image that defines displacements.  My 
guess is this second image needs to be sized so as to match the original.  I'm 
not sure where the wave frequency comes from, it's probably independent of the 
image size?  I guess the displacement image can be compactly built using a 
repeating sinusoidal gradient fill (or I guess two, one for x and one for y 
displacements, I guess you use both).

Sure, this might be fun to play with.

Original comment by dougf...@google.com on 1 May 2015 at 9:58

[GoogleCodeExporter]

The logic will be exactly the same as the one in waveflag.c.  Check it out:

  https://code.google.com/p/noto/source/browse/color_emoji/waveflag.c

I have a separate repo for waveflag as well.  Run it with -debug and you get a 
better idea of what's going on:

  https://github.com/behdad/waveflag

It's basically a mesh gradient:

  http://www.w3.org/TR/SVG2/pservers.html#MeshGradients

actually we need to add support for mesh gradients to librsvg now that cairo 
supports them.

The mesh gradient becomes the "in2" input to the displacement filter.  The "in" 
is the original flag scaled to become a normalized square.

Finally, there's the outline which is used to clip the results and stroke using 
a HSL_LUMINOSITY operator.

There's some code in waveflag to detect luminosity of the border of the flag, 
to make a better contrast decision for the border.  We can't do that, so we 
need to come up with a simpler border. 

Original comment by behdad@google.com on 1 May 2015 at 10:17