Vesica Piscis

svg
Figure 1 – click to see the live SVG in CodePen

In this post, I’m going to calculate the two points of intersection, a and b, you see in Figure 1.

The “lens” area c is known as a Vesica Piscis (or fish liver, in Latin).  We can use a formula seen here to help us in our computations.

length of the radical axis h (this is the height of the lens) equals 1/2 the radius of our circle times the square root of 3

Plugging in the numbers…

h = 1.732 x 100 = 173.2px

173.2 / 2 = 86.6px

a = 200 – 86.6 = 113.4px (the value of the y coordinate)

thus point a is located at (250, 113.4)

Inkscape
Figure 2

which can be verified in Inkscape (see Figure 2, the blue oval).

It’s also possible to calculate the coordinates of point b.

Notice we have 2 right-sided triangles connected at point a in Figure 1:

50 (opposite side) in px units) / 100 (hypotenuse)  = 0.5 radians

(-1) sine of 0.5 radians = ∠30°

We can now calculate the coordinates of point b, using the tan(θ) = Opposite / Adjacent formula.

Calculation:

Opposite side = 113.4 – 100 (y coordinate of rectangle’s top border) = 13.4 px
tan 30 degrees = X / 13.4
X = 0.577 * 13.4 = 7.7318
x-coordinate = 250 – 7.7318 = 242.2682

As you can see from the SVG code snippet below, this is the same value as the one I arrived through trial and error using Inkscape and a mouse pointer.

			<line x1="242" y1="100" x2="358.2" y2="300" />

QED

 

#  #  #