Animation points from array

Programming Questions

vin139

in Programming Questions • 8 months ago

Hi!

I have a question about animating points from an array.

Somehow I can't figure out how to make this work.

Please see below an excerpt from my code.

I have a csv file with the data. It's is parsed in the class placesIveBeenV (see code at the bottom).

In setup() the csv is loaded and in draw() the dots + lines are drawn.

But how can I animate these dots + connecting lines?

I tried a couple of different things but nothing works.

Any help is greatly appreciated!

Thanks!

void setup() {

size(580, 800);

smooth();

noStroke();

// VIN

String[] NYlocationsV = loadStrings("openpaths.csv");

locationsV = new placesIveBeenV[NYlocationsV.length];

for (int i = 0; i < NYlocationsV.length; i++) {

locationsV[i] = new placesIveBeenV(NYlocationsV[i]);

}

}

void draw() {

if (savePDF) {

beginRecord(PDF, "NYmap"+y+"."+M+"."+d+"-"+hr+"."+m+"."+sec+".pdf");

}

background(245, 245, 245);

// DRAWING VIN

for (int i = 5; i < locationsV.length -1; i++) {

noStroke();

fill(vin);

ellipse(locationsV[i].x, locationsV[i].y, dotSize, dotSize); // DOTS

stroke(vin);

strokeWeight(routeLine);

line(locationsV[i].x, locationsV[i].y, locationsV[i+1].x, locationsV[i+1].y);

}

}

//and the class:

class placesIveBeenV {

float x, y;

float X, Y, Z;

String lat; // y

String lon; // x

placesIveBeenV(String s) {

int pos = s.indexOf(',');

lat = s.substring(0, pos);// LAT

s = s.substring(pos+1);

pos = s.indexOf(',');

lon = s.substring(0, pos);// LON

s = s.substring(pos+1);

pos = s.indexOf(',');

String al = s.substring(0, pos);// ALT

String date = s.substring(pos+1);// DATE

X = float(lon);

Y = float(lat);

Z = int(al);

x = map(X, -73.891000, -74.035000, width,0);// MIN, MAX, MAX, MIN

y = map(Y, 40.660000, 40.810000, height,0); // MIN, MAX, MAX, MIN

}

}

Replies(32)

Chrisir

Re: Animation points from array

8 months ago

hello,

depends what kind of animation you mean.

One idea:

since draw() is a loop in itself, you can easily kill the for loop and leave it to draw
(you have to take care of i manually within draw() and have i as a global var before setup()).

This let's the image build up slowly and not at once.

when you now say

background(245, 245, 245, 80 );

you give it a small transparency,
this means older points slowly fade out.

in setup() you can say

framerate(6);

to slow things down.

Greetings, Chrisir

vin139

Re: Animation points from array

8 months ago

I got it to work! (the points at least)

Thank you!

But now another problem:

I have 3 data files: V, L & P.

V has many points. L a little less and P almost none.

They're all ordered on time. (with a date stamp present in the csv)

If I use the frameRate method to animate these points, V, L and P are not in sync. (because V has many more points).

How can I use the date to get them in sync?

In other words; these points are location data. Between those points there is speed and I want to render them out on the correct speed. (or all twice as fast for example)....

Chrisir

Re: Animation points from array

8 months ago

what does the date stamp present in the csv look like ?
yyyy mm dd plus hh mm ss or so?

there's a lib for dates
see
https://forum.processing.org/topic/need-advise-with-calender-date-specefic-thing

so you probably increase a var called currentDay or currentDate and compare your data to it and output only those currently <= than currentDate from the three lists.

vin139

Re: Animation points from array

8 months ago

Thanks! I'm looking into that but that's a bit more complex.

I also can't get connecting lines in between.

If I use:

line(locationsV[i].x, locationsV[i].y, locationsV[i+1].x, locationsV[i+1].y);

I get a null pointer error.

How can I animated the lines as well?

Great thanks!

