I just came back from Lisbon, each and every friend of mine told me\u00a0about a\u00a0very enjoyable\u00a0place with lovely people, none of them – fools ! – told me about\u00a0Azulejos<\/a>.<\/p>\n

when I unknowingly found the first wall covered\u00a0with them, I thought it was some fancy pants landlord\u00a0trying to show off, but after\u00a0passing in front of dozens of them, covering houses that didn’t seem especially wealthy, I started realizing that it was a widespread and much alive form of art.\u00a0Azulejos admittedly\u00a0reached their\u00a0finest expression in Portugal,\u00a0Lisbon therefore became a\u00a0playground\u00a0and I started hunting them in the city.<\/p>\n

I\u00a0am\u00a0fascinated by islamic patterns, a couple of years ago I tried to understand the regular patterns<\/a>, which\u00a0describe the\u00a0sets of operations\u00a0used to cover planar\u00a0surfaces\u00a0with repetitive sets of items.<\/p>\n

there are 3 groups of regular patterns. they are called after the number and the type of operations that are performed on the fundamental region<\/strong>:
\nthe 1,2,3,4,6<\/strong> is the number of operations and very often, the number of rotations, t<\/strong> stands for Translation, m<\/strong> for Mirror or Reflection, g<\/strong> for Glide, p<\/strong> would be the prefix for the Plane group, and sometimes you get a c ;\u00a0<\/strong>it\u2019s a staggered version of m<\/strong>, used only in the plane group.<\/p><\/blockquote>\n

so we can use this set of operations to\u00a0create patterns and friezes:\u00a01, m, 2, 2mm, 3, 3m, 4, 4mm, 6, 6mm<\/strong>\u00a0t, tg, tm, mt, t2, t2mg,\u00a0t2mm <\/strong>and this set to tile the\u00a0plane: p1, p2, pm, pg, cm, p2mm, p2mg, p2gg, c2mm, p3, p3m1, p31m, p4, p4mm, p4gm, p6, p6mm<\/strong><\/p>\n

azulejos use very simple transformations, mostly rotations around a lattice and translations along with friezes (the lines group).\u00a0that’s the first picture I\u00a0took<\/p>\n

<\/p>\n

you can clearly see that the central tile is\u00a0the only thing we need to create the whole pattern.<\/a><\/p>\n

with a fundamental region (A) the first operation is a 4 point rotation around one of the lattices (B), this builds\u00a0a unit cell that is then used with a P1\u00a0transform (C) to cover a\u00a0plane. note that if the feature region is the unit cell, this is the\u00a0P4 plane tiling.<\/p>\n

the reason why transformations are rather\u00a0simple\u00a0is probably that\u00a0producing actual tiles is more costly\u00a0than drawing patterns on paper or with a computer. a reflection <\/em>for instance means that you’ll end up with 2 sets of different <\/em>tiles, some of which may\u00a0not be used as much as the other, or the workers would mistake the patterns as it’s really hard to tell some patterns apart when they’re just reflected.<\/p>\n

if we\u00a0don’t use reflection, all the tiles will work interchangeably as only one type of tile<\/em> is required. with a single tileset, the designs can’t use\u00a0the following transformations:\u00a0m, 2mm, 3m, 4mm, 6mm,\u00a0<\/strong>tg, tm, mt, t2mg,\u00a0t2mm,\u00a0<\/strong>pm, pg, cm, p2mm, p2mg, p2gg, c2mm, p3m1, p31m, p4mm, p4gm, p6mm\u00a0<\/strong>which – theoretically – leaves us\u00a0with:\u00a01, 2, 3, 4, 6,\u00a0<\/strong>t, t2, <\/strong>p1, p2,\u00a0p3, p4, p6\u00a0<\/strong>but as the tiles are square (or rectangles for the friezes), we can only use rotations of 90\u00b0 or\u00a0180\u00b0 for the friezes. the same goes for planar tilings ; P2<\/strong> for instance uses a triangular unit cell\u00a0which is\u00a0not compatible with square tiles.\u00a0removing the impossible settings boils the list down to these 7\u00a0settings: 1,<\/strong>\u00a02, 4, <\/strong>t, t2, p1,\u00a0<\/strong>p4<\/strong>.<\/p>\n

it might seem few but while\u00a0the tiles’ distribution\u00a0must obey some strict and limited rules, the tiles themselves can\u00a0exhibit the most intricate patterns\u00a0and\u00a0complex symmetries.<\/p>\n

and of course there are exceptions!\u00a0this one for instance<\/p>\n

<\/p>\n

it belongs to the CM\u00a0<\/strong>plane group, there is no way to obtain this pattern if you don’t produce\u00a0a mirrored<\/em> set of the original tile.<\/p>\n

<\/p>\n

on a side note: this specific tileset\u00a0–\u00a0like many others in the Alfama\u00a0–\u00a0was hand-painted, you can see the brush stroke, the variation in the pigment distribution,\u00a0the\u00a0little mistakes done when copying the original pattern\u00a0like\u00a0stroke-width variation, clumsy, unfinished strokes, etc.\u00a0my love I love is an illustrator, and\u00a0I think we –\u00a0she drew a whole set of those\u00a0–\u00a0spent a good 30 minutes staring at this wall\u00a0and\u00a0locals must have (rightfully) thought we were crazy.<\/p>\n

