This is a simple demonstration of a variation on a technique proposed by Robert Bosch for creating map-colored mosaics using two-color Truchet tiles. (Like most mosaics, it's best viewed from a distance – in this case, at least a few feet.)
Bosch suggests constructing mosaic images by starting with the tile layout given in Truchet's pattern D of plate 1, and modifying the shape of the pairs of black and white triangular tiles, making one of each pair kite-shaped and one dart-shaped, with the relative sizes determined by the desired brightness for that portion of the mosaic.
Here, rather than using kites and darts, the dividing line between the black and white tiles in each pair is replaced by a quadratic Bézier curve, where the control point is positioned on the opposite diagonal of the enclosing square, according to the desired brightness. In both methods, there's a limit on the maximum and minimum brightness for each pair of black and white tiles. In our opinion, having such a limit makes for a more interesting challenge, and a more æsthetically pleasing result. In addition, the limited detail of low-resolution devices (e.g. most computer displays) obscures the map coloring constraint of the problem when one of the pieces is much larger than the other in the pair – particularly in sections made up of several similarly (dis)proportioned pairs.
The demonstration cycles through several mosaic images, transitioning from each one to the next. At first glance, it might appear that these transitions are done by overlaying the images and changing the opacity over time. However, they're actually performed by slowly sliding the control point of each Bézier curve from the position needed for one image to the position used in the next.
This demonstration was programmed using Processing.js v1.3.6; JavaScript must be enabled in the browser in order to see the rendered images and transitions. This page has been tested successfully with Firefox v13.0 and Chrome v20.0; other reasonably current Mozilla-, WebKit-, or Chromium-based browsers should work as well. IE is not supported by the version of Processing.js used in this page.
This demonstration was developed by Nick Bennett (inspired by – and with critical input from – Robert Bosch) as an instructor project for the 2012 GUTS y Girls / Young Women in Computing summer camp.