Reprise
My project is to create an SVG-based backdrop in the style of a cutting mat for software engineers (well me, not really anyone else, apologies for being selfish).
As covered in the previous posts, I have a grid drawn in grey (#777) on top of a background colour (#191662) of Engineer's blue. There is also a by-line, a reference to creative-commons licencing and, in the latest update, a rendering of some common screen resolutions.
In this penultimate post I will be adding some additional radial lines aligned to the following Aesthetic Ratios.
| Aesthetic ratio | Ratio | Formulae |
|---|---|---|
| Golden Ratio (aka Fibonacci) | 1.618 | (1 + sqrt(5))/2 |
| Silver Ratio | 2.414 | (1 + sqrt(2)) |
| Pythagorean Hypotenuse | 1.414 | sqrt(2) |
| Vitruvian Coefficient | 1.128 | 2/sqrt(pi) |
The effect of the Golden and Silver ratios on art and architecture are well documented but the other ratios might not be quite so familiar.
Given a unit right-angle triangle with two sides of length 1, the longest side (known as the hypotenuse) will have a length of 1.414 as calculated by the formula sqrt(2).
The "Vitruvian Coefficient" is a ratio all of my own creation, which I will explain, for those that might be interested, later in this post.
I will release the cutting-mat SVG image at the end of each stage via my GitHub repo.
Aesthetic Ratios
All four ratios will be plotted as a line radiating from the bottom-left corner (coordinate x:0, y:800). The end point of each ratio will be calculated by multiplying the height of the grid (which is 800px) by the ratio and deducting it from the origin as follows.
| Aesthetic ratio | Ratio | Width |
|---|---|---|
| Golden Ratio (GR) | 1.618 | 1294 |
| Silver Ratio (SR) | 2.414 | 1931 |
| Pythagorean Hypotenuse (PH) | 1.414 | 1131 |
| Vitruvian Coefficient (VC) | 1.128 | 902 |
The maximum width is 1280px so only VC and PH will intersect with the top of the grid (Y = 0). The ratios GR and SR will have to intersect with the right edge so alternative values for the Y coordinate will be required.
GR(Y) = 1280 / 1.618 = 791, deducted from the origin = 9px.
SR(Y) = 1280 / 2.414 = 530, offset = 270px.
As with the Standard angles in the previous post, there are arcs connecting the line with the edge but in place of the Sine of the angle being shown I have presented the value of each aesthetic ratio.
Vitruvian Coefficient (VC)
As promised at the beginning of this post, I will now explain my thinking behind the ratio I call the "Vitruvian Coefficient". It is based on Leonardo da Vinci's diagram called The Vitruvian Man where there are two representations of a man, one overlaying the other with arms and legs stretched out. Both figured are enclosed within a square and a circle with each figure touching one or the other.
When I first saw the diagram as a child it raised a question in me that for which I have only relatively recently calculated an answer.
My query is, given a square and a circle of the same area, is there a relationship between their:
- outsides (circumference v perimeter)
- width (diagram v side) But the answer was even more surprising than I was expecting.
If the area (A) of both shapes is 120m the dimensions of the square are:
- Side (S) = SQRT(A) = 10.95
- Perimeter (P) = 4 x S = 43.82
The dimensions of the circle are:
- Area = PI * R * R, therefore, SQRT(A / PI) = R
- Diameter (D) = 2 * SQRT(A / PI) = 12.36
- Circumference (C) = D * PI = 38.83
But the real surprise for me came when I went on to compare the outsides and the widths.
- Perimeter / Circumference = 43.82 / 38.83 = 1.128 (rounded down)
- Diameter / Side = 12.36 / 10.95 = 1.128 (rounded down)
Both equations have the same result but there was a trick here. For the outside calculation we used the dimension of the square over the circle. For the width we used the dimension of the circle over the square. Don't ask me why, I am not a mathematician, but when I worked the equations out by hand to find the approximate value 1.128 is confirmed to be 2/SQRT(PI).
So what use is VC?
For a square and circle of the same area,
VC = Perimeter / Circumference = Diameter / Side = 2/SQRT(PI)
Well, if you have a square and you want a circle of the same area you can multiply VC by the Side of the square to get the Diameter of the circle, which is of course twice the radius of the required circle.
If you have a circle and you want a square you can multiply the Circumference of the circle by VC to get the Perimeter of the square, which, similar to before, is four times the length of the side of the square.
Not Earth-shattering I know, but I found it interesting and it could be useful.
Closing the project
In the next and final post in this series I will be adding a couple of diagrams. One illustrating the VC as described above, the other presenting an Egyptian Triangle.
Top comments (0)