Chrisir

Re: [WatchList] Animation points from array

8 months ago - via EMail-to-forum

Because of i+1 :
did you say upper bound in the for loop -1 ?
You should

vin139

Re: Animation points from array

8 months ago

No I deleted the for loop as you said because draw() is a loop in itself as well....

so I have this:

i = i+1;
if (i == 5658){
i=0;
}
locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
ellipse(locationsV[i].x, locationsV[i].y, dotSize, dotSize);
line(locationsV[i].x, locationsV[i].y, locationsV[i+1].x, locationsV[i+1].y);

But the last line doesn't work....

vin139

Re: Animation points from array

8 months ago

Maybe this is a better to understand example because of the simplicity of the code.

How can this line be animated from point to point?

float[] coordinatesX = {
30,85,85,30
};
float[] coordinatesY = {
20,20,75,75
};
void setup() {
size(800,800);
smooth();
background(255);
}
void draw() {
stroke(0);
fill(0);
beginShape();
for (int i = 0; i < coordinatesX.length-1; i++) {
for (int j = 0; j < coordinatesY.length-1; j++) {
vertex(coordinatesX[i],coordinatesY[i]);
vertex(coordinatesX[i+1],coordinatesY[i+1]);
}
}
endShape(CLOSE);
}

Chrisir

Re: [WatchList] Animation points from array

8 months ago - via EMail-to-forum

Line 2
5657?

It's different for points and lines

vin139

Re: Animation points from array

8 months ago

Doens't work either unfortunately.

But how would animating the above example work?

(whether vertex or line is used)

I think that's a very basic version of my sketch (or at least partly). But I can not even get it to work there.

Chrisir

Re: [WatchList] Animation points from array

8 months ago - via EMail-to-forum

Try println i

With which i does he crash?

vin139

Re: Animation points from array

8 months ago

right after I hit CMD+R I get the nullpointerException!

But if I comment out the line than it runs fine.

Chrisir

Re: Animation points from array

8 months ago

like this ?

i = i+1;
if (i >= 5656){
i=0;
}

Chrisir

Re: Animation points from array

8 months ago

this is your simplified test program with 4 points now:

see http://www.processing.org/reference/lerp_.html

int i = 0;
int lerp_i = 0;
float lerp_smoothness = 100.0;
float[] coordinatesX = {
30, 85, 85, 30
};
float[] coordinatesY = {
20, 20, 75, 75
};
void setup() {
size(800, 800);
smooth();
background(255);
// frameRate(23);
strokeWeight(6);
fill(0);
}
void draw() {
if (i<coordinatesX.length-1) {
float x = lerp(coordinatesX[i], coordinatesX[i+1], lerp_i/lerp_smoothness);
float y = lerp(coordinatesY[i], coordinatesY[i+1], lerp_i/lerp_smoothness);
stroke(2, 255, 0); // green
line (coordinatesX[i], coordinatesY[i], x, y);
} // if
lerp_i++;
if (lerp_i>=lerp_smoothness) {
lerp_i=0;
//
i++;
if (i>=coordinatesX.length) {
i=0;
println ("noLoop");
noLoop();
} // if
} // if
//
for (int lines_i=0;lines_i<=i;lines_i++) {
stroke(255, 5, 0); // red
point(coordinatesX[lines_i], coordinatesY[lines_i]);
}
//
} // func

Chrisir

Re: Animation points from array

8 months ago

this has no lerp but simulates a fading effect.

int i = 0;
float[] coordinatesX = {
30, 85, 85, 30
};
float[] coordinatesY = {
20, 20, 75, 75
};
void setup() {
size(800, 800);
smooth();
background(255);
frameRate(1);
strokeWeight(6);
// fill(0);
}
void draw() {
// background (255, 255, 255, 255);
fill(255, 255, 255, 192);
noStroke();
rect(0, 0, width, height);
//
if (i<coordinatesX.length-1) {
stroke(2, 255, 0); // green
line (coordinatesX[i], coordinatesY[i], coordinatesX[i+1], coordinatesY[i+1] ) ;
} // if
i++;
if (i>=coordinatesX.length) {
i=0;
//println ("noLoop");
//noLoop();
} // if
//
stroke(255, 5, 0); // red
point(coordinatesX[i], coordinatesY[i]);
//
} // func

