Alhambra color tiles 1

This is the Alhambra picture below except for the borders.

The colors are simple named colors; I did not match the color closely, nor do I choose to add a color chooser.
The silver star represent the tile with black on white patterns.
The gap width should be less than about 6% of the radius; otherwise things start being pushed to the wrong side. A value of 5% seems to match the actual tiles, though I did not measure.
Settings are not be saved.

Photo of tile patterns from Alhambra

How the pattern works

	The basic shape is the n,k-star, formed by taking a regular n-sided polygon and connecting every k vertices. Taking k = 1 gives the regular polygon. If you start with a vertex and connect every k vertices, you may start repeating without reaching all vertices. The number of these sub-loops needed to cover all vertices is gcd(n, k). To eliminate internal lines, stop at the inner radius between the vertices and go back out. The inner radius is this fraction of the outer radius: cos πk/n / cos π(k − 1)/n On the left is are 12,4-stars and 8,2-stars drawn both ways. On the right is a 12,5-star inside a 12,2-star. Connecting the inner points of an n,k-star is a rotated n,(k−1)-star. In particular, the 12,5-star contains a 12,4-star.
	We can divide the pattern into repeating units by putting each large circle in a square diamond unit. The full pattern have 5 complete units on the horizontal center line and 3 complete units on the vertical center line. The number of complete units along both center lines have to be odd so there is a unit at the center. The rows and columns are staggered, so the odd rows and columns have complete units, and the even rows and columns have 2 half units and 1 fewer complete units. On the left, the circles take up most of the repeating unit. At the corners of the repeating unit are centers with 4-fold rotational symmetry, shown here as black stars. At the edges of the repeating unit are centers with 2-fold rotational symmetry, shown here in green. On the right, the repeating border units are somewhat different. The large unit is divided into 4 smaller subunits with 4- or 2-fold rotational symmetry, shown here in silver. The small subunits are between black stars, which are centers with 4-fold rotational symmetry. The symmetries at the edges are broken are when going from the 4 subunits to the big circle, and further broken when the 2 types of repeating units are next to each other.
	Start by placing the black stars of radius r in an U × U grid, then black stars in the middle of each grid. In other words, U is the distance between the center of the black stars in a row. Then we can calculate the width of the white gap w using trigonometry: w = (√3 − 1) / 4 U − r We reverse it to get the radius of the black star r in terms of U and w, the two adjustable parameters above. The drawing on the left shows the lines I used to derive the formula.	Black Star Grid
	The idea is to extend existing lines and lines that are at the gap width w away from existing lines to outline additional tiles. These lines form the white strips around the tiles. Also use axes of symmetry so only half of the tile edges needs to be described. Move tiles as needed (translate and rotate; no need to reflect since all tiles are symmetric).
	Two tile shapes are bound by two lines separated by 60° around a center between the black stars. Now all the tile shapes are constructed for the right diagram.	Border Bar
	The border have different tiles between one set of black stars, with a blue 8,2-star in the center. Horizontal and vertical extensions of the black 12,4-stars form the half of the points of the 8,2-star, and white strips around the stars bounds the other two tile shapes.	Border Coin 1
	Around the center circle, the black stars on the edges of the repeating unit are truncated on one or both sides and changed to green. What is left is to fill in the large 12,2-stars in the center. There are four types, numbered Unit 0 to Unit 3 from the center to the left and right sides. These all involve making some non-obvious rules for placing white strips to add areas to the inner edge the large star's rays.	Common Base
	For Unit 0, we make two white strips meet at 60° angle touching the large star's ray. This is actually not aesthetic, as human vision tend to emphasize special features, so the V cutout appears deeper, cutting into the large star's ray. You can compensate by moving it out a little, but that's not done here. We make the center blue star is the same as the other black stars, but rotated. Extend the white strips outlining the center blue star to outline all the shapes.	Unit 0
	For Unit 1, we make two white stripes meet at 60° angle, forming an X, so they extend the large star's ray making the four new edges the same length. To make that, let 2s be the side to extend, then the perpendicular distance to the new point of angle a is cos a/2 / (1 + sin a/2) s Then we add another white strip symmetrically on the other side of the X as the large star's ray's inner white strip. We make the center blue star the same as the other black stars.	Unit 1
	For Unit 2, we add two white stripes the same as Unit 1 except to make them meet at 30° angle. These strips then outline the central star, which is larger than the other Units' central star.	Unit 2
	For Unit 3, we make two white stripes meet at 90° angle. We make the center blue star the same as in Unit 0. Extend the white strips outlining the center blue star to outline all the shapes.	Unit 3

Implementation notes

This is written in HTML 5 Canvas 2D Context. HTML 5 basically have 3 levels: The highest level is text elements like paragraphs, lists, tables, etc. The next level is SVG, which consists of geometric elements. The lowest level is the canvas, where you can draw arbitrary content with JavaScript. Since I want everything calculated and SVG doesn't support that without JavaScript, I went with the canvas. The advantages of SVG is that SVG handles layers, that you can zoom in without loosing resolution and that SVG keep track of all the shapes, so can moved and transform and interact with the mouse.
Colors can be changed with constants at the top of the next scripts section. They're named after and defined as the closest simple color names. You can change to a different color scheme by changing the uses of the color constants.
I put in code to avoid overlapping tiles, though I haven't checked everything. But the tiles that cross the unit boundary stick out and overlap with adjacent units. They are not cut off at the unit boundary; otherwise Firefox's drawing engine leaves a thin gap between the parts from adjacent units. Parts of units and lines that are off screen are still drawn.
The drawings in How the pattern works section are conditionalized version of the main drawing. It's an attempt to reduce duplicate code.
I did the mathematics in MathML but that's not supported in many browsers, so I switched to CSS inline-block for fractions and √3 for square roots.

Di-an Jan > Alhambra Color Tile 1

How the pattern works

Implementation notes