I have created an logarithmic spiral in HTML canvas, and plotted circles along it. Using your mouse scroll wheel you can zoom in and out of the spiral (which works) – but I am having problems updating the size of the circles to match the zoom level... I'm no math expert!
There are two values I am using when trying to calculate the circle radius:
The initial size: This makes circles smaller the further down the spiral they are. I think I have this pretty close.
The growth size: This is the amount that each circle must increase to accurately grow in size as it gets closer to the viewer. Currently circles seem to be the correct size at the beginning and end of the spiral, but are too small in the middle.
I have hacked together some janky math and I'm sure there is an actual formula for this sort of sizing. Any help would be greatly appreciated...
Here is a jsFiddle for reference
// a = starting radius of spiral (2)
// b = windiness of spiral (0.05)
// spiralNum = spiral length (100.6)
// node_count_visible = number of total circles (120)
// timeOffset = scroll/zoom position at any given point (ranges from 0 to 530 when zoomed in)
offset = (spiralNum - 0.05 - node_count_visible) + id + (timeOffset/30);
var initial = Math.exp(b * offset)/4; // Eulers constant to the power of (b * offset)
var growth = a / 8.5; // This gives a rough approximation of size
node.radius = initial + growth;
Thank you in advance for any help provided...
The formula used for the spiral is $r=a\cdot e^{b\cdot\phi}$. The arc below and above a selected arc have radii $r_\pm=a\cdot e^{b\cdot(\phi\pm2\pi)}$.
The radius of a circle on the arc should be proportional to $r$, say $c⋅r$, with the condition that circles on neighboring arcs do not overlap, $$ r_-+c⋅r_-\le r-c⋅r\land r+c⋅r\le r_+-c⋅r_+ $$ where both of them are the same condition $$ (1+c)\le(1-c)e^{b⋅2\pi} \iff c\le \frac{e^{b⋅2\pi}-1}{e^{b⋅2\pi}+1}=\tanh(b⋅\pi). $$
So select a $c$ satisfying this condition and use proportional circles.