8a – Animate/interact with your path

You can animate your path by connecting your points with a line. You can use the same principle as in this example:

http://www.learningprocessing.com/examples/chapter-3/example-3-4/

In the above example, it appears you are drawing a line. The line is produced by connecting the previous mouse position (from the previous run of draw) indicated by pMouseX and pMouseY with a line that connects to the current mouse position mouseX and mouseY. In this way we are connecting all of our mouse positions with tiny little lines.

We want to do the same in with our map locations. We want to store the previous map latitude and longitude in variables ppLocationsX, ppLocationsY; And then draw a line from this previous location to the current location as pulled from our table using the variable currentRow. In this way we can animate our path.

Here is some example code:

//import libraries
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;
 
//for map styles
import de.fhpotsdam.unfolding.providers.*;
 
//declare unfolding object
UnfoldingMap map;
 
//import your data
Table table;
 
//data variables
float latm, latp;
float lonm, lonp;
 
//arrays to store the list of our lats and lons
float[] locationsX;
float[] locationsY;
 
//counter to run through rows
int currentRow = 0;
float ppLocationsX, ppLocationsY;
 
void setup() {
  size(800, 600);
  smooth();
  //deal with your data
  table = loadTable("openpaths_tega.csv", "header");
 
  println(table.getRowCount() + " total rows in table");
  locationsX = new float[table.getRowCount()];
  locationsY = new float[table.getRowCount()];
 
  //load map tiles
  map = new UnfoldingMap(this, new StamenMapProvider.WaterColor());
  //get a location at NYC coordinates
  Location nyLocation = new Location(40.8f, -73.97f);
  //zoom and pan to this location
  map.zoomAndPanTo(nyLocation, 10);
 
 
}
 
void draw() {
  //we only want to draw our background once when we are at the start of 
  //the table because we want our path not to be wiped over by the maps
  //When current row is 1, we refresh our map tiles.
  if (currentRow<2) {
    map.draw();
  }
 
  // every 30th frame, move to the next row (look up the modulo if you don't
  //undertand this
  if (frameCount % 30 == 0) {
    currentRow++;
    //get latitude using getFloat(row, column) - from the first column
    float lat = table.getFloat(currentRow, 0);
 
    //get longtitude using getFloat(row, column) - from the second column
    float lon = table.getFloat(currentRow, 1);
 
    //make a location vector and give it our lat and lon values
    Location location= new Location(lat, lon);
    //pass the location to the posLocations object.
    ScreenPosition posLocations = map.getScreenPosition(location);
    //    float m=map(n,0,384,0,255);
    fill(0, 0, 255, 100);
    noStroke();
    ellipse(posLocations.x, posLocations.y, 10, 10);
    stroke(0);
 
    //connect line from current point to previous point
    line(posLocations.x, posLocations.y, ppLocationsX, ppLocationsY);
 
 
    //put current location into previous location variables for the next loop
    ppLocationsX=posLocations.x;
    ppLocationsY=posLocations.y;
  }
 
//if at end of table, go back to the start.
  if (currentRow>(table.getRowCount()-1)) {
    currentRow=0;
  }
}

Exercise:
How would you display the date label for the current location?
How could you display all the data on the map but highlight and animate the current location with color and/or an avatar?

Adding roll over labels.
Here is another example of animating a date label.

path

//import libraries
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;
 
//for map styles
import de.fhpotsdam.unfolding.providers.*;
 
//declare unfolding object
UnfoldingMap map;
 
//import your data
Table table;
 
//data variables
float latm, latp;
float lonm, lonp;
 
//arrays to store the list of our lats and lons
float[] locationsX;
float[] locationsY;
 
//counter to run through rows
int currentRow = 0;
 
void setup() {
  size(800, 600);
  smooth();
  //deal with your data
  table = loadTable("openpaths_tega.csv", "header");
 
  println(table.getRowCount() + " total rows in table");
  locationsX = new float[table.getRowCount()];
  locationsY = new float[table.getRowCount()];
 
  //load map tiles
  map = new UnfoldingMap(this, new StamenMapProvider.WaterColor());
  //get a location at NYC coordinates
  Location nyLocation = new Location(40.8f, -73.97f);
  //zoom and pan to this location
  map.zoomAndPanTo(nyLocation, 10);
  frameRate(20);
}
 
void draw() {
  background(255, 0, 0);
 
  //variables for previous location (start this at line 1)
 
  float ppLocationsX=table.getFloat(0, 0);
  float ppLocationsY=table.getFloat(0, 1);
 
 
 
  //use a for loop to generate y which we use to call each row number
  //run through this loop up to the row we are up to
  for (int y=0; y<table.getRowCount (); y++) {
    //get latitude using getFloat(row, column) - from the first column
    float lat = table.getFloat(y, 0);
 
    //get longtitude using getFloat(row, column) - from the second column
    float lon = table.getFloat(y, 1);
 
    //make a location object and give it our lat and lon values
    Location location= new Location(lat, lon);
    //pass the location to the posLocations object.
    ScreenPosition posLocations = map.getScreenPosition(location);
 
    //if the mouse is within a distance to a point
    if (dist(mouseX, mouseY, posLocations.x, posLocations.y)<3) {
      String date = table.getString(y, 3);
      println("date="+date);
      noStroke();
      fill(255);
      rect(posLocations.x+30, posLocations.y-10, textWidth(date), 12);
      fill(0);
      text(date, posLocations.x+30, posLocations.y);
    }
    stroke(0);
 
    //connect line from current point to previous point
    line(posLocations.x, posLocations.y, ppLocationsX, ppLocationsY);
    println(y);
 
    //put current point into previous point variables
    ppLocationsX=posLocations.x;
    ppLocationsY=posLocations.y;
  }
}