Tessellation Maker

Free, and downloadable from GeometryGames.org

Hinged Tessellations. Sorry for the bugs, but this was from a few years back and one of my first forays into programming for the web! Why it's jumping at 0, 90 and 180 degrees sometimes is beyond me right now - but one day maybe I'll get the chance to re-write this with my current skills. If you're curious, read this blog article about hinged. Tessellation Artist. Mathematics and Art come together! First - just play with it! Try the different tools and see what happens. Tiling Directions. You can control the spacing: Blue dot controls x-y spacing of grid; Red dot controls rotation of the grid; Best to just try dragging the dots to see what happens! Oct 19, 2020 Tessellation, or tiling, has one important rule: wherever lines meet, the angles have to add up to 360 degrees and there should be no gaps or spaces between designs. Observe: Try a new design. Rotation tessellations are accomplished by rotating the tessellated shape. Reflection tessellations are mirrored. It's intuitive & easy to start creating immediately, but lacks almost every basic drawing tool, editing and file-saving feature, & advanced tessellation feature. Like the Chinese food served in American restaurants, it's entertaining but half an hour afterward you'll be wanting something more substantial.

In this tutorial we show you how you make a Tessellation using an easy technique. Follow along the steps and make your own creation. Here is a list of items.

Kali can refer to any one of four (free, downloadable) versions, written by three authors for four different operating systems:

  • Web browser (Java applet)version by Mark Phillips,
  • Windows* version by Jeff Weeks (regularly updated and available in a large number of languages), and
  • Macintosh version, also by Jeff Weeks (not updated as often as the Windows version, and currently available only in English), and
  • Unix version (the original version) written in the mid-'90s by Nina Amenta. This version is also downloadable here.

* Please note that the 'Windows' version also seems to operate quite well on our Linux PC (running Xandros 3.0 Debian Linux with WINE).

If any of these hyperlinks stop working, or you have more recent download pages or updated contact information for the authors, please contact us.

In this review, we'll concentrate on the (free, downloadable) Windows version by Jeff Weeks. At the time of this writing, the most recent version is 5.2, available online since December 26th, 2006.

INSTALL
The program comes in a large ZIP file. After you download and unZIP the ZIP file, you'll see a couple of files marked 'Kali Win95' and 'Kali XP', and a folder called 'languages'. There is no 'install' program, and these files will not automatically be copied to a c:/my program files/kali folder. Neither will they be automatically added to your Start Menu nor will shortcut icons automatically be added to your desktop. You can do all those things yourself, of course. For example, to make the desktop shortcut, just right-click on one of the files called 'Kali Win95' or 'Kali WinXP' (XP if that's your windows version-- otherwise, choose 'Win95'). A little menu will pop up; from that menu, choose 'send ... to desktop as a shortcut'. To do the other things, ask your favorite computer expert nicely-- those Windows operations are a little beyond the scope of this review.

