Dynamic Sizing of Circles Along a Spiral

Question

I have created an logarithmic spiral in 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 – I just want the circles to feel "attached" to the spiral and scale appropriately.

---

Here is the 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 any help provided...

Answer 1

I was able to get an affect 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.