-1

for a data visualization im aligning n-circels on a circle. That just works fine - but i dont't know how to stop the circles overlapping each other. Anybody here knows howto?

The result should work like this sketch:

Link: http://www.xup.to/dl,79345003/sketch.jpg

So i dont know how to calculate the angle for the second node - based on the radius an position of the first node - and the radius of the second ...

JSFIDDLE to show what i mean: http://jsfiddle.net/0z9hyvxk/

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);

canvas.width  = 500;
canvas.height = 500;

var midx     = 250;
var midy     = 250;
var radius   = 200;
var angle    = 0;
var count    = 30;
var step     = 2 * Math.PI / count;
var xpos;
var ypos;
var nodeSize;

var node = function(size){
    var dot = new createjs.Shape();
        dot.graphics.beginFill("#000").drawCircle(0, 0, size);
        dot.x = dot.y = -5;
        dot.alpha = .25;

    return dot
};

for(var i = 0; i<count; i++)
{
    xpos = radius * Math.cos(angle) + midx;
    ypos = radius * Math.sin(angle) + midx;

    nodeSize = i;

    var n = new node(nodeSize);
        n.x = xpos;
        n.y = ypos;
    stage.addChild(n)

    angle += step;
}

stage.update();

thanks in advance simon

SimonGG
  • 1
  • 2

1 Answers1

0

Your program does not make corrections based on circle sizes and angle. Smaller circles are too far from each other, bigger ones are too close.

r1 = radius of the n-th small circle
r2 = radius of the (n+1)-th small circle.
r3 = radius of the (n+2)-th small circle

r1<r2<3, so angle between 1 and 2 is smaller than between 2 and 3.

Try to tangentially increase angle correction. I can't test code at work :(

  • So begin with small angle and keep track of correction value. –  Nov 17 '14 at 16:38
  • First: Thank you for taking time - now i have to admit: i really dont know how to do that. And the nodes wont be linear scaling - i added a link in the orignal post - to sketch out what i mean - best simon – SimonGG Nov 17 '14 at 17:28