Wang Tiles and other ways to tile a plane

Understand the concept of tiling a plane by arranging regular tiles in a systematic manner, creating visually pleasing patterns. Additionally, get introduced to Wang tiles, a fascinating method that employs specific rules for tile placement, resulting in captivating, non-repetitive designs.

So I’ve been doing a bit of creative coding, looking at ways to make pretty patterns. The idea was to use them as backgrounds in my videos to add a bit of interest behind static images and things that didn’t quite fill the screen.

I came across a thing called Wang Tiles which caught my eye due to their non-repeating nature and the way they looked fairly easy to create. I did try making sense of algorithms to create Penrose Tiles, but they were either too maths heavy or full of impenetrable code with no explanation.

I later found out Wang Tiles also let you create nice looking 2D paths and designs so it can also be used to draw parts of levels for 2D games.

While figuring this out I wrote a little p5.js program that implements four colour Wang tiling. You can play with the code

I mostly used information from the website cr31.co.uk which has just enough information to work out the logic for the code.