TILES
For my custom style set, I chose to include 16 total tiles: 1 unconnected shape, 4 connecting to 1 side, 4 connecting to 2 adjacent sides, 2 connecting to 2 opposite sides, 4 connecting to 3 sides, and 1 connecting to all 4 sides.
I sketched the initial shapes of the tiles in a drawing application on my tablet and then began to render the forms using a set of equations and shapes in p5.js. I made sure to start the edges of the matching tiles at the same coordinates to ensure that the darker part of the shape could continue into the next seamlessly. Because my set allowed for rotations, I only created 5 original tiles and then used rotations on the following.
From there, I wrote the tile placement algorithm to have the following logic:
- Start by placing a random tile in the top-left corner of the grid.
- Proceed left to right, top to bottom through the grid.
- At each position, check the surrounding tiles to determine which of the 16 tile options are compatible based on edge matching.
- From the valid candidates, randomly select a tile and place it.
The final renderings resulted in a floral, maze-like motif. I really enjoy how the negative space mimics the floral forms of the unconnected tile simply by using the round curves from the connecting tiles. In future iterations, I would like to experiment more deliberately with the contours of the filled areas to sculpt the negative space or even create a less predictable rendering that strays from the look of a maze altogether.
Using: p5.js, HTML, CSS