To start the program, click on the 'Kali Win95' or 'Kali WinXP' files (XP if that's your windows version-- otherwise, choose 'Win95') ...or click on the desktop shortcut, if you made one. Kali will then show up on the screen, with a large blank white background. You can resize Kali's drawing-area by dragging its corners or sides.

DRAWING TOOLS
Its drawing toolkit is very limited. One can draw straight or curved lines in 4 widths and 6 'foreground' colors:

  • Red
  • Yellow
  • Green
  • Cyan (Sky Blue)
  • Dark Blue
  • Violet.

Yes, only six colors, period. That's all, the end, finito, ain't no mo'. Just 6. That's six colors, with a side order of nothin'. There are exactly six point zero zero zero zero zorro zebra zero xerox et cetera ad infinitum colors.

In an age when PCs typically display 16 million colors, '6' is a surprisingly small number. Presumably, there're only 6 in order to retain backward compatibility with some very old versions of Kali and Windows, but still...this reviewer hopes for more colors in the next version.

VERY FEW TOOLS Notice that I haven't mentioned an erase-tool, nor black foreground color, nor white foreground color, nor flood-fill (a.k.a. 'paintbucket' tool, nor pattern-fills. That's... an extraordinarily limited set of features. A user accustomed to more powerful paint programs will be a little exasperated with the small toolkit. On the other hand, there's very little for a new user to learn, so one quickly masters the program.

ERASING To 'erase' a line, you must use a thick drawn line much like you'd use 'white out' (liquid paper) on a typewritten page: change the background color to one of the six drawing colors (I recommend yellow), change the line width to a nice, thick line. Then change the current drawing (foreground) color to match that background color, and then draw (paint over) a thick background-colored line over the portions of your drawing that you want to 'erase'. or use the 'undo' feature to scroll your drawing all the way back to the point where you drew that particular line. This 'paint-over' erase technique is a bit messy, and less than perfect. Thus, editing a drawing can be particularly frustrating.

STRAIGHT LINES, CURVED LINES: Making a drawing

Screenshot 1
To start drawing, first choose the basic type of tessellation pattern from the bottom of the screen. Choose carefully, because the next time you click on one of those buttons, you will immediately lose the image you had been drawings.

Screenshot 1
The tessellation patterns come in all 17 'wallpaper' patterns, 7 'frieze' patterns, and 12 rosetta (flower-petal-like) patterns. You can see all these choices at the bottom of Screenshot 1. There is no tool for adjusting height/width proportions nor the degree of 'slide'. These two tools are key features we'd love to see in future Kali versions, in addition to more foreground colors and the ability to load an image file as a background.


Screenshot 2:
Choosing a background color

Screenshot 2
Next, choose a 'background color'. I strongly recommend choosing a color that matches one of the foreground colors (Red, Yellow, Green, Cyan, Dark Blue, Violet). Why? Because there's no 'eraser' tool, so if you want to 'erase' a line or part of a line, you can simply draw over that portion of the drawing with a thick line in the same color as the background, so that whatever's under that new line looks erased. To choose a background color, click on 'view' and then 'background color'. Next, a colorful menu will pop up. Choosing from the 'basic colors' is simple--click on the color you like, then click on 'OK'. (Don't worry, you can experiment and easily change this color without penalties.)

Screenshot 3
You can choose a customized background color. To choose a more customized background color, click on 'view','background color', 'Define Custom Colors'. You then see a rainbow of colors, shaded monochromatically, and the typical R-G-B, hex-mark, and hue/saturation/luminosity menus from which to choose a very specific color. Choose a color using one of those menus; to then make that color your current background color, simply click on 'Ad to custom colors', then click on that color again in the left-bottom corner of the menu, and click on 'OK' in the left-bottom corner of the menu.


Triangle Tessellation Maker


Screenshot 3: Kali-for-Windows 5.2's 'Custom Background Color' menu
(Yes, there are thousands of shades of color in that menu.)

Screenshot 4
Next, select a color for your lines. There are only 6 colors to choose from; choose one by clicking on a colored circle in the upper-left corner of the screen. Inexplicably, there's no way to choose custom foreground (line) colors, nor can users put different background colors in-between the lines like a coloring book.


Screenshot 4: Click on one of the 6 circles to choose a line color.
(Yes, there are ONLY SIX foreground colors to choose from.

Screenshot 5
Choose a line width. I strongly recommend starting with thin lines, because they're easier to 'erase' than thick lines. (Again, there's no real 'erase' tool; instead, simply choose a line-color that matches the background color, and then draw background-colored thick lines over the lines that you wish to make invisible.


Screenshot 5
This is a completed tessellation, drawn within Kali for Windows v5.2
Using another program after Kali,
I've painted dark yellow-gray stripes over parts of the original light-yellow background
so that you can see what I *wish* Kali could do:
I wish Kali had tools to resize the tiles,
so that gaps like these dark yellow areas could be easily eliminated.
I wanted tall, thin shapes adjacent to one another,
but Kali only offers un-resizable shapes; in this case, squares.
Notice that I chose yellow as a background color
so that I could draw in thick yellow lines over earlier work to 'erase' earlier lines.
The yellow foreground lines look like part of the background,
thus hiding my repairwork.

Choose the 'wavy line' button, rather than the 'sawtooth line' button, at the top-middle of the screen. Now you're ready to start drawing. Move your mouse cursor to the center of the screen and left-click with your mouse. This starts a line. To make a smooth, rounded corner, click again with your left mouse button. To make a sharp corner, double-left-click your mouse. To finish the line, right-click your mouse. A line can have any number of turning points. To undo the most recent changes, just hold down the CTRL (control) key on your keyboard while tapping the 'Z' key.

It's extremely easy to start using Kali and, without using the help menu or getting headaches, to start producing simple new tessellationsn and abstract bathroom-tile-type decorations like screenshot 1. Kids will be off and 'running' in seconds; experienced Windows users will also find the basics of Kali verrry easy to understand.

However, many more advanced tessellation features are missing-- resizing tiles, for example-- or viewing a drawing in one pattern, then in another tessellation pattern. As mentioned elsewhere, the lack of basic drawing & painting tools will frustrate more advanced artistic efforts. The simple bathroom-tile-style abstract design in Screenshot 1 took me mere seconds to draw. The slightly more complicated crocodile-like tessellation in the last screenshot took a little less than 30 minutes, after which I copied it into a paint program to make this. So, use Kali for brainstorming new ideas, but not redrawing old themes... and once a pattern is drawn in Kali, quickly opt to finish it in another program: 'copy-paste' your pattern into another paint-program to color, squash, and stretch it into its final, colorful form.

FILE SAVE
Once your pattern looks good, you can save it using the 'file...save' menu, or you can print it using 'file...print'. A limitation of Kali is: 'file...save' only allows you to save the file in Kali's unique, proprietary format (*.KAL). Therefore, you can't use 'file...save' to export that image into any other paint or photo programs (like MS Paint, Gimp, PowerPoint, Adobe Photoshop, JASC Paintshop, etc.).

EXPORTING IMAGES
Kali for Windows has two ways to export the image from Kali to another program. One is called 'Screen Grab' ('Screen Shot'). The other is called 'copy-paste'. Both use the Windows operating system's 'clipboard' to move a copy of the image between programs. Here's what to do:

  • Open that other image-manipulation program at the same time as Kali.
  • While looking at your image in Kali, either tap the 'print screen' key on your keyboard or go to the 'edit' menu in Kali and choose 'copy'. In this step you have put a copy of the picture into the Windows 'clipboard'.
  • Then go to your other image-manipulation program, open a BIG new empty file, go to that other program's 'edit' menu, and choose 'paste CTRL-V' (or hold down the 'control' key and simultaneously tap the 'V' key).
  • You should see your Kali painting reproduced in that image-manipulation program. You can now play with it, edit it, chop it, crop it, and save it in any image-file format PNG, JPG, GIF, TIFF...whatever) that your image-manipulation program supports.

UNDO TOOL: GREAT!
On the good side, the 'UNDO' feature works repeatedly-- you can hit the 'undo' key (CTRL-Z) to remove each point in your lines and each line, point by point, from the present to the first point in the drawing's history. This is a nice big powerful plus compared to many other stand-alone tessellation packages, because most programs allow you to 'UNDO' only one, five, or ten steps.

REDO TOOL: MISSING.
However, you can't re-do a step once you've undone it. I mean, once a point or line is removed via 'UNDO', the computer forgets what you did. Most programs, on the other hand, remember even the moves that you 'undo', and thusly allow an 'un-do' to be cancelled via a 're-do' option.

Here's an example: Let's say you're drawing a face. You draw an ear, and then you start experimenting with nose shapes. So you draw a nose, your cat hits your hand, and now the nose looks like a spoon. You're not sure if you like it, so you 'undo' it. However, your cat hits your hand again, so you accidentally go back one step too far. You've accidentally removed part of the ear that you drew before you started experimenting with noses, cats and cutlery.

You really liked that ear, and you're not sure you can draw it that well again.

In Kali, that ear is gone forever: you can't get that back unless you redo it by hand, relying on your own memory of how you drew it. You're miffed because in most programs, you'd simply click on the 'Edit' menu and you'd find a 're-do' menu option near the 'undo' menu option. You're doubly miffed because you know the co-owner of the cat would be distressed if you killed your half.

We'd like to see the 're-do' feature in the next version of Kali.

HELP MENU
The help menu is woefully short-- no more than a handful of sentences. Although the software is remarkably easy to use, there are several undocumented features, basic vocabulary and general concepts about tessellation) that aren't explained in the help menu. This reviewer would like to see a few examples of each type of wallpaper pattern's tessellation, as is done in Tesselmania. I would also like to see the 'double left-click' and 'right-click' ways of making a sharp corner in a curved line and ending a line, or see an adequate explanation of how to use the 'select background color' menu. The explanation of 'Show Singularities' in the Options menu is also woefully brief.

CONCLUSIONS
How do we rate this program? Intuitive & easy to start creating immediately, but lacks many basic drawing & advanced tessellation features. It's got a fantastic number of languages easily selected via the 'options' menu), and has been updated often and enthusiastically.

Features we'd love to see in the next version:
  • 'Cancel Undo' ('re-do') key, that would restore lines and points after they've been erased via 'UNDO' (CTRL-Z)
  • 'Eraser' tool in various sizes
  • More colors available for foreground (line drawing);
  • 'Save File' in PNG, GIF, and/or JPG image file formats;
  • Better cues for the overall shape of a basic tile, so we can see the size, edges, and relationships of the tiles. (A light grey-and-white shape, under the main drawing, perhaps?) The current 'show singularities' option simply isn't enough of a visual clue.
  • Ability to rotate and resize the height/width proportions of each tile. For example, a tool that elongates or squashes hexagons and rectangles, or increase the size of rosettas, for example;
  • When users change the type of tessellation, give us a warning message-box that pops up and asks 'do you want to abandon the current drawing, save the current drawing as a computer file, or take the current drawing and fit it into the new pattern?'; (In Kali-for-Windows v5.2, when one hits a 'pattern' button at the bottom of the screen, the current drawing in its entirety is irretrievably lost, without warning.) Imagine how many unhappy users and lost masterpieces this simple warning message could prevent.
  • Ability to import a background image ('wallpaper') to appear behind the tessellation;
  • Flood-fill and other common drawing tools, such as pattern-fills and brush-types and sizes;
  • Image zoom.

Tessellation Maker 1.75

We warmly thank the creator of Kali-for-Windows for giving out this easy-to-use program for free to the public.


A tessellation (or tiling) is a pattern of geometrical objects that covers the plane. The geometrical objects must leave no holes in the pattern and they must not overlap. You should be able to extend the pattern to infinity (in theory). You make a tessellation by starting with one or several figures and then you rotate, translate or reflect them; or do a combination of transformations, in order to get a repeating pattern.

If you only want to use one regular polygon to make a tessellation, there are only three possible polygons to use: triangle, square and hexagon. Click on the triangle and square in the example above to see the other two possible tilings of regular polygons.

Free Online Tessellation Maker

Tessellation maker online

Starting with a tiling of regular polygons, you can distort it (as shown above). It is possible to distort it in many different ways. In the example above:

  • The triangle tiling is distorted to a tiling of two different tiles.
  • The square tiling is distorted to a tiling of one tile. All tiles are translations of the tile in the centre.
  • The hexagon tiling is also distorted to a tiling of one tile. Every tile is rotated relative to its neighbours.

On the page GeoGebra Tutorial - Symmetries there is a description of how to make a tessellation using GeoGebra.

Online

Symmetries

Translational symmetry is just one type of symmetry. There is also rotational and reflection symmetry.

Tessellation Maker Online

Drag the red point to make a painting! Which of the images has a rotational symmetry and which has a reflection symmetry; the blue or the green?

Tessellation Maker

An image has a rotational symmetry if you can rotate the image around some point and get the same image.

An image has a reflection symmetry if you can reflect the image in some line and get the same image.

Reflection in Circle

Move the red points! De red figures are reflected in the circles onto the blue figures. All angles are preserved when reflected.

Online Tessellation Maker

Draw a circle mirror image using the red point below!

For a more advanced painting program, and an explanation of circle-inversion, see Paint Circle-Inverted Mondrian!.

For a hyperbolic tessellation see: Non-Euclidean Geometry - Interactive Hyperbolic Tiling in the Poincaré Disc.