vin139

Re: Animation points from array

8 months ago

Thank you so much!!

This helps a lot.

With this clear example I'll try to apply it to my project. Hope it works, will let you know.

By the way,

NullPointerError stil present after this;

i = i+1;
if (i >= 5656){
i=0;
}

So I guess the error is caused by something else.

Thanks again!

vin139

Re: Animation points from array

8 months ago

Chrisir,

I understand your example above completely and I tried to apply it to my project.

Unfortunately I still get the nullpointer exception.

I am pretty sure it has something to do with how the csv file is loaded.

And, it happens only if I remove the for loop and use i+1 somewhere. If I use i+1 within a for loop construction I get no error.

the csv is loaded like this in setup.

NYlocationsV = loadStrings("openpaths.csv");
locationsV = new placesIveBeenV[NYlocationsV.length];
// for (i = 0; i < NYlocationsV.length; i++) {
// locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
// }

the for loop above is commented out and line 5 (locationsV[i] = new placesIveBeenV(NYlocationsV[i]);) is called in draw; so I end up with this:

void draw() {
translate(510, 214);
locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
if(i < NYlocationsV.length-1) {
float xl = lerp(locationsV[i].x, locationsV[i+1].x, lerp_i/lerp_speed);
float yl = lerp(locationsV[i].y, locationsV[i+1].y, lerp_i/lerp_speed);
stroke(0.5);
line(locationsV[i].x, locationsV[i].y, xl, yl);
}
lerp_i++;
if(lerp_i>=lerp_speed) {
lerp_i = 0;
}
i++;
}

Does this make any sense?

Just so you know, I have also a class which maps lat, lon & date etc to x, y.

But I don't think the problem can be there!

Chrisir

Re: Animation points from array

8 months ago

can you post your entire code ?

vin139

Re: Animation points from array

8 months ago

It's a little bit of a mess by now because all of the things we tried (especially after trying lerp).

It is commented out so it shouldn't be a problem and you can now see what is tried.

