Wang Tiles

 

edge and corner matched tilesets

menu

Introduction

Wang tiles were first proposed by mathematician, Hao Wang in 1961. A set of square tiles, with each tile edge of a fixed color, are arranged side by side in a rectangular grid. All four edges of each tile must 'match' (have the same color as) their adjoining neighbor.

The tiles never overlap and usually all spaces (cells) in the grid are filled. Tiles have a 'fixed orientation', they are never rotated or reflected (turned over).

With careful tile design, a complete array can produce a large image without visual 'breaks' between tiles. This helps computer game designers create a full screen display from a small set of tile images.

Edge matching Wang tiles tend to produce path or maze designs. A second type of tile set are corner tiles. These are matched by their corners and tend to produce patch or terrain designs.

Read more about Wang Tiles at Wikipedia.

Wang Tileset

Here is a set of Wang tiles. You can see that every tile has two different types of edge; blue or yellow. This gives 2x2x2x2 (written as 2^4), or 16 possible combinations. Hence the complete set contains 16 different tiles, with index numbers 0 to 15.

All 16 combinations of two edges
tile tile tile tile tile tile tile tile tile tile tile tile tile tile tile tile
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

The set is said to be 'complete' as it includes a tile for every possible combination of two edges. We can use these tiles to fill a grid where all tile edges match.

Bitwise Tile Index

With some bitwise maths, we can compute a unique 'index' number for each tile.
Ignore blue edges. Add up yellow edges using the following binary weightings:

Yellow North = 1
Yellow East = 2
Yellow South = 4
Yellow West = 8

Blue edges are ignored.


2-edge weightings
  North
= 1
 
West
= 8
tile East
= 2
  South
= 4
 

This tile has yellow edges North(1) and West(8). Adding up gives a tile index of '9'.

4x4 Layout

The tileset can be arranged as a 4x4 layout. A zero (0) depicts no path and a one (1) a path is present, crossing horizontally or vertically between the two adjacent tile edges.

So in the bottom row, there are no vertical paths between tiles, as both North and South are zero.

Path tileset
10 tile tile tile tile
11 tile tile tile tile
01 tile tile tile tile
00 tile tile tile tile
  00 01 11 10

Random Wang Tiles

We arrange Wang tiles in a grid array. For each position, a tile is selected at random from the tileset, always ensuring that all edges match adjacent tiles.

See Path Tiles for more info, images and interactive Stagecast sim.
See Stage for random tile arrays.

6x4 Wang tile array
tile tile tile tile tile tile
tile tile tile tile tile tile
tile tile tile tile tile tile
tile tile tile tile tile tile

Stage: Random 2-edge Wang Tiles

Maze Tiles

Wang Tiles | cr31.co.uk | 2017