Tile maps

These sketches are an exploration of how to create tile-based map generation systems.

512 Grid

512 Grid thumb

If the rules for placement of tiles only consider tiles that are one to the side or diagonally, then 9 positions need to be considered (including the center tile). If there are two options for each position (e.g land or water) then in total there are 512 (29) possible combinations. Not all of these are unique however, because many are rotations etc.

I started thinking through how to iterate through all the combinations by visually representing the grid of options. This produced some interesting visual results. 512 tiles are produced in total.

512 Grid gif

I tried turning these into a poster, but when they were ordered by the underlying binary representation there was not an even gradient from least to most pixels. You can think of 100000000 and 000000001 as both representing a single filled corner, but one is much larger than the other. To fix this, I used p5js to count the number of white pixels in each image and ordered them based on this. This let me create a poster with a more even gradient. I wrote a simple processing sketch do generate the pdf (sketch_512_grid.zip)

512 grid poster

I also used my ‘zine-layout’ processing sketch to turn the images into a 16 page code zine. I wrote another small processing script to do some pre-processing to collate the individual images into groups of 32 (sketch_512_zine_imgs.zip)

512 code zine

Generate tiles

Generate tiles thumb

This sketch loops through all the possible combinations of water/grass for the outer squares and saves all the unique tiles (accounting for rotations).

There are 30 unique tiles in total.

This poster displays them in a grid.

Generate tiles poster

Next steps

These videos on ‘wave function collapse’ were in the back of my mind while I was playing around with the tiles. That is a more general approach, but it reminded me of this in terms of the idea of constraints.

EPC2018 - Oskar Stalberg - Wave Function Collapse in Bad North

Why I’m Using Wave Function Collapse for Procedural Terrain | Unity Devlog

Superpositions, Sudoku, the Wave Function Collapse algorithm