import processing.pdf.*;
placesIveBeenV[] locationsV;
placesIveBeenP[] locationsP;
String[] NYlocationsV;
String[] NYlocationsL;
String[] NYlocationsP;
int i = 5;
int j = 5;
int k = 5;
float lerp_i = 0;
float lerp_speed = 100.0;
float speedV, speedL, speedP;
color vin = color(0, 168, 255);
color photos = color(0, 0, 0);
float dotSize = 2;
float routeLine = 0.5;
boolean savePDF = false;
int sec = second(), m = minute(), hr = hour(), d = day(), M = month(), y = year();
//import java.text.SimpleDateFormat;
//import java.util.Calendar;
//import java.util.GregorianCalendar;
//import java.util.Date;
//
//SimpleDateFormat sdf;
void setup() {
background(245, 245, 245);
size(1200 , 675);
smooth();
noStroke();
frameRate(60);
// V
NYlocationsV = loadStrings("openpaths.csv");
locationsV = new placesIveBeenV[NYlocationsV.length];
// for (i = 0; i < NYlocationsV.length; i++) {
// locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
// }
// PHOTOS
NYlocationsP = loadStrings("gpsFromPhotos.csv");
locationsP = new placesIveBeenP[NYlocationsP.length];
}
void draw() {
translate(510, 214);
// if (savePDF) {
// beginRecord(PDF, "NYmap"+y+"."+M+"."+d+"-"+hr+"."+m+"."+sec+".pdf");
// }
//background(245, 245, 245);
// DRAWING V
noStroke();
fill(vin);
// i++;
// if (i == NYlocationsV.length-1){
// i = 0;
// }
// for (i = 0; i < NYlocationsV.length; i++) {
// locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
if(i < NYlocationsV.length-1) {
float xl = lerp(locationsV[i].x, locationsV[i+1].x, lerp_i/lerp_speed);
float yl = lerp(locationsV[i].y, locationsV[i+1].y, lerp_i/lerp_speed);
stroke(vin);
line(locationsV[i].x, locationsV[i].y, xl, yl);
}
lerp_i++;
if(lerp_i>=lerp_speed) {
lerp_i = 0;
}
i++;
println(i);
//ellipse(locationsV[i].x, locationsV[i].y, dotSize, dotSize);
//triangle(locationsV[i].x-2, locationsV[i].y+1, locationsV[i].x, locationsV[i].y-2, locationsV[i].x+2, locationsV[i].y+1);
// }
stroke(vin);
strokeWeight(routeLine);
//beginShape(LINES);
//vertex(locationsV[i].x, locationsV[i].y);
//vertex(locationsV[i+1].x, locationsV[i+1].y);
//endShape();
//line(locationsV[i].x, locationsV[i].y, locationsV[i+1].x, locationsV[i+1].y);
//println(locationsV[i].x);
//textSize(2);
//text("Lon(x): "+locationsV[i].lon, locationsV[i].x, locationsV[i].y-1); //x
//text("Lat(y): "+locationsV[i].lat, locationsV[i].x, locationsV[i].y+1); //y
//println(locationsV[i].x);
// DRAWING PHOTOS
noStroke();
fill(photos);
k = k+1;
if (k == 3222){
k=0;
}
//locationsP[k] = new placesIveBeenP(NYlocationsP[k]);
//ellipse(locationsP[k].x, locationsP[k].y, dotSize, dotSize);
//triangle(locationsP[i].x-2, locationsP[i].y+1, locationsP[i].x, locationsP[i].y-2, locationsP[i].x+2, locationsP[i].y+1);
// stroke(photos);
// strokeWeight(0.5);
// line(locationsP[i].x, locationsP[i].y, locationsP[i+1].x, locationsP[i+1].y);
// if (savePDF) {
// savePDF = false;
// endRecord();
// }
}
void keyReleased() {
if (key == 's' || key == 'S') {
saveFrame("NYmap"+y+"."+M+"."+d+"-"+hr+"."+m+"."+sec+".jpg");
println("image saved!");
}
if (key=='p' || key=='P') {
savePDF = true;
println("PDF saved!");
}
}

And the class placesIveBeenV pde.

class placesIveBeenV {
float x, y;
float X, Y, Z;
String lat; // y
String lon; // x
String date; // Date
placesIveBeenV(String s) {
int pos = s.indexOf(',');
lat = s.substring(0, pos);// LAT
s = s.substring(pos+1);
pos = s.indexOf(',');
lon = s.substring(0, pos);// LON
s = s.substring(pos+1);
pos = s.indexOf(',');
String al = s.substring(0, pos);// ALT
date = s.substring(pos+1);// DATE
X = float(lon);
Y = float(lat);
Z = int(al);
// x = map(X, -73.9419174194, -74.0175628662, width-64, 64);// MIN, MAX, MAX, MIN
// y = map(Y, 40.6888427734, 40.7805175781, height-20, 20); // MIN, MAX, MAX, MIN
x = map(X, -73.891000, -74.035000, 180,0);// MIN, MAX, MAX, MIN
y = map(Y, 40.660000, 40.810000, 248,0); // MIN, MAX, MAX, MIN
//println(Y);
}
}

And the class placesIveBeenP pde.