this specimen is mind boggling and it’s (by far) the more complex I found, this is the lower right part of it.<\/p>\n

\u00a0it’s made of 43\u00a0unique tiles:<\/p>\n

\n
• the center tile (top left) is horizontally and vertically symmetric<\/li>\n
• 2*3 tiles\u00a0are axially symmetric (top row, horizontally & left column, vertically) so they can be reused twice<\/li>\n
• 4*9\u00a0tiles\u00a0(the 9 of\u00a0the bottom right corner)\u00a0have to be mirrored 4 times, once for each\u00a0quadrant<\/li>\n<\/ul>\n

  each tile is\u00a0hand-painted, this is almost a mural (there are many sophisticated murals made of tiles\u00a0in Lisbon).\u00a0more recent azulejos\u00a0seem to be silk-screen printed,they are more complex, more regular but also less moving in a way.<\/p>\n

  just before I left, I received a new mobile phone, a samsung S6, and it felt like entering the future ; not only could I take pictures and videos with decent resolutions but I could finally use GPS tags. I thought it would be interesting to map the various areas where I\u00a0took pictures, just to see if a pattern or some kind of spatial relation would emerge.<\/p>\n

  So I extracted the GPS coordinates of my pictures using this handy JS lib Exif.js<\/a>\u00a0which provides the data as Degrees Minutes Seconds like so<\/p>\n

  var img = new Image();\r\nimg.onload = function(e){\r\n\r\n    EXIF.getData( img, function() {\r\n\r\n        var tags = EXIF.getAllTags( img );\r\n        if( tags.GPSLatitude != null && tags.GPSLongitude != null ){\r\n\r\n            var latsign = 1;\r\n            if( tags.GPSLatitudeRef.charCodeAt(0) == \"S\".charCodeAt(0) ) latsign = -1;\r\n\r\n            var lngsign = 1;\r\n            if( tags.GPSLongitudeRef.charCodeAt(0) == \"W\".charCodeAt(0) ) lngsign = -1;\r\n\r\n            var dtd = degreesToDecimal(     parseFloat( tags.GPSLatitude[0] ) * latsign,\r\n                                            parseFloat( tags.GPSLatitude[1] ),\r\n                                            parseFloat( tags.GPSLatitude[2] ),\r\n                        \r\n                                            parseFloat( tags.GPSLongitude[0] ) * lngsign,\r\n                                            parseFloat( tags.GPSLongitude[1] ),\r\n                                            parseFloat( tags.GPSLongitude[2] ) );\r\n            lat = dtd[0];\r\n            lng = dtd[1];\r\n            coords.push( [img.src, lat, lng] );\r\n        }\r\n    });\r\n};\r\nimg.src = \"yourpic.jpg\";<\/pre>\n
  the DMS\u00a0to decimal values is done\u00a0using this handy script<\/a>. from which I got\u00a0this method<\/p>\n
  function degreesToDecimal( dlat, mlat, slat, dlon, mlon, slon ){\r\n\r\n    var latsign = dlat < 0 ? - 1 : 1;\r\n    var lonsign = dlon < 0 ? - 1 : 1;\r\n    \r\n    absdlat = Math.abs( Math.round(dlat * 1000000.));\r\n    mlat = Math.abs(Math.round(mlat * 1000000.)\/1000000);\r\n    absmlat = Math.abs(Math.round(mlat * 1000000.)); \r\n\r\n    slat = Math.abs(Math.round(slat * 1000000.)\/1000000);\r\n    absslat = Math.abs(Math.round(slat * 1000000.)); \r\n\r\n    absdlon = Math.abs( Math.round(dlon * 1000000.));\r\n    mlon = Math.abs(Math.round(mlon * 1000000.)\/1000000);\r\n    absmlon = Math.abs(Math.round(mlon * 1000000));\r\n\r\n    slon = Math.abs(Math.round( slon * 1000000.)\/1000000);\r\n    absslon = Math.abs(Math.round( slon * 1000000.));\r\n    \r\n    alat = Math.round(absdlat + (absmlat\/60.) + (absslat\/3600.) ) * latsign\/1000000;\r\n    alon = Math.round(absdlon + (absmlon\/60) + (absslon\/3600) ) * lonsign\/1000000;\r\n    return [ alat,alon ];\r\n}<\/pre>\n
  I fed this to\u00a0my map API<\/a> using\u00a0the Stamen Toner<\/a> tileset which\u00a0gave me a first idea<\/a>if you’ve ever been to Lisbon, the distribution won’t be much of a surprise ; that’s the tourist area :)<\/p>\n
  then I wondered what\u00a0the “influence zone” of each azulejo would look like. I first computed the\u00a0Voronoi diagram of the point set using this lib<\/a> which gave this map\u00a0(interactive)<\/p>\n