Back In the Woods (Part 5): Texture

Most of the maps that use tree icons for forests make the trees looks somewhat three-dimensional by using shading and texture:

In this example, the sun is to the left, so the trees are shaded on the right, and the body of the tree also has a texture that suggests balls of leaves.

Even on maps that are basically flat, there's usually at least a suggestion of shading and texture:

Here the sun is to the right so the trees are shaded to the left.

So far I haven't done any explicit shading or texture in the trees, but when I draw trees as multiple overlapping clumps, I left in the clump outlines, and at map scale it provides some tree-like texture:

I can try to add onto this effect by adding a few single “leaf” bumps similar to the texture in the “Evergrowth” example above.

Of course, if I draw five bumps inside a tree shape I don't want them all clumped up in one corner.  But it turns out that evenly but randomly distributing shapes within a polygon is quite difficult, and computationally expensive.  Simulated annealing is a feasible approach, but I'm not going to implement simulated annealing just to draw tree bumps!  Instead, I'll try for a “good enough" approach.  I'll randomly select the start and end points for a bump within the tree polygon until I find points whose bounding box corners lie within the polygon.  Then I'll check to see if the corners of the bounding box are within some minimum distance of another bump.  If they are, I'll throw out the new bump and try again.

With all that in place and filling with 5-10 bumps inside a tree shape I have this:

It's obviously not perfect.  In the big tree shape, you can see that the algorithm only managed to place 4 bumps, two of them are close together, and one of them goes outside the boundaries of the tree.  On the other hand, the small trees look pretty good.  A few are a little odd but overall it's surprising effective at giving a “tree” texture.  Here's what it looks like on the map:

Which is not too bad.

Another possible method for creating texture is to use an SVG filter.  SVG filters are far too complex to explain here (and my own understanding of them is by no means complete!) but they include a Perlin noise generator, and that can be combined with other functions to create a variety of procedural textures.  In this case, I'm going to modify the “film grain" texture from Inkscape to create a texture that hopefully looks something like leaves:

SVG filters are size-invariant, so the texture doesn't look right on the big example.  But on the smaller icons you can see this is pretty convincing.  Because the texture is based on noise rather than random, the eye sees little clusters and texture in the trees.  Here's what it looks like on the map:

Pretty convincing to my eye, even at such a small scale.

I tried adding the same texture to forest masses:

That's not entirely terrible.  Worth keeping as an option, anyway.  This also looks pretty good when combined with “mottling" where the forest mass is given a patchwork of noise-based colors:

Next time I'll look at adding shading to trees.