キャンバスに対数螺旋を作成し、それに沿って円をプロットしました。マウスのスクロール ホイールを使用して、スパイラルをズーム インおよびズーム アウトできます (これは機能します)。ただし、ズーム レベルに合わせて円のサイズを更新するのに問題があります... 私は数学の専門家ではありません!
円の半径を計算しようとするときに使用する 2 つの値があります。
初期サイズ:これにより、円はらせんの下にあるほど小さくなります。私はこれにかなり近いと思います。
成長サイズ:これは、各円が視聴者に近づくにつれてサイズが正確に拡大するために増加する必要がある量です。現在、円はらせんの最初と最後では正しいサイズに見えますが、中間では小さすぎます。
私はいくつかのぎこちない数学をハックしましたが、この種のサイジングには実際の公式があると確信しています. 任意の助けをいただければ幸いです。円がスパイラルに「取り付けられている」と感じて、適切にスケーリングしたいだけです。
// 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;
提供されたヘルプについて事前に感謝します...