|
// for capturing to png (must load ccapture) |
|
var cap = true; // change this to create a gif and change stop condition |
|
if (cap){var capturer = new CCapture( { format: 'png' } );} |
|
|
|
var PERIOD = 600; //adjust this for capturing pngs, depending on file length |
|
|
|
// init 2D arrays for latitude, longitude, and speed |
|
var latRoutes = []; |
|
var lonRoutes = []; |
|
var speedRoutes =[]; |
|
|
|
// scale the latitude and logitude, adjust to make the lines fit on the page |
|
var scaleLL = 12000; |
|
|
|
// there is probably a better way to do this... |
|
// cmd dir /b read *.gpx |
|
// to get list, paste here |
|
files = ['filename1.gpx', |
|
'filename2.gpx', |
|
'filename3.gpx'] |
|
|
|
var colorSlow; |
|
var colorFast; |
|
|
|
//load the data from the gpx files |
|
function preload(){ |
|
// get the latitude, longitutde, and speed from the .gpx files |
|
for (let i=0;i<files.length;i++){ |
|
[latRoutes[i], lonRoutes[i], speedRoutes[i]] = loadMap(files[i]) |
|
} |
|
} |
|
|
|
|
|
function setup() { |
|
createCanvas(750, 750); |
|
pixelDensity(1) |
|
colorMode(HSB,360,100,100,100); |
|
colorSlow = color(0,100,100,100); |
|
colorFast = color(120,100,100,100); |
|
} |
|
|
|
|
|
|
|
function draw() { |
|
if (frameCount == 1 && (cap)){capturer.start(); start=true;} |
|
|
|
background(255) |
|
//adjust these until everything is in the center of the screen |
|
translate(width/2-100,height/2-90); |
|
// this assumes all routes have the same starting point |
|
xstart = latRoutes[0][0]; |
|
ystart = lonRoutes[0][0]; |
|
|
|
for (j=0;j<files.length;j++){ |
|
push(); |
|
var latr = latRoutes[j]; |
|
var lonr = lonRoutes[j]; |
|
noStroke(); |
|
var dist = (frameCount-1)*2; |
|
if (dist <= 0){dist = 1} |
|
|
|
for (k=0;k<dist+1;k++){ |
|
|
|
// uncomment to plot colors instead |
|
// var speedmin = 1.5; |
|
// var speedmax = 3; |
|
// var colors = lerpColor(colorSlow,colorFast,2*(speedr[k] - speedmin)/(speedmax-speedmin)) |
|
// colors.setAlpha(15) |
|
// var rad = 5; |
|
|
|
var colors = color(0) |
|
colors.setAlpha(30) |
|
var rad = 2; |
|
|
|
fill(colors) |
|
ellipse(4*scaleLL*(lonr[k]-ystart),-4*scaleLL*(latr[k]-xstart),rad,rad) |
|
} |
|
|
|
fill(0) |
|
ellipse(4*scaleLL*(lonr[dist]-ystart),-4*scaleLL*(latr[dist]-xstart),8,8) |
|
pop(); |
|
} |
|
|
|
if (cap){capturer.capture( canvas );} |
|
if (cap){ if ((frameCount-1) == PERIOD){capturer.stop(); capturer.save(); noLoop();}} |
|
} |
|
|
|
|
|
// load data from files |
|
function loadMap(file) { |
|
var latPoints = []; |
|
var lonPoints = []; |
|
var speedPoints = []; |
|
fetch(file) |
|
.then(response => response.text()) |
|
.then(str => (new window.DOMParser()).parseFromString(str, "text/xml")) |
|
.then(doc => { |
|
const nodes = [...doc.getElementsByTagName('trkpt')]; |
|
nodes.forEach(node => |
|
{ |
|
latPoints.push(node.getAttribute("lat")); |
|
lonPoints.push(node.getAttribute("lon")); |
|
}) |
|
const speeds = doc.getElementsByTagName('speed'); |
|
for (let i= 0; i < speeds.length; i++) { |
|
speedPoints.push(speeds[i].innerHTML); |
|
} |
|
}) |
|
return [latPoints,lonPoints,speedPoints] |
|
} |
|
|