Polygonal tiling applet

Instructions

Disclaimer: Not designed for touchscreens. Not tested on touchscreens.

Tested on Firefox and Google Chrome.

Description

The applet allows testing tilings with one or several polygonal tiles that can be rotated into N possible orientations, and can also be flipped.

Magnet (snapping)

The vertices of the tiles are magnetized. You can change the range of the magnet with the appropriate field. If your tiles are big and refuse to snap it is a good idea to try and increase the magnet range.

More technically: the vertices of the already placed tiles are used to snap the current tile being placed: the closest vertex pair is determined then if their distance is below some threshold, the tile in hand is translated so that this pair matches. The threshold value can be adjusted in the corresponding input field.

Overlap is not prevented

There is no overlap checking implemented.

Controls

Note: most of the keys and key combinations only work when the cursor is above the tiling area.

Basic controls More

Custom polygon

New shapes can be added to the tileset: any polygonal shape traced by a single closed polygonal line. For this, use the Load button in the Shape frame (we have also a small selection accessed via the Select button). You can select multiple files. If the "add -- replace" knob is set on "replace", the loaded shape will replace the currently active shape. If you select multiple files in "replace" mode, the first one will replace the currently active shape, the remaining ones will be added to the tileset.

The file should be a either a text file containing a list of the shape vertices in the form.
[[0,1.23],[3.1,13],[-3.14,2.505]]
Be careful that the rotation centre will be [0,0]. You can recentre the cursor to the barycenter of the shape with the Adjust button then Recentre button. Another format understood by the app is
{"nbAngles":12,"shape":[[0,1.23],[3.1,13],[-3.14,2.505]]}
where nbAngles denotes a recommended value of the number N of orientations. The least common multiple of the new N and the current N will replace the current N when you add the shape to the tileset.

The adjust button also offers Scale and Rotate possibilities for the shape.

Tileset

Alternatively you can load or import a whole tileset with the appropriate buttons. Load dumps all shape before adding the tileset, while Import does not. Beware of duplicate shapes: we have not yet programmed a way to reduce them to a single one.

SVG!

There is now a possibility to load svg shapes. For this to work the svg must contain: And optionally: These mandatory and optionnal objects included in the svg can be invisible (by being fully transparent, or by having display="none"). They shall not be clones of other objects.

Saving/Loading

You can load/save palettes, tilesets, and tilings. You can load tiles but not save them. Saving a tiling saves its tileset and several stettings, including the value of N, in the same file. Optionally you can save the palette and magnet range. Saving a tileset saves the current value of N in the same file.

Several settings, including the tiling area size but excluding the palette and tilesets, can be saved in the cookies of your web browser, by checking the appropriate option.