class placesIveBeenP {
float x, y;
float X, Y;
String lat; // y
String lon; // x
placesIveBeenP(String s) {
int pos = s.indexOf(',');
String sourceFile = s.substring(0, pos);// SOURCE FILE
s = s.substring(pos+1);
pos = s.indexOf(',');
lat = s.substring(0, pos);// LAT
s = s.substring(pos+1);
pos = s.indexOf(',');
lon = s.substring(0, pos);// LON
String date = s.substring(pos+1);// DATE
X = float(lon);
Y = float(lat);
// x = map(X, -73.9419174194, -74.0175628662, width-64, 64);// MIN, MAX, MAX, MIN
// y = map(Y, 40.6888427734, 40.7805175781, height-20, 20); // MIN, MAX, MAX, MIN
x = map(X, -73.891000, -74.035000, 180,0);// MIN, MAX, MAX, MIN
y = map(Y, 40.660000, 40.810000, 248,0); // MIN, MAX, MAX, MIN
//println(sourceFile);
}
}

Chrisir

Re: Animation points from array

8 months ago

you sent me
openpaths.csv
??????????

............and not gpsFromPhotos.csv

Chrisir

Re: Animation points from array

8 months ago

here with openpaths.csv

I have to leave now.

//
//
// import processing.pdf.*;
placesIveBeenV[] locationsV;
placesIveBeenP[] locationsP;
String[] NYlocationsV;
String[] NYlocationsL;
String[] NYlocationsP;
int i = 5;
int j = 5;
int k = 5;
float lerp_i = 0;
float lerp_speed = 100.0;
float speedV, speedL, speedP;
color vin = color(0, 168, 255);
color photos = color(0, 0, 0);
float dotSize = 2;
float routeLine = 0.5;
boolean savePDF = false;
int sec = second(), m = minute(), hr = hour(), d = day(), M = month(), y = year();
//import java.text.SimpleDateFormat;
//import java.util.Calendar;
//import java.util.GregorianCalendar;
//import java.util.Date;
//
//SimpleDateFormat sdf;
void setup() {
//
size(1200, 675);
background(245, 245, 245);
smooth();
noStroke();
frameRate(60);
// V
NYlocationsV = loadStrings("openpaths.csv");
locationsV = new placesIveBeenV[NYlocationsV.length];
for (i = 0; i < NYlocationsV.length; i++) {
locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
}
// PHOTOS
NYlocationsP = loadStrings("openpaths.csv" ) ; // ("gpsFromPhotos.csv");
println( NYlocationsP.length );
// locationsP = new placesIveBeenP[NYlocationsP.length];
//
//
i=0; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
}
void draw() {
translate(510, 214);
// if (savePDF) {
// beginRecord(PDF, "NYmap"+y+"."+M+"."+d+"-"+hr+"."+m+"."+sec+".pdf");
// }
// background(245, 245, 245, 20);
// fading:::::::::::::::::::::::::::::::::::::::::::::::::::::
fill(245, 245, 245, 6);
rect(0, 0, width, height);
//
//
// DRAWING V
noStroke();
fill(vin);
// i++;
// if (i == NYlocationsV.length-1){
// i = 0;
// }
// for (i = 0; i < NYlocationsV.length; i++) {
// locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
// locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
if (i < NYlocationsV.length-1) {
float xl = lerp(locationsV[i].x, locationsV[i+1].x, lerp_i/lerp_speed);
float yl = lerp(locationsV[i].y, locationsV[i+1].y, lerp_i/lerp_speed);
stroke(vin);
line(locationsV[i].x, locationsV[i].y, xl, yl);
}
lerp_i++;
if (lerp_i>=lerp_speed) {
lerp_i = 0;
i++;
println(i);
if (i > NYlocationsV.length-1)
i=0;
}
//
// println(i);
//ellipse(locationsV[i].x, locationsV[i].y, dotSize, dotSize);
//triangle(locationsV[i].x-2, locationsV[i].y+1, locationsV[i].x, locationsV[i].y-2, locationsV[i].x+2, locationsV[i].y+1);
// }
stroke(vin);
strokeWeight(routeLine);
//beginShape(LINES);
//vertex(locationsV[i].x, locationsV[i].y);
//vertex(locationsV[i+1].x, locationsV[i+1].y);
//endShape();
//line(locationsV[i].x, locationsV[i].y, locationsV[i+1].x, locationsV[i+1].y);
//println(locationsV[i].x);
//textSize(2);
//text("Lon(x): "+locationsV[i].lon, locationsV[i].x, locationsV[i].y-1); //x
//text("Lat(y): "+locationsV[i].lat, locationsV[i].x, locationsV[i].y+1); //y
//println(locationsV[i].x);
// DRAWING PHOTOS
noStroke();
fill(photos);
k = k+1;
if (k == 3222) {
k=0;
}
//locationsP[k] = new placesIveBeenP(NYlocationsP[k]);
//ellipse(locationsP[k].x, locationsP[k].y, dotSize, dotSize);
//triangle(locationsP[i].x-2, locationsP[i].y+1, locationsP[i].x, locationsP[i].y-2, locationsP[i].x+2, locationsP[i].y+1);
// stroke(photos);
// strokeWeight(0.5);
// line(locationsP[i].x, locationsP[i].y, locationsP[i+1].x, locationsP[i+1].y);
// if (savePDF) {
// savePDF = false;
// endRecord();
// }
}
void keyReleased() {
if (key == 's' || key == 'S') {
saveFrame("NYmap"+y+"."+M+"."+d+"-"+hr+"."+m+"."+sec+".jpg");
println("image saved!");
}
if (key=='p' || key=='P') {
savePDF = true;
println("PDF saved!");
}
}
// =======================================================================
// And the class placesIveBeenV pde.
class placesIveBeenV {
float x, y;
float X, Y, Z;
String lat; // y
String lon; // x
String date; // Date
placesIveBeenV(String s) {
int pos = s.indexOf(',');
lat = s.substring(0, pos);// LAT
s = s.substring(pos+1);
pos = s.indexOf(',');
lon = s.substring(0, pos);// LON
s = s.substring(pos+1);
pos = s.indexOf(',');
String al = s.substring(0, pos);// ALT
date = s.substring(pos+1);// DATE
X = float(lon);
Y = float(lat);
Z = int(al);
// x = map(X, -73.9419174194, -74.0175628662, width-64, 64);// MIN, MAX, MAX, MIN
// y = map(Y, 40.6888427734, 40.7805175781, height-20, 20); // MIN, MAX, MAX, MIN
x = map(X, -73.891000, -74.035000, 180, 0);// MIN, MAX, MAX, MIN
y = map(Y, 40.660000, 40.810000, 248, 0); // MIN, MAX, MAX, MIN
//println(Y);
}
}
// ===========================================================================
// And the class placesIveBeenP pde.
class placesIveBeenP {
float x, y;
float X, Y;
String lat; // y
String lon; // x
//
placesIveBeenP(String s) {
int pos = s.indexOf(',');
String sourceFile = s.substring(0, pos);// SOURCE FILE
s = s.substring(pos+1);
pos = s.indexOf(',');
lat = s.substring(0, pos);// LAT
s = s.substring(pos+1);
pos = s.indexOf(',');
lon = s.substring(0, pos);// LON
String date = s.substring(pos+1);// DATE
X = float(lon);
Y = float(lat);
// x = map(X, -73.9419174194, -74.0175628662, width-64, 64);// MIN, MAX, MAX, MIN
// y = map(Y, 40.6888427734, 40.7805175781, height-20, 20); // MIN, MAX, MAX, MIN
x = map(X, -73.891000, -74.035000, 180, 0);// MIN, MAX, MAX, MIN
y = map(Y, 40.660000, 40.810000, 248, 0); // MIN, MAX, MAX, MIN
//println(sourceFile);
}
}
// ========================================================================
//

