Documentation

This documentation describes the user interface of Tissellator. The steps on the homepage and this page help you to create your tessellations. If something is unclear, or if you want to report comments and/or bugs, please mail me.

The user interface of Tissellator consists of the menu bar, menu icons, status bar, the view, and dialog windows.
N.B. Mac users should read Command+X instead of Ctrl+X.

Menu bar


File Main operations


New (Ctrl+N) Start a new project.

Open (Ctrl+O) Load an existing project from a TIS file.

Recent Load a recent, existing project. Up to 8 project names are saved.

Save (Ctrl+S) Save the project to the current TIS file.

Save As (Ctrl+Alt+S) Save the project to a new TIS file.

Export Image
Save the tessellation in the view (without the background) to a PNG file. The fill mode determines what is actually saved. The size of the image equals the size of the view.

Export Outline as SVG
Save the outline of the basic tile to a SVG file.

Exit Stop the program.



Edit Edit operations


Undo (Ctrl+Z) Undo the last action.

Redo (Ctrl+Y) Go back to a later state.

Delete Point (Ctrl+D) Delete the selected point.

Unselect Point (Ctrl+U) Unselect the selected point.

Join 2 Points Move a point to the neighbour point that is very close to it.

Move Point to .. A dialog asks you for the coordinates of the new location.

Toggle fill (Ctrl+F) Toggle the fill mode between (1) outline and all tiles filled, (2) outline and base tile filled, (3) only outline

Hide outline
Hide outline and filled tiles. This will show the full background.

Reset zoom
Set the zoom factor to 1, and move the panned offset to the center.

Show transformations
(Ctrl+Shift+T)
Show the arrows indicating the transformations: translation, glide, rotation, mirroring.



Tessellation Tessellation operations


Save Outline Image Save the outline of the basic tile to a PNG file.

Load Background (Ctrl+B) Load a background image, that is used for creating the tessellation. If the image is bigger than the view, then only the top left part of the image is taken.

Toggle Background (Ctrl+T) Show/hide the background image.

Create Tessellation Create the tessellation according to the outline and using the background image.

Load Multi Background (Ctrl+M) Load several background images, that are used for creating the tessellation.

Cycle Multi Background (Ctrl+C) Cycle through all background images.

Create Multi Tessellation Create the tessellation according to the outline and using multiple background images.



Extra Miscellaneous operations


About Shows current program version.

Settings Edit system settings.

User Info Show the information of a registered user.

Register Enter registration information for becoming a registered user.


Menu icons

delete point Delete the selected point.
unselectpoint Unselect the selected point.
join 2 points Move a point to the neighbour point that is very close to it.
cubic segment The added point is a cubic point, that gives a curved segment. A segment is curved if one or both endpoints are cubic points. Toggle this button for switching to linear mode.
linear segment The added point is a linear point, that takes care of a straight segment. A segment is straight if both endpoints are either linear points, or corners, or intermediate points.Toggle this button for switching to cubic mode.
zoom in Zoom in by 5%.
zoom out Zoom out by 5%.
zoom slider + value Zoom slider and zoom value. You can zoom in or out the tessellation by a maximum factor of 10. Note that the background image does not zoom or pan.
edit points Edit points or corners. Toggle this button for switching to pan mode.
pan Pan the tiles and the outline. Toggle this button for switching to edit mode.
edit outline Edit the points of the outline. Toggle this button for switching to editing corners.
edit corners Edit the corners of the tile. Straight edges between the corners appear instead of the points. Each corner can be moved in a way that depends on the type of tessellation. Just try and see how the tile changes. Toggle this button for switching to editing outline points.

N.B. The icons have tooltips.


Status bar

The red box of the status bar shows information, warnings and errors about your actions. For example:

status bar
indicates starting a new project. In this case, the numbers 3 (for pentagon) and 23 (heesch number) are codes for the tesselation.


View

Editing of the tessellation happens in the central part of the window. For example the figure below shows a triangle tessellation of Heesch type IH79 :

view 1
The grey outline contains different kind of points with a certain color, indicating their nature:


point cubic Cubic point. This point causes a curved segment in the outline, made of a third degree polynomial. A segment is curved if one or both endpoints are cubic points.
point linear Linear point. This point takes care of a straight segment in the outline. A segment is straight if both endpoints are either linear points, or corners, or intermediate points.
corner point Corner point. The basic form of a tile is a polygon with a number of corners (e.g., three for the triangle above, labeled C1, C2, C3). Corners can be moved in "corner mode" : select icon edit corners to enable this. For moving a corner, you first have to select it with the mouse. Then, click at another location. Often, not only the corner itself moves, but also other corners of the tile. That is needed to maintain the characteristics of a tile: for example, it must still be a rectangle. Moving another corner may change the tile in a different way. Just try and see what happens. In this way you can also scale and/or rotate a tile. Some moves may lead to an invalid configuration, as indicated in the status bar, and cancel the move action. This happens especially for spiral and circle configurations. Just try a smaller move, or in another direction.
intermediate point Intermediate point. This point lies exactly in the middle of an edge between two corners, that has rotation or mirror symmetry (e.g., I1 in the triangle above lies between C1 and C2). An arrow outside the outline indicates (when activated by Show transformations) such a symmetry. An intermediate point can not be edited.
selected point Square around selected point.

Editing an edge of the outline causes changes in related edges, depending on the transformation between those edges. Possible transformations are translation, rotation, mirror (or reflection), and glide ( kind of "upside down"). Also within an edge 2 transformations are possible: rotation or mirror. When choosing a new tessellation colored arrows in the dialog indicate the transformation. Here is an overview:

translation Translation. The edge is often shifted to the opposite side of the tile, keeping the same orientation. It is also possible that the translated edge is rotated a bit, especially for the spiral tessellations. An edge and its related, translated edge have no corner in common (otherwise it would be a rotation).
rotation Rotation. An edge and its related, rotated edge have a corner in common. The edges rotate around the common corner. The rotation angle is often 60 degrees, or 90 degrees.
glide Glide. This arrow is twisted upside down, and that is what also more or less happens with an edge. Instead of a normal translation, the translated corners are swapped together with the part of the outline between the 2 corners.
rotated glide Glide rotation. This transformation is a combination of a glide and a rotation, and it occurs between two neighbour edges with a common corner.
mirror Mirror (or reflection). The vertical bar in the middle of the arrow stands for a mirror, indicating an edge and its mirrored counterpart.
mirror rotation Mirror rotation. This transformation is a combination of a mirror and a rotation, and it occurs between two neighbour edges with a common corner.
mirror This rare transformation is a combination of a translation and a 180 degrees rotation; therefore, I call it a twirl.
edge rotation Rotation of 180 degrees inside an edge. In the middle of the edge is an intermediate point.
This arrow is drawn outside the tile.
edge mirror Mirror inside an edge. In the middle of the edge is an intermediate point.
This arrow is drawn outside the tile.


The following figures illustrate the transformations and the corresponding arrows, and also an example tessellation. The arrows have the same color within a tessellation if they refer to the same edge.

IH43 translation glide
IH43 points
IH13 (edge) mirror rotation
IH13 points
IH61 twirl
IH61 points


Dialog windows

Dialog: File / Export Outline as SVG

Export Outline as SVG

Field Description
X-range Minimum and maximum values of X-coordinates of outline points.
Y-range Minimum and maximum values of Y-coordinates of outline points.
Scale The X-coordinates and Y-coordinates are multiplied by the scale factor.
Size Value of the fields width and height in the SVG file.
Size viewbox Value of the viewBox width and height in the SVG file.


Dialog: Edit / Move Point To ..

Move Point To

Field Description
New X-coordinate New value of X-coordinate of moved point.
New Y-coordinate New value of Y-coordinate of moved point.

N.B. The coordinates mentioned are internal coordinates, independent of the zoom factor and the offset. The origin (0,0) of these coordinates lies in the middle of the screen.


Dialog: Tessellation / Load Multi Background

Multi background

