Draw an animated curve between two points on a map

asimes

Re: Draw an animated curve between two points on a map

6 months ago

float a, rad;
void setup() {
size(600, 600);
rad = 200;
}
void draw() {
background(255);
arc(width>>1, height>>1, rad, rad, 0, a);
if (a < PI) a += PI/100;
}
void mousePressed() {
a = 0.0;
}

Edit: I drew the arc() centered on the screen, if you wanted it to draw from one point to another you would find the the center of the two points and draw the arc() from there. The radius would be the distance from the center to either point.

ramin

Re: Draw an animated curve between two points on a map

6 months ago

hey,

sorry i thought I would follow the topic and get its updates...

anyway,

this code doen't look very clean, but it shows more or less how it works

float arcStrength = 120;
Curve curve = new Curve();
void setup() {
size(800, 600);
ellipseMode(RADIUS);
noFill();
createCurve(b, a);
}
PVector a = new PVector(100, 200);
PVector b = new PVector(400, 300);
void draw() {
background(0);
curve.update();
}
void createCurve(PVector a, PVector b) {
// we want a on the left side, so switch them if its not
if (a.x> b.x) {
PVector c = a;
a = b;
b = c;
}
PVector center = PVector.lerp(a, b, 0.5f);
// the direction of the orthogonal line (L2)
PVector dir = PVector.sub(b, a);
dir.rotate(HALF_PI);
dir.setMag(arcStrength);
// the center of the curve circle:
curve.m = PVector.add(center, dir);
curve.radius = curve.m.dist(a);
curve.angleA = angleTowards(curve.m, a);
curve.angleB = angleTowards(curve.m, b);
if (curve.angleA>curve.angleB) {
float altA = curve.angleA;
curve.angleA = curve.angleB;
curve.angleB = altA;
}
println(degrees(curve.angleA)+","+degrees(curve.angleB));
}
float angleTowards(PVector a, PVector b) {
float v = atan2(b.y-a.y, b.x-a.x);
if (v<0)
v = TWO_PI +v;
return v;
}
public class Curve {
PVector m;
float angleA, angleB, radius;
float progress;
void update() {
stroke(255, 0, 255);
ellipse(curve.m.x, curve.m.y, 3, 3);
stroke(255, 0, 0);
ellipse(a.x, a.y, 3, 3);
stroke(0, 255, 0);
ellipse(b.x, b.y, 3, 3);
float a2 = lerp( angleA, angleB, progress/100f);
arc(curve.m.x, curve.m.y, curve.radius, curve.radius, angleA, a2);
if (progress<100)
progress++;
}
}

asimes

Re: Draw an animated curve between two points on a map

6 months ago

I was looking at this again and realized this is more complicated than my instructions suggested earlier. Here is a new version, draws a clockwise arc() between two points:

PVector c, p1, p2;
float aMin, aMax, r, t;
void setup() {
size(600, 600);
noFill();
reset();
}
void draw() {
background(255);
// The center
stroke(128);
ellipse(c.x, c.y, 10, 10);
// The random points
stroke(255, 0, 0);
ellipse(p1.x, p1.y, 10, 10);
ellipse(p2.x, p2.y, 10, 10);
// Interpolate between aMin and aMax
float ta = aMin+t*(aMax-aMin);
arc(c.x, c.y, r*2, r*2, aMin, ta);
if (t < 1.0) t += 0.01;
else t = 1.0;
}
void mousePressed() {
reset();
}
void reset() {
// Make two random points
p1 = new PVector(random(width), random(height));
p2 = new PVector(random(width), random(height));
// Find the center
c = new PVector((p1.x+p2.x)/2, (p1.y+p2.y)/2);
// Determine the radius
r = sqrt(sq(c.x-p1.x)+sq(c.y-p1.y));
// I'm going to draw a clockwise arc()
// so I want to know the min and max angle
float a1 = atan2(p1.y-c.y, p1.x-c.x);
if (a1 < 0) a1 = map(a1, -PI, 0, PI, TWO_PI);
float a2 = atan2(p2.y-c.y, p2.x-c.x);
if (a2 < 0) a2 = map(a2, -PI, 0, PI, TWO_PI);
aMin = min(a1, a2);
aMax = max(a1, a2);
// Reset Parametric t
t = 0;
}

blackrazor

