This twitter thread about Animal Crossing[1] inspired me to experiment with triangle tiles. The idea is that each triangle has 1, 2, or 3 vertices belonging to a particular pattern/biome, and we can draw the transitions in the center of the tiles. This is similar to Wang Tiles or Corner Tiles, but applied to triangles. The main advantage of this is that it’s cheap. You can get a variety of shapes without making a lot of tile art. For the demo, paint biomes on the map to see the generated tiles:
These are the biomes, each with three tiles (1, 2, 3 vertices):
The patterns on these tiles will match up with G₀ continuity but not G₁ continuity. I’ve tried to design the tile patterns so that it’s not too noticeable. The line widths are not uniform, but I think to fix that I would need to use distance fields. Animated tiles could be fun to play with, for the water waves.
I think this has potential, but I don’t have any immediate use for it so I am not going to try animation or distance fields until I have a real project where I can use this. I should have expected this, but the triangle tiles ended up forming hexagonal shapes a lot more than I expected them to. This might be because I used jittered grid points instead of blue noise points.
Source: triangle-tiles.js