Tiling applet

Instructions

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

Tested on Firefox and Google Chrome.

Description

The applet allows tiling with one or several polygonal or SVG shapes that can be rotated intopossible 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.

Trick: If your tiles are big and refuse to snap it is a good idea to try and increase the magnet range.

Technically: the vertices of the already placed tiles are used to snap the tile in hand about to be placed. For this the closest vertex pair (p,q) is determined, where p is a vertex in the hand tile and q in the other tiles. Then if the distance from p to q is below some threshold, the tile in hand is translated so that this pair matches, i.e. p=q. The threshold value can be adjusted in the corresponding input field.

Overlap is not prevented

There is no overlap checking implemented: the applet will not prevent you from placing tiles over each others.

Features

Multiple shapes and tilesets

Different shapes can be laid out on a single plane.

Shapes can be imported into the tileset. Tilesets can be loaded/saved/merged.

There is no limit on the size of tilesets.

SVG shapes can be used in conjuction with polygonal shapes for interesting results. Note that we cannot yet change the coulour of an SVG shape so one has to resort to tricks as below.

Rotation and flip

Tiles can be rotated and flipped

The possible orientations of a given shape are divided intoequal angles, andcan be changed “on the fly”.

Grouping and copying

Tiles can be manipulated as blocks using the grouping function. Tiles and blocks can be copied and pasted.

Colouring

Every polygonal tile can be assigned their own colour, which can be different even if they have the same shape.

There is a palette to help, but colours can be outside the palette. Each colour of the palette can be changed. The palette size can be increased or reduced.

Palettes can be saved and loaded

There is also a selection of palettes

Adjustments

Work in progress...

Night mode

Controls

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

Basic controls

• There is a shape selector on the right of the tiling area, it is called the tileset. One of the shapes is the currently active shape, highligted in red.
• Summon a tile of the active shape in an empty hand by clicking an empty space in the area.
• You can add/remove a shape 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 1/n-th of a turn with either: the mouse wheel; the left/right arrow keys while the cursor is above the canvas; the turn buttons. Pressing Shift-Alt while doing it will turn by 10/n-th of a turn.
• Reflect the tile in the hand with a right click or the flip button or the keyboard /, -, f or m. This will have no effect if the option allow flip is unchecked.
• Change the value ofwith 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.
• 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.
• Group/Ungroup tiles with the hand tool 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 or with Ctrl-right click or Ctrl-Alt-right click.
• You can also group groups, leading to nested groups.
• 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.
• You can pan from any tool by dragging with the middle mouse button and zoom with Ctrl-wheel. You can also zoom with the wheel alone from the hand, selectand zoom tools. With the zoom tool you pan by dragging with left mouse button.

More

• You can select the previous/next shape using Shift-Space/Space.
• From any tool different from the hand: a right click goes back to the hand tool.
• You can change the cursor to a crosshair and back using Ctrl-Space.
• The toggle next to flip filter alters the colour of flipped tiles according to a specified CSS filter (or "default").
• 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 with Alt depressed while releasing the mouse button.
• 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.
• With the hand tool, Shift-wheel 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. With Shift-Alt-wheel the same happens but moreover any placed tile or group under the cursor has its colour changed too.
• 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 yet.

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 numberof orientations. The least common multiple of the newand the currentwill replace the current 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:

• 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/arc/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",
• a name: by thefault the name is given an name from its filename but one can set a different name adding a name="..." attribute to the root element <svg ...> of the xml code of the SVG,
• an indication of the intended number n or rotations for this shape, with the attribute nbAngles="..." as above.

The 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. Concerning the attributes id, name, nbAngles: some svg maninpulation programs (like Inkscape) allow the edition of the xml. Otherwise you have to use a text editor.

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 ofin 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.