Curves between points on a circle.

Programming Questions

himseelf

Curves between points on a circle.

in Programming Questions • 2 years ago

Hi there,

I'm doing a visualization which looks at correlation percentages of nodes, which are laid out around a circle. At the moment, the correlations are represented by straight lines between the nodes, but for added clarity I'm wanting to use curved lines.

My geometry is worst than most 14 year olds, and I was wondering if anyone could help me with this? I've had a look at arc() and had a wee look at Toxiclib, but I'm unsure of where to start.

As an example of the kind of thing I'm looking to achieve, I'm hoping to achieve something like Karin von Ompteda and Peter Crnokrak's map of institutional partners of the RCA.

Any pointers, even for where to start with this, would be much appreciated.

Replies(2)

cedrickie..

Re: Curves between points on a circle.

2 years ago

its actually pretty easy. You can use the bezier() function to draw these curves.
you need the start and end point of the line and the position of the two ankerpoints.
depending how curved your line should be the position might change.
i made a little example sketch where you can see it. I am calculating the points using sin and cos
i do the same for the ankerpoints but with a different radius.
you can change this radius with your mouseX position to see how the curve changes.
you can also change the connecting line by changing mouseY or clicking.

Hope that helps.

int steps = 50; // number of circle steps;
float radius = 200;
float radius2 = 100; //radius for ankerpoints

// which points to connect / change on mouseclick
int r1 = 30; // number of starting point
int r2 = 10; // number of end point

void setup() {
size(800,800);
smooth();
noStroke();
textAlign(CENTER);
}

void draw() {
background(255);
fill(0);
noStroke();

radius2 = map(mouseX,0,width,-200,400);
r1 = (int)map(mouseY,0,height,0,120);
//drawing the points
for(int i = 0;i < steps; i++) {

    float x = width/2+sin( TWO_PI/steps*i)*radius;
    float y = height/2+cos( TWO_PI/steps*i)*radius;
    ellipse(x,y,4,4);
}

//pick two points (r1+r2) and connect.
float startX = width/2+sin( TWO_PI/steps*r1)*radius;
float startY = height/2+cos( TWO_PI/steps*r1)*radius;
float endX = width/2+sin( TWO_PI/steps*r2)*radius;
float endY = height/2+cos( TWO_PI/steps*r2)*radius;

float cX1 = width/2+sin( TWO_PI/steps*r1)*radius2;
float cY1 = height/2+cos( TWO_PI/steps*r1)*radius2;
float cX2 = width/2+sin( TWO_PI/steps*r2)*radius2;
float cY2 = height/2+cos( TWO_PI/steps*r2)*radius2;

stroke(255,0,0);
noFill();
bezier(startX,startY,cX1,cY1,cX2,cY2,endX,endY);

//draw ankerpoints
stroke(110);
line(cX1,cY1,startX,startY);
line(cX2,cY2,endX,endY);
noStroke();
fill( 0);

ellipse(cX1,cY1,5,5);
ellipse(cX2,cY2,5,5);
}

void mouseClicked() {
r1 = (int)random(steps);
r2 = (int)random(steps);
}

himseelf

Re: Re: Curves between points on a circle.

2 years ago

Perfect, I knew it would be something simple...

Having said that, I was wondering if you could explain how it works out the control point co-ordinates:

float cX1 = width/2+sin( TWO_PI/steps*r1)*radius2;
float cY1 = height/2+cos( TWO_PI/steps*r1)*radius2;
float cX2 = width/2+sin( TWO_PI/steps*r2)*radius2;
float cY2 = height/2+cos( TWO_PI/steps*r2)*radius2;

I inserted this code using my own variables for the number of nodes (steps) and each selected point (r1/r2), but I was having problems all day until i reversed the sin/cos statements, when it started working perfectly! Its working fine now, but I'd like to know a little more, to improve my terrible geometry.

Thanks again! Here's an unrefined preview of what I'm working on...