https://www.deepakg.com/bringing-19th-century-ornamental-tile-illustrations-into-a-21st-century-web-app Deepak Gulati's blog Home Archives Search Contact Mastodon 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 TilesAlbum 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. [ff0d0a42-a3fb-4907-9861-c0043c4754e0] 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 90o 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 patternsUsing 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 explainedRotation 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 mattersWhen 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 explainedMirroring 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 tileSome 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 lost^1. 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 world^2. 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!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. --------------------------------------------------------------------- 1. It feels akin to listening to a MIDI file of a classical piece.-[?] 2. This won't be the first time I've been slightly obsessed with tiling patterns (although this time it has lasted very long indeed). See these posts about Porto and Amsterdam.-[?] --------------------------------------------------------------------- Date July 16, 2023 --------------------------------------------------------------------- Previously A trip down the memory lane aided by Polaroid's latest marketing campaign Mansi recently drew my attention to this outdoor marketing campaign by Polaroid. We both found it funny that what was once considered "instant" is