vin139

Re: Animation points from array

8 months ago

Great thanks! Going to check it out now!

vin139

Re: Animation points from array

8 months ago

That worked like a charm! Thanks!

I've deleted the lerp() function. Somehow it was a bit slow and when I tried to speed it up the lines were not connecting anymore. So now I just used line and it works great! thanks!

One last thing is matching the different routes (with their own csv files) up with each other so that they're synced in time.

Each entry in each csv file as a date stamp. Is it possible to simulate a clock / calendar (which you can speed up or down) and all entries matching that certain time are displayed.

In short this will mean the following:

V is the fastest, it has the most gps points per time. L comes next but has more time between each gps entry in general. And P only occurs now and then...

See my current code below.

How could I make this speed / time thing work?

// import processing.pdf.*;
placesIveBeenV[] locationsV;
placesIveBeenL[] locationsL;
placesIveBeenP[] locationsP;
String[] NYlocationsV;
String[] NYlocationsL;
String[] NYlocationsP;
int i = 5;
int j = 5;
int k = 5;
float lerp_i = 0;
float lerp_j = 0;
float lerp_speedV = 1.0;
float lerp_speedL = 1.0;
float speedV, speedL, speedP;
color V = color(0, 168, 255);
color L = color(255, 82, 71);
color P = color(0, 0, 0);
float dotSize = 2;
float routeLine = 0.1;
boolean savePDF = false;
int sec = second(), m = minute(), hr = hour(), d = day(), M = month(), y = year();
void setup() {
//
size(1200, 675);
background(245, 245, 245);
smooth();
noStroke();
//frameRate(60);
// V
NYlocationsV = loadStrings("openpaths.csv");
locationsV = new placesIveBeenV[NYlocationsV.length];
for (i = 0; i < NYlocationsV.length; i++) {
locationsV[i] = new placesIveBeenV(NYlocationsV[i]);
}
// L
NYlocationsL = loadStrings("openpaths_L.csv");
locationsL = new placesIveBeenL[NYlocationsL.length];
for (j = 0; j < NYlocationsL.length; j++) {
locationsL[j] = new placesIveBeenL(NYlocationsL[j]);
}
// P
String[] NYlocationsP = loadStrings("gpsFromPhotos.csv");
locationsP = new placesIveBeenP[NYlocationsP.length];
for (int i = 0; i < NYlocationsP.length; i++) {
locationsP[i] = new placesIveBeenP(NYlocationsP[i]);
}
i=5; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
j=5; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
k=5; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
}
void draw() {
translate(510, 214);
// if (savePDF) {
// beginRecord(PDF, "NYmap"+y+"."+M+"."+d+"-"+hr+"."+m+"."+sec+".pdf");
// }
// background(245, 245, 245, 20);
// fading:::::::::::::::::::::::::::::::::::::::::::::::::::::
fill(245, 245, 245,0);
rect(0, 0, width, height);
// DRAWING V
noStroke();
fill(V);
if (i < NYlocationsV.length-1) {
stroke(V);
strokeWeight(routeLine);
line(locationsV[i].x, locationsV[i].y, locationsV[i+1].x, locationsV[i+1].y);
// fill(255);
// ellipse(xv, yv, 2, 2);
// noFill();
}
lerp_i++;
if (lerp_i>=lerp_speedV) {
lerp_i = 0;
i++;
if (i > NYlocationsV.length-1)
i=5;
}
println(i);
//ellipse(locationsV[i].x, locationsV[i].y, dotSize, dotSize);
//triangle(locationsV[i].x-2, locationsV[i].y+1, locationsV[i].x, locationsV[i].y-2, locationsV[i].x+2, locationsV[i].y+1);
// }
// DRAWING L
if (j < NYlocationsL.length-1) {
stroke(L);
line(locationsL[j].x, locationsL[j].y, locationsL[j+1].x, locationsL[j+1].y);
}
lerp_j++;
if (lerp_j>=lerp_speedL) {
lerp_j = 0;
j++;
if (j > NYlocationsL.length-1)
j=5;
}
// DRAWING P
noStroke();
fill(P);
k = k+1;
if (k == 3222) {
k=5;
}
ellipse(locationsP[k].x, locationsP[k].y, dotSize, dotSize);
//triangle(locationsP[i].x-2, locationsP[i].y+1, locationsP[i].x, locationsP[i].y-2, locationsP[i].x+2, locationsP[i].y+1);
// if (savePDF) {
// savePDF = false;
// endRecord();
// }
}
void keyReleased() {
if (key == 's' || key == 'S') {
saveFrame("NYmap"+y+"."+M+"."+d+"-"+hr+"."+m+"."+sec+".jpg");
println("image saved!");
}
if (key=='p' || key=='P') {
savePDF = true;
println("PDF saved!");
}
}