Re: Draw an animated curve between two points on a map

5 months ago

Thanks a lot for your replies.

I tried to use these code snippets in my project and I was successful to do the animation. But sadly this is not what I want. All the above example are based on arc() which only supports x and y axis. I also want z axis because I want my curve to come out on z axis and then turn and fall back to destination point.

My current output is like this:

As you can see the curve comes out in z axis also which gives them a look as they grow up from the my 2D map and then go down to destination point. I am using PeasyCam for the camera movement. I just want to animate this curve thats all. Can someone help me out with this.

Here is the code which I use to make these curves. This code was provided by Chrisir.

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();
}
//

All I want to do is to animate the drawing of curve so that I can see them being drawn.

Thanks.

Chrisir

Re: Draw an animated curve between two points on a map

5 months ago

see
https://forum.processing.org/topic/animation-with-curve

blackrazor

Re: Re: Draw an animated curve between two points on a map

5 months ago

I have followed that thread and tried the concepts in it but I am not able to do. First of all the examples there are in 2D whereas I want to have it in 3D the way myCurve behaves in perfect for me. It comes up in z axis til middle of the curve and then drops in z axis to read to destination point.

I also tried to integrate the animation part of the code snippet given in the link to myCurve but failing terribly

Chrisir

Re: Draw an animated curve between two points on a map

5 months ago

I found this code on the forum

It's not by me.

Click the mouse to make new curves.

//
int centerX = 0, centerY = 0, offsetX = 0, offsetY = 0;
float zoom = (float) 1.5;
PImage map;
float beginX = (float) 428.0; // Initial x-coordinate
float beginY = (float) 218.0; // Initial y-coordinate
float endX = (float) 570.0; // Final x-coordinate
float endY = (float) 320.0; // Final y-coordinate
float distX; // X-axis distance to move
float distY; // Y-axis distance to move
float exponent = 71; // Determines the curve
float x = (float) 0.0; // Current x-coordinate
float y = (float) 0.0; // Current y-coordinate
float step = (float) 0.01; // Size of each step along the path
float pct = (float) 0.0; // Percentage traveled (0.0 to 1.0)
Table schedule;
Table schedule2;
int rowCount;
//mini clock
int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;
PVector Delhi, Mumbai, Chennai;
PVector v1, v2, v3;
static final long MILLIS_PER_DAY = 24 * 60 * 60 * 1000;
int resolution=100;
int increment=0;
public void setup()
{
size(1024, 709);
noStroke();
//String[] lines = loadStrings("Indigo Flights.tsv");
//PVectors
Delhi = new PVector(428, 218);
Mumbai = new PVector(169, 310);
Chennai = new PVector(219, 437);
v1 = new PVector(random(-2, 2), random(-2, 2));
map = loadImage("map2.jpg");
distX = endX - beginX;
distY = endY - beginY;
//clock
int radius = min(width, height) / 12;
secondsRadius = (float) (radius * 0.72);
minutesRadius = (float) (radius * 0.60);
hoursRadius = (float) (radius * 0.50);
clockDiameter = (float) (radius * 1.2);
cx = (width + 10550) / 12;
cy = height / 12;
}
public void draw()
{
fill(127, 80);
rect(0, 0, width, height);
fill(0);
//strokeWeight(2);
//image(map, 0 ,0);
clock();
display();
}
public void mousePressed()
{
increment=0;
pct = (float) 0.0;
beginX = x;
beginY = y;
endX = mouseX;
endY = mouseY;
distX = endX - beginX;
distY = endY - beginY;
System.out.println("Inicio: "+beginX+", "+beginY);
System.out.println("Fim: "+endX+", "+endY);
System.out.println("(" + (float)(mouseX/width) + "," + (float)(mouseY/height) + ")");
}
public void display()
{
stroke(0);
for (int i=0; i<increment;i++)
{
float t1 = i / (float)resolution;
float t2 = (i+1)/ (float)resolution;
float x1 = curvePoint(beginX-640, beginX, endX, endX-40, t1);
float y1 = curvePoint(beginY-140, beginY, endY, endY-40, t1);
float x2 = curvePoint(beginX-640, beginX, endX, endX-40, t2);
float y2 = curvePoint(beginY-140, beginY, endY, endY-40, t2);
line(x1, y1, x2, y2);
}
if (increment<=resolution)
{
float t1 = increment / (float)resolution;
float t2 = (increment+1)/ (float)resolution;
float x1 = curvePoint(beginX-40, beginX, endX, endX-40, t1);
float y1 = curvePoint(beginY-40, beginY, endY, endY-40, t1);
float x2 = curvePoint(beginX-40, beginX, endX, endX-40, t2);
float y2 = curvePoint(beginY-40, beginY, endY, endY-40, t2);
pct=t2;
x=x2;
y=y2;
increment++;
line(x1, y1, x2, y2);
}
//ellipse(x, y, 10, 10);
}
public void clock()
{
fill(21, 37, 193);
noStroke();
ellipse(cx, cy, clockDiameter, clockDiameter);
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
stroke(255);
strokeWeight(1);
line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
strokeWeight(2);
line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
strokeWeight(4);
line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
// minute
strokeWeight(2);
beginShape(POINTS);
for (int a = 0; a < 360; a+=6)
{
float angle = radians(a);
float x = cx + cos(angle) * secondsRadius;
float y = cy + sin(angle) * secondsRadius;
vertex(x, y);
}
endShape();
}

