In previous posts, I have touched on the difficulties of trying to handcode Islamic design patterns using SVG.

One problem is that SVG shapes rely on an inverted coordinate system that lives in this seemingly 2D amorphous space.

You have to know the coordinates in advance to draw anything.

In the case of a line, for example, you specify the starting x,y coordinates, and the ending x,y coordinates — and SVG will draw the line for you.

It’s a piece of cake — if you’re chugging along a perpendicular or vertical axis, or better yet, if you don’t have to connect various shapes at precise points in ways that are more complex than, say, interlocking circles or squares.

But the land of no worries quickly vanishes if you have to target, say, various points (or vertices) on the circumference of a circle — in order to build the scaffolding needed for a given pattern.

Precisely how do you calculate the endpoint of a chord on an circle? (without using Inkscape).

Consider this girih pattern.

Can I create Figure A with synthetic geometry?

Sure thing.

Straight-edge, pencil., compass. Strathmore newsprint. and a protractor allow me to physcally measure the various angles and chord lengths in question. I can then map these measurements into my SVG 300×300 viewport, as shown in the following demo (I only did 4 vertices in this example).

Perhaps there’s another way.

How about using trig, for example?

This is possible too.

Here’s the math (in the form of pseudocode):*

for(i = 1 to n)

{

angle = i * (360/n);

point.x = x0 + r * cos(angle);

point.y = y0 + r * sin(angle);

}

for i =1

x = 150 + 150 x cos(36) = 150 + (150 x 0.80902 )

= 271.353

y = 150 + 150 x sin(36) = 150 + (150 x 0.58779)

= 238.1685

convert y to SVG: 300 – 238.1685 = 61.8315

++++

for i =2

x = 150 + 150 x cos(72) = 150 + (150 x 0.30902 )

= 196.353

y = 150 + 150 x sin(72) = 150 + (150 x 0.95106)

= 292.659

convert y to SVG: 300 – 292.659 = 7.341

++++

for i = 3

x = 150 + 150 x cos(108) = 150 + (150 x (-

0.30902) )

= 103.647

y = 150 + 150 x sin(108) = 150 + (150 x 0.95106)

= 292.659

convert y to SVG: 300 – 292.659 = 7.341

+++

ans:

(1) 271.353, 61.8315

(2) 196.353, 7.341

(3) 103.647, 7.341

And here is the demo. The yellow lines divide the circumference into 10ths. I left in the blue ones we calculated earlier on paper with a compass, ruler and protractor. They are proof that the trig calculations are correct.

In the next post, I’ll complete the vertice calculations and finish the job by creating an SVG polyline version of figure A.

Naturally, calculating 10 vertices by hand is as tiresome as drawing out the scaffolding using handheld tools.

A JS function would be useful, in that regard — one that could dynamically handle variable radii, circle origin, viewport coordinate units, and number of vertices desired.

*for an explanation as to how this formal works (from a programmer’s perspective), please consult this Stackoverflow response, provided by Stan0.

# # #