Chrisir

Re: Animation points from array

8 months ago

we had this already

see

https://forum.processing.org/topic/animation-points-from-array#25080000001982063

vin139

Re: Animation points from array

8 months ago

Hey,

my idea was to convert the date to a timestamp and then with mills() loop trough the timestamps.

But I'm totally lost here. :(

My dates in the csv are strings. How can I convert those to a timestamp?

if the start day is converted to a timestamp and with millis this date is incrementing I can use equal() to compare it to the timestamps from the csv?

Chrisir

Re: Animation points from array

8 months ago

I am totally newbie to date & time.

Let me see.

You don't want to use millis() but you can use a var
int timeThatHasPassed = 0;

You could then say
each location has a single number timestampSeconds derived from
timestampSeconds =
seconds +
minutes * 60 +
hours * 60 * 60 +
days * 60 * 60 * 24 +
month * 60 * 60 * 24 * 30 (roughly) +
year * 60 * 60 * 24 * 365 (roughly) ;

and then

if (timeThatHasPassed >= location.timestampSeconds)
location.display();
timeThatHasPassed += speed;

vin139

Re: Animation points from array

8 months ago

thanks!

But do you mean with this:

You could then say

each location has a single number timestampSeconds derived from

timestampSeconds =

seconds +

minutes * 60 +