blackrazor

Re: Re: Draw an animated curve between two points on a map

5 months ago

Yes I tried this thing.

But it just draws a simple line (they use the curve point function but the ellipse move very much in a straight line on xy plane. I want a curve in XYZ plane so that the curve moves out of the 2D map from the beginning point and then move down to the end point like a peak of mountain. As it happens in this video.

Jus t Landed - 36 Hours from blprnt on Vimeo .

The the rising of curve has to be on Z plane and this is important because if two points are very close on the map and the curve gets drawn only on XY plane then it is very hard to notice that they are connected.

Here is an example of what I am talking about. In this video 2D curve is drawn with animation.

http://videobam.com/OLFyj

As I said the problem is when points are connected.

Chrisir

Re: Draw an animated curve between two points on a map

5 months ago

you increase the height of a curve if you increase the value of 40/140/640 here to 1340 or so

maybe you make a formula that says

the closer the 2 points are, the higher is the value for 140....

of course you need to bring this into 3D but this easy:
Where it says

float y1 = curvePoint(beginY-140, beginY, endY, endY-40, t1);
float x2 = curvePoint(beginX-640, beginX, endX, endX-640, t2);

just add the line for z :

float z2 = curvePoint(beginZ-640, beginZ, endZ, endZ-640, t2);

etc.

you increase the height of a curve if you increase the value of 40/140/640 here to 1340 or so

float x1 = curvePoint(beginX-640, beginX, endX, endX-640, t1);
float y1 = curvePoint(beginY-140, beginY, endY, endY-40, t1);
float x2 = curvePoint(beginX-640, beginX, endX, endX-640, t2);
float y2 = curvePoint(beginY-140, beginY, endY, endY-40, t2);
line(x1, y1, x2, y2);
}
if (increment<=resolution)
{
float t1 = increment / (float)resolution;
float t2 = (increment+1)/ (float)resolution;
float x1 = curvePoint(beginX-40, beginX, endX, endX-40, t1);
float y1 = curvePoint(beginY-40, beginY, endY, endY-40, t1);
float x2 = curvePoint(beginX-40, beginX, endX, endX-40, t2);
float y2 = curvePoint(beginY-40, beginY, endY, endY-40, t2);

blackrazor

Re: Re: Draw an animated curve between two points on a map

5 months ago

Thanks a lot

Why didn't it click me

It works very nicely.

I will tweak the code a bit to adjust to my needs. I am a bit confused how the for and if are different and what do they exactly control. I am playing with it to understand it.

Also, what do you think should be the value of beginZ ?

{
float t1 = i / (float)resolution;
float t2 = (i+1)/ (float)resolution;
float x1 = curvePoint(beginX-40, beginX, endX, endX-40, t1);
float y1 = curvePoint(beginY-40, beginY, endY, endY-40, t1);
float x2 = curvePoint(beginX-40, beginX, endX, endX-40, t2);
float y2 = curvePoint(beginY-40, beginY, endY, endY-40, t2);
line(x1, y1, x2, y2);
}
if(increment<=resolution)
{
float t1 = increment / (float)resolution;
float t2 = (increment+1)/ (float)resolution;
float x1 = curvePoint(beginX-40, beginX, endX, endX-40, t1);
float y1 = curvePoint(beginY-40, beginY, endY, endY-40, t1);
float x2 = curvePoint(beginX-40, beginX, endX, endX-40, t2);
float y2 = curvePoint(beginY-40, beginY, endY, endY-40, t2);
pct=t2;
x=x2;
y=y2;
increment++;
line(x1, y1, x2, y2);
}

Chrisir

Re: Draw an animated curve between two points on a map

5 months ago

Also, what do you think should be the value of beginZ ?

At the moment the sketch is only a demonstration.
I assume you don't want to use mouse inputs later for the arcs...

If you have geo locations on your map like in the sketch above

//PVectors
Delhi = new PVector(428, 218);
Mumbai = new PVector(169, 310);

you want to have them 3D as well:

//PVectors
Delhi = new PVector(428, 218, -202);
Mumbai = new PVector(169, 310, -111);

So then those are 3D coords.

Use them for beginZ and endZ.

blackrazor

Re: Re: Draw an animated curve between two points on a map

5 months ago

No. I don't need mouse inputs. I am getting user location from twitter and then I am passing them to Google Geo Coding API to get latitude and longitude of the location which becomes my PVector.x and PVector.y. So, I think I will not PVector.z also. This works well to my needs. See it in action here:

http://videobam.com/tjBOk

But I have a problem.

void makeCurve(PVector sPoint, PVector ePoint)
{
stroke (0, 255, 0);
for (int i=0; i<increment;i++)
{
float t1 = i / (float)resolution;
float t2 = (i+1)/ (float)resolution;
float x1 = curvePoint(sPoint.x+300, sPoint.x, ePoint.x, ePoint.x+300, t1);
float y1 = curvePoint(sPoint.y+300, sPoint.y, ePoint.y, ePoint.y+300, t1);
float x2 = curvePoint(sPoint.x+300, sPoint.x, ePoint.x, ePoint.x+300, t2);
float y2 = curvePoint(sPoint.y+300, sPoint.y, ePoint.y, ePoint.y+300, t2);
line(x1, y1, x2, y2);
}
if (increment<=resolution)
{
float t1 = increment / (float)resolution;
float t2 = (increment+1)/ (float)resolution;
float x1 = curvePoint(sPoint.x+300, sPoint.x, ePoint.x, ePoint.x+300, t1);
float y1 = curvePoint(sPoint.y+300, sPoint.y, ePoint.y, ePoint.y+300, t1);
float x2 = curvePoint(sPoint.x+300, sPoint.x, ePoint.x, ePoint.x+300, t2);
float y2 = curvePoint(sPoint.y+300, sPoint.y, ePoint.y, ePoint.y+300, t2);
pct=t2;
x=x2;
y=y2;
increment++;
line(x1, y1, x2, y2);
}
if(increment==resolution)
{
fill (0, 0, 255);
ellipse(ePoint.x, ePoint.y, 10, 10);
}
}

As you can see at the end when the animation is done I am trying to draw an ellipse at the end point but they do not appear in the animation. If you see the video you can notice one blue ellipse which appears in north america and then disappears for all other nothing happen. How can I make it work ?

if(increment==resolution)
{
fill (0, 0, 255);
ellipse(ePoint.x, ePoint.y, 10, 10);
}
}

