Math Behind Creating a "Perfect" Star

Question

I am busy looking to create star paths in my app, and I was wondering how to determine the ratio between the inner radius and the outer radius of the points of a star so that the star has "straight" lines across.

I have a function that takes 3 parameters:

pointCount = 5
outerRadius = 100
innerRadius = 50

Basically it goes around the circle and alternates between a point and an inside so the star looks like this:

As you can see, the star is "bulging". What I am really trying to get is this star:

There should be some mathematical formula that can take the "outer" radius and the number of points to calculate the "inner" radius?

innerRadius = some_operation (pointCount, outerRadius)

Answer 1

I think you are trying to draw a pentagram. While the linked page has many properties of that shape, some of them which would be of interest to you are: $$R = \sqrt{\frac{1}{10}\big(25 - 11\sqrt{5}\big)} \\ \rho = \sqrt{\frac{1}{10}\big(5 - \sqrt{5}\big)}$$ where $R$ is the inner radius and $\rho$ is the outer radius. This assumes that the long edges of the star are of length 1.

You could always scale these numbers if the edges are not of length 1. But as you're interested in the ratio, we have $$\frac{\rho}{R} = \sqrt{\frac{5 - \sqrt{5}}{25 - 11\sqrt{5}}} = \frac{3 + \sqrt{5}}{2}$$ In addition to being a surprisingly clean simplification, note that the ratio is $\phi + 1$ where $\phi$ is the famous golden ratio!

Answer 2

I do not think the point count unambiguously determines what star you are talking about, consider a 7 pointed star, there are 2 ways this can be constructed as shown in the Wikipedia link provided by dxiv. Related to that, for large n, there is more than one candidate for "inner radius". If by the inner radius, you mean the point you would reach by only showing the outer edge of the star we can compute this radius using the number of points $n$, and the number of points $m$ ahead each line is connecting to. We will assume that $1<m<\frac{n}{2}$, though allowing $m=1$ would not be terrible. For example, in the 5 pointed star you displayed, we would have $n=5$ and $m=2$.
Consider $n$ evenly spaced points on the unit circle, with one at $(1,0)$, then for $k = 0, ... , n-1$, these points have coordinates $\left(\cos( \frac{2 \pi k}{n} ),\sin(\frac{2 \pi k}{n})\right)$. In particular, one of the lines we wish to consider is the line connecting the points $(1,0)$ to $\left(\cos( \frac{2 \pi m}{n} ),\sin(\frac{2 \pi m}{n})\right)$, this line has the equation $$y = \frac{\sin(\frac{2 \pi m}{n})}{\cos( \frac{2 \pi m}{n} ) - 1}(x-1)$$ Since the inner point we are looking for is exactly between adjacent outer points, it will lie both on the line above, and on the line $$y = \tan(\frac{\pi}{n}) x.$$ Some algebra can get you a solution for x, and then using that value, observe that on this second line, we have $$r = \frac{x}{\cos(\frac{\pi}{n})},$$ which gives the inner radius when the outer radius is 1.

Answer 3

Star has $n$ points. The outer points of the star are $(x_k, y_k) =(\cos \frac {2\pi*k}n, \sin \frac {2\pi*k}n)$. $(x_k, y_k)$ connects to $(x_{k+2\%n},y_{k+ 2\%n})$.

So formula for the line $(x_k, y_k)-(x_{k+2\%n},y_{k+ 2\%n})$ is:

$y = \sin \frac {2\pi*k}n + (x - \cos \frac {2\pi*k}n)\frac{\sin \frac {2\pi*(k+2) \%n}n-\sin \frac {2\pi*k}n}{\cos \frac {2\pi*(k+2) \%n}n-\cos \frac {2\pi*k}n}$

and the formula for line $(x_{k-1\%n},y_{k-1\%n})-(x_{k+1\%n},y_{k+ 1\%n})$ is:

$y = \sin \frac {2\pi*(k-1\%n)}n + (x - \cos \frac {2\pi*k}n)\frac{\sin \frac {2\pi*(k+1\%n) \%n}n-\sin \frac {2\pi*(k-1\%n)}n}{\cos \frac {2\pi*k+1 \%n}n-\cos \frac {2\pi*(k-1\%n)}n}$

Calculate the point of intersection (thank god for machines)

Use the distance formula to find distance between to out points and these inner point of intersect. (Did I say thank god for machines? Let me say it again.)

If you just want the distance I suggest you do $k = 0$.

Answer 4

$$ a = \frac{\pi}{\text{pointCount}} \qquad b = \frac{\pi}{2} - \frac{\pi}{\text{pointCount}} \qquad c = \frac{2\pi}{\text{pointCount}} \\[15pt] $$

Unfortunately it isn't marked in the image, but let's call the shared side of the two triangles $x$. Radius 1 is $\text{outerRadius}$ and Radius 2 is $\text{innerRadius}$

$$ x\tan b + x\tan c = \text{outerRadius} \\[5pt] x (\tan b + \tan c) = \text{outerRadius} \\[10pt] x = \frac{\text{outerRadius}}{\tan b + \tan c} \\[15pt] x = \frac{\text{outerRadius}}{\tan\left( \frac{\pi}{2} - \frac{\pi}{\text{pointCount}} \right) + \tan \frac{2\pi}{\text{pointCount}}} \\[55pt] \sin a = \frac{x}{\text{innerRadius}} \\[15pt] \text{innerRadius} = \frac{x}{\sin a} \\[15pt] \text{innerRadius} = \frac{\text{outerRadius}}{\sin \frac{\pi}{\text{pointCount}}\left[\tan\left( \frac{\pi}{2} - \frac{\pi}{\text{pointCount}} \right) + \tan \frac{2\pi}{\text{pointCount}}\right]} \\[15pt] $$

I just wrote some code in Unity C# to draw a 5-point star the same way you're wanting to. My code to calculate the inner radius looks like this (note that it's simpler because there's no need for a pointCount variable):

innerRadius = halfSize / ( ( Mathf.Tan ( Mathf.PI * 0.4f ) + Mathf.Tan ( Mathf.PI * 0.3f ) ) * Mathf.Sin ( Mathf.PI * 0.2f ) );