Dynamic calibration of circles along a spiral

Question

I created a logarithmic spiral in the canvas and drew circles around it. Using the mouse’s scroll wheel, you can increase and decrease the size of the spiral (which works) - but I am having problems updating the size of the circles according to the zoom level ... I am not an expert in mathematics!

There are two values ​​that I use when trying to calculate the radius of a circle:

Original size: . The smaller the circles, the lower their spiral. I think I have it pretty close.

Growth Size: . This is the amount that each circle must increase in order to grow precisely as it approaches the viewer. At present, the circles seem right at the beginning and end of the spiral, but are too small in the middle.

I hacked some janky math, and I'm sure there is a real formula for this kind of calibration. Any help would be greatly appreciated - I just want the circles to feel “attached” to the spiral and scale accordingly.

---

Here is jsFiddle for reference

// a = starting radius of spiral
// spiralNum = spiral length (100.6)
// timeOffset = scroll position
// node_count_visible = number of total circles

offset = (this.spiralNum - 0.05 - this.node_count_visible) + id + (this.timeOffset/30);

var initial = Math.exp(b * offset)/4;
var growth = (a/8.5);
node.radius = initial + growth;

---

Thank you in advance for your help ...

Answer 1

I was able to get the effect you are looking for by doing

node.radius = a * Math.exp(b * offset)/6;

6 is an arbitrary number to adjust the size of the circle.