USAGE: The red points of the proto-tile on the right can be moved. Changing some settings require pressing Update. Setting can be reproduced with the URL after Update.

This is from a picture of the Voderberg Tiling on Wikipedia.

The idea is to tile the plane with tiles of a single shape and size in a way where there is no global symmetry.

The parameters of the tile are:

• n - the number of repeats in each half revolution
• d - the distance between the two centers
• one of the red movable points, or the side b and angle B

To see what n represents, look at these settings for n = 8.

With the vertices as labeled in the diagram, the tile is constrained by:

• AB′₁C′₁C₁B₁ is conguent to AB₂C₂C′₂D
• AB′₁C′₁C₁B₁D is conguent to itself in reverse order DB₁C₁C′₁B′₁A

The uppercase letters also indicate equal angle measurements A, B, C, D, B′ = 360° - B, C′ = 360° - C of the interior angles of the polygon. The sum of internal angles of a polygon gives A + B + D = 180°. The lowercase letters a, b, c indicate equal lengths.

The congruent parts AB′₁C′₁C₁B₁ and AB₂C₂C′₂D are just rotations of each other by angle A. In fact, AB′₁D and DB₁A are isosceles triangles with vertex angle A and base angles A′.

At each center of the spiral, the angles add up (n+1)A + B + D = 360° which gives A = 360°/n. The distance between the two centers d can be taken as the scaling parameter for the overall size, so the two big isosceles triangles are determined, and their base a. The point B₂ is determined by A and a. Any one of the remaining four points determines b and B (or D = 180° - A - B), so determines the other three points and C and c.

The constraints allows 2(n+1) pieces to fit together at each center. After that, use recursion at the next vertex around the spiral that have not filled up to 360°. At first, the inside of the spiral have angles B + D and the filled part of the outside of the spiral have angle B, so the remainder is filled up with A + A + D. Later on, the inside of the spiral can also have have angles B + D + A but the filled part of the outside of the spiral still have angle B, so the remainder is filled up with A + D. These two patterns repeat forever and so fill up the plane.

Or, consider that the inside of each spiral is made up of either a dark colored box of two tiles in opposite directions, or a light colored tile. Each of these units give rise to a dark colored box on the outside of the spiral, and the light colored units give rise to an additional light colored unit diagonally in front of it. The dark colored boxes form a straight line, and the light colored units are the turns of the spiral.

Looking at the Full picture, the spirals are basically made up of n straight segments per half revolution. Every half revolution, the segments increase by a length of a or by two tiles.

The total number of tiles is 2n(half_revolutions)² + 2. That's 2 initial tiles, plus n(2r - 1) tiles for the r-th half revolution for each of the 2 spirals.

The only problem is if the polygon intersects with itself, in which case the tiles will overlap.

There can be no self-intersections if B₂B′₁C′₁ are colinear and C₂C′₁C₁ are colinear. The first colinear condition gives B = A′ + A, and the second colinear condition gives a quadratic equation in b. These are set by the buttons b+ and b-. But the quadratic equation only have real solutions when n ≥ 14.

Smaller n can still give a tile with no self intersections. Experimentally, n ≥ 8 works. Perhaps one can be calculated by maximizing the distance of C′₁ from C₂C′₂.

IMPLEMENTATION NOTES:

• Graphics are SVG polygons with calculations, interactivity and propagations in JavaScript.
• SVG elements are in the HTML if possible, otherwise constructed in JavaScript.
• There are only 2 polygons for the tiles: the proto-tile on the right, and one that is used repeatedly with transformations to form the spirals. It's hard to use a single one since they have different scales (including different relative stroke widths).
• The spiral is formed recursively using the rules for dark colored boxes and light colored tiles above. I guess I can use loops following the grid, but I didn't see the grid at first.
• The grid is a polygon for each trapezoid, generated from loops. Or I can use one polygon for each revolution and transform.
• Changes that does not affect the number and position of the tiles edit the 2 polygons in place; SVG propagates automatically to all the repeated uses.
• Moving the red points in the proto-tile gives b, B and D, which are used to reposition all the red points.
• The b+/b- state is saved in a hidden form option so it's preserved by Update.
• Changes that affect the number or position of the tiles require a form submission, which reload the page.
• Parameters in URL updates the form, which is then used to generate the page contents.

Copyright © 2017 Di-an Jan