Bringing 19th century ornamental tile illustrations into a 21st century web app
The Internet Archive also archives physical books. The archive’s 2010 scan of a late 19th century catalogue of colourful granite tiles came to my attention recently - thanks to this post on kottke.org.
Album of Ornamental Granite Tiles
I decided to build a little web app that’d allow me to play with the tiles in this catalogue.
The original catalogue only shows a little over 1/4th of the design but by digitising these tiles I could complete all 4 quadrants.
I could also choose how many tiles I wanted to use and even decide how big (up to a point) an individual tile should be. For now I’ve settled on 10 rows x 10 columns of 55px tiles including the border.
While some tiles in this catalogue are symmetrical, others are not. Which means combining them after rotating in multiples of 90º or mirroring them results in patterns that sometimes surprise you. Depending on the tile, mirroring and rotating are not equivalent and can give different results:
Using the original tile as is, or rotating/mirroring it while tiling, results in different patterns
When you select the rotate option, the app does this:
Rotation explained
Depending on the initial rotation of the first tile you can get very different patterns:
When using rotation, the rotation of the starting tile matters
The mirror option just constructs the first rows by flipping the alternate tiles horizontally and makes the second row by flipping the first row vertically. The first two rows are then repeated.
Mirroring explained
The borders were another fascinating detail that add an extra visual flair to the designs. While the catalogue illustrates a limited number of border + main tile combinations (19 in all), we of course can combine any border with any tile (a whopping 19x19 = 361 possibilities).
Another thing I realised when tinkering with the borders is that some of the corner tiles used in the borders also look good when used as a main tile, especially when you apply mirroring or rotation to them.
Some of the top left corner border tiles can double up as the main tile
Next steps
Some of the patterns in the original catalogue use two different tiles for the border, while others use two different tiles for the main tile (i.e. not just rotated variants of the original). My app doesn’t support this yet, but I’ll be adding them shortly.
The first goal would be to allow you to create all 19 patterns in the original catalog faithfully but I might eventually make it flexible so that you could pick any two tiles.
I will also make the no. of rows and columns user selectable. I might add control over the size of the tile (capped to the max size I could extract from the catalogue (around 110px for things to look good on Retina displays).
I also want to experiment with supporting khaki/custom tiles for the rest of the background. In the original catalogue, they do make the rest of the colourful pattern ‘pop’. I might even add support for spacing between the tiles and a custom background colour that shows in the space.
Other thoughts
A lot of these tiles were hand-drawn individually. You can see some of these imperfections when looking closely at titles that are not too geometric. To make this easy to spot, I overlaid two rows of one of the patterns on top of each other, changed the opacity of the topmost one and made a short video:
Each tile is somewhat unique!
While I am of course working with just one tile that’s repeated, so some of the charm of the hand-drawn tiles is lost1. And then there are imperfections from the pages ageing for over a hundred years. Plus scanning artefacts - even though I started with the highest resolution jp2 downloads that archive.org offer.
A part of me fancies going all in and creating their digitally perfect replicas by tracing them in a vector program. We’ll see.
This project also got me thinking about the realities of the physical world to which these tiles belong. While I can mirror them easily digitally, in the real world it would mean creating 4 versions of a tile. Whereas, rotation is something you can do easily to the same tile. So I think designs that only be replicated by mirroring alone must’ve been much rarer.
I’ve also been paying a lot more attention to tiling patterns in the real world2. While traveling through Newark airport recently, I came across tiles that somehow looked wrong. I took a picture and plugged them into this tool - lo and behold - if only they’d rotated these tiles while laying them, it would’ve looked like a much nicer pattern!
Tiles at Newark Airport - what a missed opportunity!
A note about AI
Many of the initial drafts of this tool were at least partially generated by ChatGPT 4. They never came close to anything you could simply use, but they were instrumental in showing me what’s possible. More importantly, they greatly lowered the inertia I would have had to overcome to start building something like this in the first place. We live in interesting times.
Update: 18 Jul 2023:
While I can mirror them easily digitally, in the real world it would mean creating 4 versions of a tile.
My wife pointed out that they’d only need to create 2 versions of the tile not 4. Her intuition is that when you mirror an already mirrored object again, you get the original back. My two mirroring operations cancel each other out.
I tried this in Photomator and she is right. Once I mirrored the first tile, I could generate the second row through translation or rotation.
In the image below the first column shows the starting tile, the last column shows the pattern created entirely through mirroring. The middle column shows how you could replicate the patterns of the last column by only mirroring the first tile.
Creating mirrored patterns by mirroring just one tile