I am using this pathfinder library. I've tested with this a bit and have figured out how to add nodes and edges to a map image that fits within the screen. But the actual map I need to use is much bigger than the screen. So I am planning for users to be able to horizontally scroll left and right to see the map. The issue is that there's also going to be a GUI of some sort at the bottom of the screen that needs to stay in place. I'm currently using PGraphics to add the map image in that way. But I'm totally stuck on how to create a graph for this map image now.
Here's what I have so far:
import pathfinder.*;
PathFinder PathFinder;
PGraphics mapViewPort; PImage mapImage; int x; int border = 30;
void setup() { fullScreen(); mapViewPort = createGraphics(width-(2border), height/2); mapImage = loadImage("map.png"); mapImage.resize((mapViewPort.height/mapImage.height)mapImage.height, mapViewPort.height); x = 0;
PathFinder = new customPathFinder(); }
void draw() {
mapViewPort.beginDraw();
mapViewPort.background(255);
x = constrain(x, mapViewPort.width-mapImage.width, 0);
mapViewPort.image(mapImage, x, 0);
mapViewPort.endDraw();
image(mapViewPort, border, border);
//show node and edges for debugging purposes PathFinder.drawGraph(); }
void mouseDragged() { int shiftX = pmouseX - mouseX; x = x - shiftX; // PathFinder.updateGraph(shiftX); }
After doing a lot of research, I couldn't figure out how to create a graph for an image, so I decided to try to rewrite my graph.txt file to update the x coordinates of the nodes and then create a new graph each time the user does a mouseDragged. That was a horrible idea. Not only does that require a ton of recaculations (since pmouseX and mouseX is really only just 1px difference) and my laptop could not handle it, it would probably break the animation we would want to show on the map (movement of people between areas).
Any tips or guidance would be MUCH appreciated.