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 increas 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

Basic ones

• There is a shape selector on the right of the tiling area, it is called the tileset. One of the shapes is the currently selected shape, highligted in red.
• Summon a tile of the selected shape in an empty hand by clicking an empty space in the area.
• You can add/remove a tile to/from your tileset.
• In the case shapes are not compatible you can scale/rotate any shape in the tileset by an arbitrary amount using the adjust button.
• Glue a tile in the hand to the area by left-clicking in the area.
• Turn the tile in the hand by one turn over N with either: the mouse wheel; the left/right arrow keys while the cursor is above the canvas; the turn buttons.
• Reflect the tile in the hand with a right click or the flip button or the keyboard /, -, f or m.
• Change the value of N with the corresponding input field. Note that this will mess up your tiling unless all previous orientations match an appropriate multiple of the new angle plus a constant. The program will warn you in case of mismatch.
• Group/Ungroup tiles with the hand by selecting them with Ctrl-click, or with the select tool with left click, then pressing the group or ungroup buttons or the G and U key.
• There are 5 tools, you can select them with their buttons or cycle through them with the up/down arrow keys while the cursor is above the canvas, or with Alt-wheel, or by pressing the key between parentheses: hand tool h, select tool s, erase e, paint p, pan/zoom z.
• Erase a tile or group under the cursor with left click with the eraser tool.
• You can select a colour using the palette.
• You can edit a colour by right-clicking it in the palette. This does not alter the already placed tiles.
• You can change the coulour of a tile with the paint tool by clicking a tile or using the mouse wheel while the cursor is over the tile.
• With the zoom tool you pan by dragging with left mouse button and zoom in/out with the wheel.
• You can also group groups, leading to nested groups.

More

• You can select the previous/next shape using Shift-Space/Space.
• You can change the cursor to a crosshair and back using Ctrl-Space.
• The toggle switch on the right of the palette alters the colour of flipped tiles.
• Shift-left click with a tile in hand places the tile and leaves a copy in hand.
• Shift-left click with eraser/paint/empty hand will erase/paint/pick a single tile, even if it is in a group or a nested group.
• Duplicate a placed tile by right-clicking it with an empty hand.
• Box-selection is done with the hand tool by pressing Ctrl-Shift and clicking, or select tool with right-click, and then tracing a rectangle. This adds to the selection the tiles (or topmost groups of tiles) that are completely inside the rectangle. To remove from selection, do the same pressing also Alt.
• Ctrl-A selects all tiles/groups and Shift-Ctrl-A deselects all.
• Ctrl-Alt-click with the hand tool or right-click with an empty hand tool will deselect all tiles. This can also be achieved from the select tool by maintaining depressed the right mouse button, then left clicking.
• You can also erase a single tile with an empty hand tool with Shift-Alt-left click, or if the hand is full this erases the highlighted group. The hand tool with Alt-left click will erase the tile/group in hand if it is not empty, otherwise the tile/group under the hand. You can also erase a tile as follows: pick it up with left mouse button but maintain the left button pressed and click right mouse button.
• From any tool different from the hand: a right click goes back to the hand tool.
• Shift-wheel also allows to select a colour. If a tile is in hand while this is done, its colour is changed too. If a group is in hand the whole group colour is changed.
• From any tool: dragging with middle mouse button allows panning and Ctrl-wheel zooms. You can also zoom with the wheel alone from the hand and select tools.
• Keyboard shortcuts for group/ungroup are g and u and you can also use Ctrl-right click and Ctrl-Alt-right click.
• Ctrl-click with the paint tool on a tile overwrites with its colour the currently selected entry in the palette.
• You can undo actions up to many level with the undo button or Ctrl-Z, but there is no redo.
• There may be a few other special behaviours not documented here.

Custom polygon

New shapes can be added to the tileset: any polygonal shape traced by a single closed polygonal line. For this, use the Add/Load shape button. 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]] for instance, or a previously saved tileset, in which case all shapes in the loaded tileset will be added to the current tileset. Be careful that the rotation centre will be [0,0]. You can recentre the cursor to the barycenter of the tile with the "Recentre shape" 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 tile to the tileset.

SVG!

There is now a possibility to load svg tiles. For this to work the svg must contain:

• an outline: a <path>, <polyline> or <polygon> with id="contour" or id="outline". Paths will be converted to polygons with straight segments between endpoints of each Bezier curve/circle/element composing it.

And optionally:

• magnet points: a <group> with id="vertices" containing ellipses and/or circles whose centre will be used,
• a centre point: a <circle> or <ellipse> with id="centre" or id="center".

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. Saving a tiling saves its tileset and the value of N in the same file, optionally the palette or magnet range. Saving a tileset saves the current value of N in the same file.