Field Description
Filename [x] Enter the filename of the image with index [x]. Optionally, click Browse for browsing to it.
All entered files are checked. If an image can not be read, then this activity is cancelled.
Select color scheme Press this button to use a color scheme.
Note that this button appears only for some spiral tessellations and all circle tessellations.

N.B. In case of spiral tessellations and circle tessellations, the number of background images is freely selectable. A dialog appears to ask for the number of images.


Dialog: Tessellation / Select color scheme

Select color scheme

Field Description
Enable color scheme Enable or (temporarily) disable the color scheme. When disabled the default colors are used.
First First value in the corresponding direction.
Delta Delta value in the corresponding direction. This value is normally positive, but can also be zero or negative.
Last Last value in the corresponding direction. An incremented/decremented value exceeding 'Last' gets the value of 'First'. If 'Delta' is positive, then 'Last' should be greater than 'First'. If 'Delta' is negative, then 'Last' should be less than 'First'.

The color index is the sum of the values in the tangential direction and the radial direction, taken modulo the number of colors. The radial direction goes outward from the center of a spiral/circle; for a circle along a radial, and for a spiral it has the range of its number of arms. The tangential direction is (almost) perpendicular to the radial direction; for a circle the range equals the number of radials, and for a spiral the range is unlimited.


Dialog: Tessellation / Create Tessellation

Create Tessellation

Field Description
Width Width of output image in pixels.
Height Height of output image in pixels.

N.B. The same dialog appears for Create Multi Tessellation.


Dialog: Extra / Settings

settings

Field Description
User directory This field shows where your user directory for Tissellator dedicated files is located. This includes files for settings as shown in this dialog, recent projects, user registration, project files of Undo history, and occasional project files. If you loose some work for some unexpected reason, you might recover it by searching for the latest project files having extension ".tis".
In Windows the user directory is: C:\Users\<username>\tissellator .
In Linux (Mint) the user directory is: /home/<username>/tissellator .
In MacOS the user directory is:  /Users/<username>/tissellator .
View width
View height
The view is the graphical part of the window for editing the tessellation. Its width and height are in the unit of pixels. The size of the view is limited by the resolution of the computer monitor. Initially, the size is 960 by 640 pixels. It is highly recommended to increase the view size for big monitors. Possibly, the program window does not scale correctly after increasing the size. Please, restart Tissellator then.
N.B. The size of an exported image (File / Export Image) equals the size of the view.
If the initial view might even be too large to change the Settings, you might solve this by editing the file tissellator.settings in the user directory with an ascii editor.
Fill empty pixels Sometimes, rendered tiles in (multi) tessellations don't fit together perfectly, so that pixels in between them remain empty. Tissellator fills empty pixels with neighbour values if this checkbox is marked.
Anti-aliasing for spirals/circles The background image is enlarged, especially at the borders of a tessellated spiral or circle. This causes aliasing effects making pixels visible as squares. A bilinear interpolation algorithm takes care of anti-aliasing.
Automatic horizontal and vertical tiles The polygon tessellations, excluding the spiral/circle tessellations, are rendered along a rectangular grid. Tissellator computes the size of the grid, if this checkbox is marked. If you prefer your own grid size, then unmark the box, and fill in the next two fields.
Note that unmarking this option leads to many empty filled; it is recommended to unmark then the checkbox of Fill empty pixels.
User defined horizontal tiles
Grid size for rendering tiles in horizontal direction.
User defined vertical tiles Grid size for rendering tiles in vertical direction.


Dialog: Extra / Register

register

Field Description
Registration-File Enter here the name of the file received at registration. Optionally, browse to it with the button "..."
Registration-Code Enter the code received at registration.


New Spiral Dialogs

Dialog: New / Spiral / Triangle-side-to-side

triangle spiral parameters

Field Description Spiral
Number (>=3) of leaf triangles The number of leaf triangles determines how quickly the spiral goes "round". In case of 8 leaf triangles the spiral is as follows: spiral triangle 8 leafs

N.B. A similar dialog appears for the Triangle-side-to-base, and for Triangle-base-to-side. The only difference is that the lower limit for the number of leaf triangles is 4 and 5, respectively.