Chrisir

Re: Draw an animated curve between two points on a map

5 months ago

BTW

when you got a flight from LA to NYC, beginX is smaller than endX

when you got a flight from NYC to LA, endX is smaller than beginX

maybe you have to choose your values for -140 accordingly

so when beginX is smaller than endX you say....

....beginX - 640
....endX + 640

so we make the arc wider?

when endX is smaller than beginX you say....

....endX - 640
....beginX + 640

?

You have to test....

But it's weird that both are -640 and not one -640 and the other +640

Same goes for beginY of course

I have to leave now.

Chrisir

Re: Draw an animated curve between two points on a map

5 months ago

that's a cool video.

Does it show the tweeting person and the locations of the followers of the tweet?

Or what does the destination location represent?

blackrazor

Re: Re: Draw an animated curve between two points on a map

5 months ago

I am trying to visualize how topics spread geographically on twitter.

I use twitter4J to collect most popular tweets (which is most popular three tweets) for a given #tag and then I take the user location of these tweets from the profile. This location is passed to Google Goecoding API to get latitude and longitude which is represented on the world map using MercatorMap. You can see these tweets in red circles.

To visualize the geographical spread of the tweet I collect retweets on these tweets. For every retweet I take the user location and do the geocoding as mentioned earlier. These retweet locations are represented by the animated curve which starts from tweet location and go to retweet location and then get marked by blue circles.

