Randomized symbology for forests work

[pnorman]

upstream gravitystorm#938

• Generate SVG with @imagico tool
• Add forests to landcover overlay
• Identify cause of blurry pixel alignment
• Recolor overlay
• Recolor fill pass 2

[pnorman]

Possible cause - maybe clip off the end, or adjust tool settings?

[imagico]

I am not exactly sure what you mean by blurry pixel alignment.

In any case when redesigning the forest pattern i think moving to a different symbology would be a good idea. Taking leaf_type into account is not possible in the short term but the current symbol implying coniferous trees does not seem optimal.

[pnorman]

I am not exactly sure what you mean by blurry pixel alignment.

White background added for clarity.

The SVG for each symbol is

<g><path d="m 4,0 -3.25,3.25 0.75,0.75 2.5,-2.5 0,2.5 
-3.25,3.25 0.75,0.75 2.5,-2.5 0,5.5 
1,0 0,-5.5 2.5,2.5 0.75,-0.75 -3.25,-3.25 0,-2.5 
2.5,2.5 0.75,-0.75 -3.25,-3.25 z" />

<path d="m 12.5,0 a 3,3 0 0,1 0,6 l 0,-1 
a 2,2 0 0,0 0,-4 
a 2,2 0 0,0 0,4 l 0,1
a 3,3 0 0,1 0,-6
z" />
<path d="m 12,5 l 1,0 0,6 -1,0 z"/>
</g>

A SVG was created with your tool, pixel aligned.

The SVG from your tool was converted to PNG with inkscape -e forest.png -y 0 forest.svg

All symbols are misaligned by the same approximately quarter-pixel. As the left edge extends a quarter-pixel, I was thinking it could be a cause.

[pnorman]

To compare, @gravitystorm's outdoors symbology.

One cool approach would be to have relaxed randomly displaced patterns with randomly selected sizes, but that's beyond what I'm going to attempt for now.

[pnorman]

Adding an offset with the tool fixed the pixel alignment - but I still prefer the corners chopped.

I also got better results with the conversion by converting in gimp to 8192x8192 and then down-scaling with Lanczos to 512x512

[pnorman]

Some more adjustments gets it sharper with

from

<g>
<path d="m 3.5,0 -3.5,3.5 0,0.5 0.5,0 2.5,-2.5 0,2
-3,3 0,0.5 0.5,0 2.5,-2.5 0,5.5 
1,0 0,-5.5 2.5,2.5 0.5,0 0,-0.5 -3,-3 0,-2
2.5,2.5 0.5,0 0,-0.5 z" fill="rgb(108,158,74)"/>

<path d="m 10.5,0 a 2.5,3 0 0,1 0,6 l 0,-1 
a 1.5,2 0 0,0 0,-4 
a 1.5,2 0 0,0 0,4 l 0,1
a 2.5,3 0 0,1 0,-6
z" fill="rgb(108,158,74)"/>
<path d="m 10,5 l 1,0 0,5 -1,0 z" fill="rgb(108,158,74)"/>
</g>

[imagico]

Yes, offset calculation is not working properly for pixel aligned rendering - see imagico/jsdotpattern#1

As far as rendering the SVG is concerned - you should try the options offered by ImageMagick:

convert -density 720 trees1.svg -scale 12.5% -depth 8 trees1a.png
convert -density 720 trees1.svg -filter Sinc -resize 12.5% -depth 8 trees1b.png
convert -density 720 trees1.svg -adaptive-resize 12.5% -depth 8 trees1c.png
convert -density 720 trees1.svg -filter box -resize 12.5% -depth 8 trees1d.png

For more options see:

http://www.imagemagick.org/Usage/resize/
http://www.imagemagick.org/Usage/filter/

[pnorman]

As far as rendering the SVG is concerned - you should try the options offered by ImageMagick:

convert -density 720 trees1.svg -scale 12.5% -depth 8 trees1a.png
convert -density 720 trees1.svg -filter Sinc -resize 12.5% -depth 8 trees1b.png
convert -density 720 trees1.svg -adaptive-resize 12.5% -depth 8 trees1c.png
convert -density 720 trees1.svg -filter box -resize 12.5% -depth 8 trees1d.png

These look to be effectively the same as gimp - just different ways of handling the resize/filter. Lanczos and cubic in gimp are both good options, and I think at this point to get improved sharpness I'd get more out of doing the SVG -> bitmap conversion by hand for one symbol