Detailed information about these kind of triangle spirals can be found in the paper "Logarithmic Spiral Tilings of Triangles" by Robert Fathauer.


Dialog: New / Spiral / Four-armed-mirror spiral

4 armed mirror spiral parameters

Field Description Spiral
Angle in degrees Angle (in degrees) at bottom right corner of red triangle tile. spiral 4 arms
Length base edge The length of the base edge (i.c. 0.55) is entered as a relative value compared to the right edge with length 1.0 .

The above two parameters determine the configuration of this four armed mirror spiral. More background information can be found in my paper "Four-armed spiral tiling of scalene triangles".


Dialog: New / Spiral / Quadrilateral spiral

quadrilateral spiral parameters

Field Description Spiral
Number of leaf quadrilaterals
The number of leaf triangles determines how quickly the spiral goes "round". In case of 4 leaf triangles the spiral is as follows: spiral quadrilateral
Angle in degrees Angle (in degrees) at bottom right corner of orange quadrilateral tile.
Length base edge
The length of the base edge (i.c. 0.55) is entered as a relative value compared to the right edge with length 1.0 .

The above three parameters determine the configuration of this quadrilateral spiral. Some background information can be found in my paper "The computation of the spiral center of triangles and quadrilaterals".


Dialog: New / Spiral / Bi-Logarithmic spiral

bi-logarithmic spiral parameters

Field Description Spiral
Number of arms
clockwise direction
The design of this spiral consists of points that rotate and scale in clockwise direction, and of points that rotate and scale in counterclockwise direction. For the default parameters, the points rotate 60 degrees in clockwise direction and scale a ratio of 1.25 . After 5 such operations a point is back to its original spiral arm, indicated as A-B-C. spiral double text
Number of arms
counterclockwise direction
For the default parameters, the points rotate in counterclockwise direction the remaining 360 - 300 = 60 degrees. So, 20 degrees per point, and the ratio can be computed as: 1.25^(5/3). After 3 such rotate and scale operations a point is back to its original spiral arm, indicated as 1-2-3-4-5.
Angle range clockwise direction in degrees In clockwise direction the points rotate (for the default parameter) each 60 degrees, so in total 5 * 60 = 300 degrees. This covers the blue part of the circle.
Ratio clockwise direction In clockwise direction the points scale (for the default parameter) a factor 1.25, or its reciprocal 0.8 .

Once chosen, the number of arms can not be changed anymore for a spiral. By editing tile corners the angle range and the ratio can still be varied. Invalid spiral configurations are detected, skipped and reported in the Status Bar.


Dialog: New / Spiral / IH1a

spiral parameters IH1a

Field Description Spiral
Number of hexagons per revolution In this spiral configuration all hexagons are similar: having the same shape but different size. For the default parameters, after 7 rotations, indicated as 1-2-3-4-5-6-7 the hexagon lies "next" to the base hexagon that is grey outlined. spiral IH1 text
Number of spiral arms
In counterclockwise direction it  takes 3 steps to arrive at that 7th hexagon, indicated as A-B-C.
Factor diameter in range [ 0.0 - 1.0 ] The diameter factor affects the thickness of the hexagon. The rotation to the next hexagon can be considered as a rotation around the middle (=diameter) of a hexagon plus a rotation around the top edge of a (staggered) hexagon. The diameter can be varied, ranging from 0.0 to 1.0 . In case of 0.0 the hexagon becomes 2 triangles, whereas in case of 1.0 the hexagon becomes a quadrilateral. In the latter case, the form of the quadrilateral can not be changed back to a hexagon.
Radial ratio This ratio affects the height of the hexagon.
Skew in degrees The skew gives a twist to the spiral. In case of zero skew, the ray to the spiral center is a straight line.

Once chosen, the number of arms can not be changed anymore for a spiral. The other parameters can be changed by moving the corners as follows:

Corner[0] Rotate whole hexagon.
Corner[1] Change diameter with focus on top/bottom edge. (Angle alpha)
Corner[2] Rotate whole hexagon.
Corner[3] Change skew.
Corner[4] Change ratio.
Corner[5] Change diameter with focus on middle. (Angle beta)

The corner index is shown in the Status Bar after selection. Invalid spiral configurations are detected, skipped and reported in the Status Bar.

More background information about the construction of this spiral can be found in my paper "Logarithmic spiral tiling of hexagons".

Note: The computation of a (multi) tessellation is a lengthy process. Please, be patient.


Dialog: New / Spiral / IH1b

spiral parameters IH1b

Field Description Spiral
Number of hexagons per revolution In this spiral configuration all hexagons are similar: having the same shape but different size. For the default parameters, after 8 rotations, indicated as 1-2-3-4-5-6-7-8 the hexagon lies "next" to the base hexagon that is grey outlined. spiral IH1b text
Number of spiral arms
In counterclockwise direction it  takes 3 steps to arrive at that 8th hexagon, indicated as A-B-C.
Factor diameter in range [ 0.0 - 1.0 ] The diameter factor affects the thickness of the hexagon. The rotation to the next hexagon can be considered as a rotation around the middle (=diameter) of a hexagon plus a rotation around the top edge of a (staggered) hexagon. The diameter can be varied, ranging from 0.0 to 1.0 . In case of 0.0 the hexagon becomes 2 triangles, whereas in case of 1.0 the hexagon becomes a quadrilateral. In the latter case, the form of the quadrilateral can not be changed back to a hexagon.
Radial ratio This ratio affects the height of the hexagon.
Skew in degrees The skew gives a twist to the spiral. In case of zero skew, the ray to the spiral center is a straight line.

Once chosen, the number of arms can not be changed anymore for a spiral. The other parameters can be changed by moving the corners as follows:

Corner[0] Rotate whole hexagon.
Corner[1] Change diameter with focus on middle.
Corner[2] Rotate whole hexagon.
Corner[3] Change skew.
Corner[4] Change ratio.
Corner[5] Change diameter with focus on left/right edge.

The corner index is shown in the Status Bar after selection. Invalid spiral configurations are detected, skipped and reported in the Status Bar.

Looking from the center the hexagon of this spiral (IH1b) is more or less 90 degrees rotated compared to the previous spiral IH1a. In case of 1 spiral arm the corners of a IH1a hexagon are all on the same spiral line; for IH1b the top corner (far from center) and the bottom corner (close to center) are on different spiral lines: the top corner is on the same spiral line as the 2 lower (close to center) corners left and right, whereas the bottom corner is on the same spiral line as the 2 upper (far from center) corners left and right.

Note: The computation of a spiral (multi) tessellation is a lengthy process. Please, be patient.

New Circle Dialogs

Dialog: New / Circle / IH1a

circle parameters IH1a

Field Description Circle
Number of radials In this circle configuration all hexagons are similar: having the same shape but different size. Abbreviate the number of radials by N.  For each radial the hexagons are the same, but rotated by the angle obtained by dividing 360 degrees by N. So, N hexagons have the same size. circle IH1a text
Radial ratio The hexagons grow by this ratio. It is the quotient of the distance of P3 to center C divided by the distance of P2 to C. Note that P0 and P2 lie on the same circle around C, just like P3 and P5.
Radial skew in degrees The angle from P2 to P3 seen from center C.
Top ratio The quotient of the distance of P4 to center C divided by the distance of P3 to C.
Top skew in degrees The angle from P3 to P4 seen from center C.

Once chosen, the number of radials can not be changed anymore for a circle. The other parameters can be changed by moving the corners as follows:

Corner[0] Rotate whole hexagon.
Corner[1] Change top ratio and top skew.
Corner[2] Rotate whole hexagon.
Corner[3] Change radial ratio and radial skew.
Corner[4] Change top ratio and top skew.
Corner[5] Change radial ratio and radial skew.

The corner index is shown in the Status Bar after selection. Invalid circle configurations are detected, skipped and reported in the Status Bar.

The circle tessellation IH3 satisfies also the above description.