As you might have guessed this takes a lot twitter API queries and I always exceed the rate limit of twitter API so I have broken down my project in two parts. There is one script written in processing which queries and collect data from twitter with periodic time delay to be under the rate limit and the location coordinates are written on a log file.

The another part is the visualization module written in processing which read location coordinates from the log file and visualize it on the map.

You can see the whole thing working here for most popular tweets on #Love

http://videobam.com/CszmT

Chrisir

Re: Draw an animated curve between two points on a map

5 months ago

concerning the blue dots

this it the blue dot....

if(increment==resolution)
{
fill (0, 0, 255);
ellipse(ePoint.x, ePoint.y, 10, 10);
}

try

if(increment>=resolution)
{
fill (0, 0, 255);
ellipse(ePoint.x, ePoint.y, 10, 10);
}

or store all ellipses position in an extra array and show them in a new function.

blackrazor

Re: Re: Draw an animated curve between two points on a map

5 months ago

Thanks. As you can see in the video it works now.

Thanks a lot for you help. I really appreciate it.

v.k.

Re: Draw an animated curve between two points on a map

5 months ago

Well, this is old and solved, but I'm adding an other thought to that :) You could just use a 2D parabola and mess with it using translate() and rotate(), I even made a little try look:

edit: i just saw your post in stack overflow . posted there also.

CODE EDITED:

minor improvements :)

float initial_x = -200;// the "width" of parabola, will change the heigth as well...
// that may be adjusted below...
float r = 200;// change this to change the height of the parabola bigger lower.
float x = initial_x;
float y;
float y_offset;
ArrayList<PVector> pts = new ArrayList<PVector>();
float mx = 70, my = -15, tmx, tmy;
boolean animating = false;
PFont f;
void setup() {
size( 800, 400, P3D);
background(255);
smooth();
f = createFont("Arial", 15);
textMode(SCREEN);
}
void draw() {
//lights();
background(255);
fill(100);
textFont(f, 15);
text("drag to orbit", width - 10 - textWidth("drag to orbit"), height -30);
text("any key to redraw parabola", width - 10 - textWidth("any key to redraw parabola"), height -10);
//rotate 3d
translate(width/4, height/2);
rotateY(radians(mx));
rotateZ(radians(my));
// to mark origin and help view 3d
noFill();
stroke(100);
box(20);
pushMatrix();
translate(100, 5, -100);
stroke(200);
fill(0, 20);
box(600, 2, 600);
popMatrix();
//store y offset
if (x == initial_x) {
y_offset = (sq(x)+2*x)/r;
}
// stop parabola
if ( x == initial_x || x < -initial_x + 2) {
x+=2;
//calc y
y = (sq(x)+2*x)/r - y_offset;
animating = true;
// add to curve storage
//only add a vertex each 3 points or || if the first
if (pts.size() > 0 && x > pts.get(pts.size()-1).x +3
|| pts.size() == 0)
pts.add(new PVector(x, y));
}
else {
animating = false;
}
stroke(50, 30, 7);
noFill();
strokeWeight(1.5);
//draw at origin
translate(-initial_x, 0);
//draw curve
beginShape();
for (PVector p:pts) {
curveVertex(p.x, p.y);
}
endShape();
strokeWeight(1);
//draw a ball
if (!animating) {
float ball_x = pts.get(frameCount%pts.size()).x;
float ball_y = pts.get(frameCount%pts.size()).y;
translate(ball_x, ball_y);
noStroke();
fill(220, 190, 35);
sphere(4);
}
}
void mousePressed() {
tmx = mouseX;
tmy = mouseY;
}
void mouseDragged() {
mx = tmx - mouseX;
my = tmy - mouseY;
}
void keyPressed() {
x = initial_x;
pts.clear();
}

Chrisir

Re: Draw an animated curve between two points on a map

5 months ago

that's great!

Thanks for sharing!