hours * 60 * 60 +

days * 60 * 60 * 24 +

month * 60 * 60 * 24 * 30 (roughly) +

year * 60 * 60 * 24 * 365 (roughly) ;

that it reads the year, months, days etc from the timestamp from the csv?

The timestamp in the csv is now just a string (like this: "2012-01-01 12:00:00") so it is not recognized as a time format... I could see if I can split that string into multiple arrays called year, month etc...

Chrisir

Re: Animation points from array

8 months ago

the whole thing is a workaround since we both don't know how to handle date and time properly but however.......

that it reads the year, months, days etc from the timestamp from the csv?

yes

split this "2012-01-01 12:00:00" with " " into A
dateValue = A [0];

timeValue = A [1];

split dateValue with "-" into dateArr

split timeValue with ":" into timeArr

you must use int() now I guess:

timestampSeconds =

timeArr [2]+

timeArr [1] * 60 +

timeArr [0] * 60 * 60 +

dateArr[2] * 60 * 60 * 24 +

dateArr[1] * 60 * 60 * 24 * 30 (roughly) +

dateArr[0] * 60 * 60 * 24 * 365 (roughly) ;

vin139

Re: Animation points from array

8 months ago

I was just editing my reply at the same time and used split as well.

Yes, it reads this. But, the timestamp that is being generated in the above example is not really a timestamp?

Or at least not one like here.

It could be a great workaround yes.

But the number that is timestampSeconds is way too big I think.

Chrisir

Re: Animation points from array

8 months ago

no it's just our little workaround timestamp

you can use long as var type
or multiply by 0.1

vin139

Re: Animation points from array

8 months ago

It works!!

I placed i++ in if (timeThatHasPassed >= timestampSecondsV) {

Thanks!

Chrisir

Re: Animation points from array

8 months ago

That's good!

vin139

Re: Animation points from array

8 months ago

Yes! :)

Thanks again!!

Top Reply