About Tiled.art

Story

Art

Thanks

Community, Support, and Contact

For Teachers

Videos

Source Code

Bloopers

Story

Site developer Rick Mohr says: "Like so many others I was captivated early on by the art of M.C. Escher. Decades later when investigating the world of tessellations to interest my son I was stunned by the capabilities of Kevin Lee's TesselManiac, and fascinated by the explanations and art of Alain Nicolas."

With further explorations the ideas for this site began to emerge:

  • Introduce visitors to the inspired work of tessellation artists from around the world.
  • Use the now-mature capabilities of web graphics to help people understand tessellation art through animations.
  • Give clear non-mathematical explanations of the symmetries and classification systems used in tessellation art.
  • Offer a full tessellation editor, with the option of adding detail using Inkscape.
  • Make everything work on a smartphone, to open the world of tessellation art to the millions of users without a desktop computer.

Fast-forward three years, hundreds of artworks, and tens of thousands of lines of code — welcome to Tiled.art!

Art

Tiled.art has links to 714 tessellation artworks, with 121 shown and animated. That’s a lot of great art! But many more artworks are out there — how were these chosen?

Linked artworks have these features:

  • true tessellation - no overlaps or gaps
  • single motif
  • whole figure - not just the head, for example
  • well-proportioned - figure has (mostly) well-formed parts and realistic angles
  • distinct - adjacent figures are clearly distinguished, so you can see the symmetry
  • isohedral - figure interlocking is consistent (a tile edge touches the same part of its neighboring tile everywhere you look)
  • novel - doesn’t duplicate an earlier design

Shown artworks have these additional features:

  • permission - the artist gave permission to show the artwork
  • animatable - compatible with an animation showing the underlying structure:
    • just figures - it’s cool to stage tessellated figures with other elements, but that doesn’t play well with structural animations
    • consistent tile outline - small variations in tile outline can make an animation look sloppy, sadly excluding some nice hand-drawn tessellations
  • one artwork per tessellation symmetry for each artist

(See also a few by site developer Rick Mohr here.)

Thanks

This site was inspired by the pioneering work of Kevin Lee, who had the vision that tessellations could be dynamic and the skill and sweat to prove it with TesselManiac.

And by Alain Nicolas, who explained the world of artistic tessellations beautifully on his website along with hundreds of superb artworks. Big thanks to them both.

And many thanks to the artists worldwide who gave permission to show and animate their artworks here. Especially to Alain Nicolas and Makoto Nakamura, who agreed early on when there wasn’t much to see, and Yoshiaki Araki for helpful suggestions along the way. And not least to M.C. Escher, for inspiring all of us with his mind-expanding art!

Thanks to countless people for the world of JavaScript, where sophisticated software can run on every device in the world without installation. And to the creators of its many libraries: in particular to Jürg Lehni for the fantastic vector graphics library paper.js, supporting the essentials of manipulating tile outlines (creating, displaying, editing, intersecting, exporting, …) and to the creators of GSAP, which makes animation a pleasure. Also Bootstrap for modals and popovers (via Popper), lodash for utilities, noUiSlider for the animation slider, iro.js for choosing colors, hammer.js for pinch zoom on touch devices, and toastify.js for notification messages. When developers donate their time and expertise to create something useful and make it freely available, it inspires the rest of us to do the same.

And big thanks to my wife Chloe and son Evan who supported my single-minded “tessellating” for three years, offering many helpful insights and ideas along the way.

Tiled.art is a static website built using 11ty with handlebars, bundled with webpack, and hosted by Cloudflare Pages. It uses the fonts Nunito and Cabin Condensed, and icons from Icons8. Many thanks to the creators of these resources. Also to the creators of two nice content utilities — ExportSheetData for exporting Google Sheet data as JSON, and the Google Docs to Clean HTML Converter. Finally, this site would not be possible without Dragon and Vocola, for coding by voice with a typing disability.

Community, Support, and Contact

For discussion and support please use the Tiled.art Google group.

If you Create a tessellation and want to share it, the best way is to export an image and post it on social media with the tag #TiledDotArt. You can search that tag to see art created by others, and some artworks so tagged will be posted to the Instagram account tiled_dot_art.

And for private matters you're welcome to send an email to [email protected].

For Teachers

Teachers, if you're using this site with students we'd love to hear from you. How do you structure your tessellation classes? What parts of the site are useful or need improvement? When you have a minute please send an email to [email protected]. Maybe we can connect people around the world and share ideas. Thank you!

Videos

These videos may be helpful:

Source Code

Sharing source code is under consideration for this site's core capabilities, including the full Create page (tessellation editor, animation, export, etc.). If you are interested please send an email to [email protected].

Bloopers

When software works it's a beautiful thing. But the road to get there is paved with countless bugs, and the graphical ones can be fun — tessellations have no overlaps or gaps, right?

Here's a gallery of bloopers captured along the way.