Note: The computation of a circle (multi) tessellation is a lengthy process. Please, be patient.


Dialog: New / Circle / IH1b

circle parameters IH1b

Field Description Circle
Number of radials In this circle configuration all hexagons are similar: having the same shape but different size. Abbreviate the number of radials by N.  For each radial the hexagons are the same, but rotated by the angle obtained by dividing 360 degrees by N. So, N hexagons have the same size. Note that between 2 hexagons of the same size there are 2 other hexagons with smaller and bigger sizes. circle IH1b text
Radial ratio The hexagons grow by this ratio. It is the quotient of the distance of P3 to center C divided by the distance of P1 to C. Note that P0 and P1 lie on the same circle around C, just like P3 and P4, and also P2 and P5.
Radial skew in degrees The angle from P1 to P3 seen from center C.
Middle skew in degrees The angle from P0 to P5 seen from center C.

Once chosen, the number of radials can not be changed anymore for a circle. The other parameters can be changed by moving the corners as follows:

Corner[0], Corner[1] Rotate whole hexagon.
Corner[3], Corner[4] Change radial ratio and radial skew.
Corner[2], Corner[5] Change middle skew, and top ratio.

The corner index is shown in the Status Bar after selection. Invalid circle configurations are detected, skipped and reported in the Status Bar.

Looking from the center the hexagon of this circle tessellation (IH1b) is more or less 90 degrees rotated compared to the previous circle tessellation IH1a.

Note: The computation of a circle (multi) tessellation is a lengthy process. Please, be patient.


Dialog: New / Circle / IH1c

circle parameters IH1c

Field Description Circle
Number of radials In this circle configuration all pentagons are similar: having the same shape but different size. Abbreviate the number of radials by N.  For each radial the pentagons are the same, but rotated by the angle obtained by dividing 360 degrees by N. So, N pentagons have the same size. circle IH1c text
Ratio The pentagons grow by this ratio. It is the quotient of the distance of P3 to center C divided by the distance of P2 to C. Note that P0 and P2 lie on the same circle around C, just like P3 and P5.
Skew in degrees The angle from P2 to P3 seen from center C.

Once chosen, the number of radials can not be changed anymore for a circle. The other parameters can be changed by moving the corners as follows:

Corner[0], Corner[1], Corner[2] Rotate whole pentagon.
Corner[3], Corner[5] Change ratio and skew.
Corner[4] Change ratio.

The corner index is shown in the Status Bar after selection. Invalid circle configurations are detected, skipped and reported in the Status Bar.

Point P1 lies on the line from P0 to P2. Therefore, the "hexagon" of 6 points becomes a pentagon.

Note: The computation of a circle (multi) tessellation is a lengthy process. Please, be patient.


Dialog: New / Circle / IH41a

circle parameters IH41a

Field Description Circle
Number of radials In this circle configuration all quadrilaterals are similar: having the same shape but different size. Abbreviate the number of radials by N.  For each radial the quadrilaterals are the same, but rotated by the angle obtained by dividing 360 degrees by N. So, N quadrilaterals have the same size. circle IH41a text
Ratio The quadrilaterals grow by this ratio. It is the quotient of the distance of P2 to center C divided by the distance of P1 to C. Note that P0 and P1 lie on the same circle around C, just like P2 and P3.
Skew in degrees The angle from P1 to P2 seen from center C.

The circle tessellation IH43 satisfies also the above description.


Dialog: New / Circle / IH41b

circle parameters IH41b

Field Description Circle
Number of radials In this circle configuration all quadrilaterals are similar: having the same shape but different size. Abbreviate the number of radials by N.  For each radial the quadrilaterals are the same, but rotated by the angle obtained by dividing 360 degrees by N. So, N quadrilaterals have the same size. circle IH41b text
Ratio The quadrilaterals grow by this ratio. It is the quotient of the distance of P1 to center C divided by the distance of P0 to C. Note that P0 and P2 lie on the same circle around C.
Skew in degrees The angle from the middle of P0 and P2 to P1 seen from center C.

The circle tessellation IH44 satisfies also the above description.