Tiling applet
Screenshot of the app being used to make various
tilings with a non-convex pentagon, by amfirifma
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.
Example of tiling with two shapes with various colours,
made by David Smith using the applet.
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.
Goosen's version of the Penrose tilings.
Tiles by Dave Smith, arrangement by Ortwin Schenker
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.
An SVG shape with transparent parts was laid upon a polygonal shape and they were grouped. Changing the colour of the group only changes the colour of the polygon.
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”.
To have tiles with order 4 rotation collaborate with tiles with order 6 rotation, one needs to take n=the least common multiple=12.
Grouping and copying
Tiles can be manipulated as blocks using the grouping function. Tiles and blocks can be copied and pasted.
Grouping and copying features being used by Dave Smith to build a non-periodic tiling
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
Dave prefers to work in night mode when the sky is dark
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 / 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 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 overwith either: the mouse wheel; the left/right arrow keys while the cursor is above the canvas; the buttons.
- Reflect the tile in the hand with a right click or the 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 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 or 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.
- 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.
- 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 Ctrl-Z, but there is no redo. button or
- 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 button in the Shape frame (we have also a small selection accessed via the 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 button then 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 and possibilities for the shape.
Tileset
Alternatively you can load or import a whole tileset with the appropriate buttons. dumps all shape before adding the tileset, while 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>
withid="contour"
orid="outline"
. Paths will be converted to polygons with straight segments between endpoints of each Bezier curve/arc/element composing it.
- magnet points: a
<group>
withid="vertices"
containing ellipses and/or circles whose centre will be used, - a centre point: a
<circle>
or<ellipse>
withid="centre"
orid="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="..."
.
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.