How to draw an arc between two points on a map

General Discussion Other

blackrazor

How to draw an arc between two points on a map

in General Discussion • Other • 6 months ago

I am working on a project in processing with twitter. I am trying to visualize how topics spreads on twitter. For this I need to draw an arc or curve between two points on the map. I am using MercatorMap to display point on the map with geocoding from google api's.

I am not able to find anything which can be helpful in drawing an arc between two points on the map. Can someone point me to the right direction. Furthermore I want to draw this with animation.

I am trying to achieve something like this:

Thanks.

Replies(10)

Chrisir

Re: How to draw an arc between two points on a map

6 months ago

maybe these funcs can help you....

void setup()
{
size( 800, 800, P3D );
} // setup
void draw()
{
// myCurveTest() ;
PVector firstpoint = new PVector (120, 320, -30);
PVector secondpoint = new PVector (320, 220, -30);
myCurve (firstpoint, secondpoint ) ;
firstpoint = new PVector (420, 220, 30);
secondpoint = new PVector (620, 120, -30);
myCurve (firstpoint, secondpoint ) ;
}
//
//
//===============================================================================
//
//
void myCurve (
PVector firstpoint,
PVector secondpoint) {
PVector beginningcontrolpoint = new PVector (120, firstpoint.y+1200, -30);
PVector endingcontrolpoint = new PVector (720, secondpoint.y+1200, -30);
myPointPVector(beginningcontrolpoint, color(255, 0, 0));
myPointPVector(firstpoint, color(0, 0, 255));
myPointPVector(secondpoint, color(0, 0, 255));
myPointPVector(endingcontrolpoint, color(255, 0, 0));
stroke (255);
noFill();
curve(
beginningcontrolpoint.x, beginningcontrolpoint.y, beginningcontrolpoint.z,
firstpoint.x, firstpoint.y, firstpoint.z,
secondpoint.x, secondpoint.y, secondpoint.z,
endingcontrolpoint.x, endingcontrolpoint.y, endingcontrolpoint.z);
}
//
void myCurveTest () {
PVector beginningcontrolpoint = new PVector (120, 620, -30);
PVector firstpoint = new PVector (120, 320, -30);
PVector secondpoint = new PVector (320, 220, -30);
PVector endingcontrolpoint = new PVector (720, 720, -30);
myPointPVector(beginningcontrolpoint, color(255, 0, 0));
myPointPVector(firstpoint, color(0, 0, 255));
myPointPVector(secondpoint, color(0, 0, 255));
myPointPVector(endingcontrolpoint, color(255, 0, 0));
stroke (255);
noFill();
curve(
beginningcontrolpoint.x, beginningcontrolpoint.y, beginningcontrolpoint.z,
firstpoint.x, firstpoint.y, firstpoint.z,
secondpoint.x, secondpoint.y, secondpoint.z,
endingcontrolpoint.x, endingcontrolpoint.y, endingcontrolpoint.z);
}
void myPointPVector (PVector test, color col1) {
MyBox(test.x, test.y, test.z,
test.x+3, test.y, test.z,
9,
col1);
}
void MyBox(float x1, float y1, float z1, float x2, float y2, float z2, float weight, color strokeColour)
// was called drawLine; programmed by James Carruthers
// see http://processing.org/discourse/yabb2/YaBB.pl?num=1262458611/0#9
{
PVector p1 = new PVector(x1, y1, z1);
PVector p2 = new PVector(x2, y2, z2);
PVector v1 = new PVector(x2-x1, y2-y1, z2-z1);
float rho = sqrt(pow(v1.x, 2)+pow(v1.y, 2)+pow(v1.z, 2));
float phi = acos(v1.z/rho);
float the = atan2(v1.y, v1.x);
v1.mult(0.5);
pushMatrix();
translate(x1, y1, z1);
translate(v1.x, v1.y, v1.z);
rotateZ(the);
rotateY(phi);
noStroke();
fill(strokeColour);
box(weight, weight, p1.dist(p2)*1.2);
popMatrix();
}
//

blackrazor

Re: Re: How to draw an arc between two points on a map

6 months ago

This works great! Thanks a lot :)

But I am unable to understand few part in the code like:

PVector beginningcontrolpoint = new PVector (120, firstpoint.y+1200, -30);

PVector endingcontrolpoint = new PVector (720, secondpoint.y+1200, -30);

From where do you get 120 and 720 values and also why -30 only ?

And do you have any idea how can I draw this arc with animation ?

ramin

Re: How to draw an arc between two points on a map

6 months ago

to explain it in 2d you can do it like this.

take the straight line L1 between the 2 points.

take the point C that is in the middle between the 2 points (obviously it is on the line L1)

take the line L2, which goes through C and is orthogonal to L1.

Now you can take any point P on the line L2 as center of your arc.

calculate the angle between P and the two points to get the angles for the arc.

if you would take C itself for example your angles would be 0 and PI and you would get a half circle.

the larger the distance of your center P and C is the flatter your arc will be.

I hope that helps. If not I could deliver some code :)

blackrazor

Re: Re: How to draw an arc between two points on a map

6 months ago

Great. My initial thoughts were also on these tracks but I was not sure if it will work.

Can you please share some code on this. It will be very helpful :)

ramin

Re: How to draw an arc between two points on a map

6 months ago

well I mean the arc can get flatter or fatter

, depening on the direction of your arc.

Chrisir

Re: How to draw an arc between two points on a map

6 months ago

the -30 etc. is stuff for the control points. other than start and end point, they define the form of the curve

read the reference on this and on curvepoints

blackrazor

Re: How to draw an arc between two points on a map

6 months ago

@Chrisir:

Do you have any idea about how I can animate the curve so that I can see them getting drawn on the map.

Thanks.

Chrisir

Re: How to draw an arc between two points on a map

6 months ago

read reference about curvepoints as said

the numbers like -30 you also have to replace with better values for the current arc

Chrisir

Re: How to draw an arc between two points on a map

6 months ago

I also noted that in my code the points are all 3D.

You probably need only 2D?

Chrisir

Re: How to draw an arc between two points on a map

6 months ago

see also

taken from here
http://forum.processing.org/topic/animation-with-curve#25080000001946133

this whole thread is interesting for you!

int increment=0;
int resolution=100;
public void setup()
{
size(600, 600);
}
public void draw()
{
background(255);
for (int i=0; i<increment;i++)
{
float t1 = i / (float)resolution;
float t2 = (i+1)/ (float)resolution;
float x1 = curvePoint(5, 73, 73, 15, t1);
float y1 = curvePoint(26, 24, 61, 65, t1);
//
float x2 = curvePoint(5, 73, 73, 15, t2);
float y2 = curvePoint(26, 24, 61, 65, t2);
line(x1, y1, x2, y2);
}
if (increment<=resolution)
increment++;
}

Top Reply