escher
sketch
Quick Demo
What is this?
An imperfect tool for drawing and exploring symmetrical patterns and designs. It can export pictures, pattern tiles for fabric and wallpaper design, and SVG for further editing. You can also publish your drawings and share them on Facebook and Twitter, or even have them printed onto custom wrapping paper or fabrics via Zazzle.
Commands
| Icon | Tool | Description |
|---|---|---|
| minimize | puts the UI into a minimal mode | |
| maximize | restores UI to full mode | |
| undo | steps back a drawing step to edit previous graphical element | |
| redo | reapplies a previously undone tool | |
| reset | erases everything requires a double-click to activate | |
| settings | expert options and configuration | |
| help | is trying it's best to be of use |
Drawing Tools
| Icon | Tool | Description |
|---|---|---|
| pencil | freehand drawing tool, stroke-only, variable smoothing factor | |
| line | draws single line segments between two points | |
| polygon | draws a straight-sided regular polygon or star | |
| circle | draws circles, ellipses, and arcs from three points | |
| polyline | draws a straight-sided freehand polygon | |
| path | draws bezier curves and straight lines |
Commands for saving, cancelling, and undoing points:
| Icon | Tool | Description |
|---|---|---|
| cancel | undoes the current drawn object and resets | |
| save | saves what's drawn with the current tool | |
| undo point | removes the last point when using the path or polyline tool | |
| close path | for polyline and path tool, closes path | |
| smooth close | for path tool, closes path smoothly at beginning/end |
Color and Styling
| Icon | Tool | Description |
|---|---|---|
| set fill color | color palette chooses fill color | |
| set stroke color | color palette chooses stroke color | |
| no stroke | sets stroke color to fully transparent | |
| no fill | sets fill color to fully transparent |
Color can be set by clicking within the saturation panel, the hue slider, and the transparency slider.
| Icon | Description |
|---|---|
| set line cap to butt, round, or square style | |
| set line joins to round, beveled, or mitered | |
| draw stroke and fill simultaneously, or draw fills then strokes, or vice versa |
Symmetries
The heart of this program. You can choose to draw with no symmetry. You can draw with a "rosette" or Point Group that makes little flower- or mandala- like patterns about a single point. The parameters Nrot and Nref control the number of rotations and reflections.
You can draw with one of the 17 classic Wallpaper Groups that are the only perfectly regular way to build a repeating pattern in 2 dimensions.
Follow that Wikipedia link to see examples and explanations of these 17 basic patterns, or just play around with them here. These patterns are traditionally grouped according to the amount of rotational symmetry they have:
Rotation Free Patterns : p1, pm, cm, pg
180° Containing Patterns : pmg, pgg, pmm, p2, cmm
Square Symmetric Patterns : p4, p4g, p4m
Hexagonally Symmetric Patterns : p3, p6, p31m, p3m1, p6m
Grid Adjustment
The grid adjustment tool allows to you move the "center" of the point-symmetry or wallpaper symmetry as well as scale the grid-spacing used in wallpaper symmetries. Most commonly, one wants a grid-spacing exactly ½ or 2x the current one - buttons are provided to do just that.
Sharing Links to your Drawing
| Icon | Description |
|---|---|
| will save a copy of your drawing online that you can link to in one of four ways: | |
| copy a direct link to clipboard | |
| post to facebook, twitter, or pinterest |
Ordering Printed Materials with Your Pattern
Clicking Order Prints! will upload the current tile of a wallpaper pattern, you can then click on Go To Zazzle to open a new tab to order wrapping paper, fabrics, and other textiles from Zazzle with your pattern. Currently this only works for walllpaper (i.e. tiled) patterns. For more custom printing jobs, you can always download an SVG or PNG for use with your printing service of choice!
Exporting and Saving Files
Picture Save the visible frame as a PNG image file.
Tile This is very useful: a symmetric wallpaper pattern can be described by a small tile, and used in tools such as Photoshop's "pattern fill", used to generate textures for 3d-graphics, or uploaded to sites such as Spoonflower or Contrado to be turned into custom wrapping-paper, fabric textiles, or wallpaper! When exported as a tile, Eschersketch upsamples the pixel density by a factor of 4x, so as to provide enough DPI for decent prints.
SVG Saves all drawn objects into an SVG file for use in a proper vector graphics tool. Warning: given the huge numbers of replicates in a complicated scene with a fine grid, this could grind to a halt if there's too much being exported on too fine a grid size. Each drawing operation's replicated graphical elements are exported in their own group.
Et Cetera
For further reading I highly recommend:
- Check out Mahdi Bahrami's game Engare based on motion and geometry, inspired by the Persian design tradition.
- The compilation Designa from Wooden Books, especially it's book by Daud Sutton on Islamic Design.
- David Wade's Pattern in Islamic Art
- Craig Kaplan's thesis and lecture on the math behind some Islamic geometric patterns.
- A video of the Moroccan Zillij tilework and other symmetric craftwork done for the Met by traditional artisans.
- A video showing the Japanese tradition of Kumiko Zaiku - intricate symmetric latticework.
The source code for Eschersketch is available on github.
Questions and comments can be directed to info@eschersket.ch or twitter @eschersketch.