Having issues with dragging when creating a map

smacdonald619

Hi there, I'm brand new to processing and programming in general and am currently taking a data visualization course and having trouble with one of the exercises so was hoping I could maybe get some guidance here. We are tasked with creating a map of the college with panning and zooming functions on the mouse and also with the keyboard. I currently have zooming and panning working with the mouse decently however my map continuously gets off center if I drag one way or the other and then zoom out, its often shifted from its default location where I would like it to be constant. I cant quite figure out what is causing the problem though I'm assuming the issue is in my mousedragged function but I really cant seem to figure out with my limited knowledge. Some of the code for panning and zooming was given to us when starting the exercise so because I did not originally write it I think I'm having issues there as well as the fact the original example had the campus image taking up the entire window where I have a small inset map that is using a quarter of the window. Any help would be greatly appreciated. I'm brand new to this forum so not sure about formatting so I apologize if it is not correct. I have also linked the image I am using at the end. Thanks!

//Define the aerial vars
PImage aerial;

int imgW;
int imgH;
int miniW;
int miniH;

int centerX;
int centerY;
int miniX;
int miniY;

//Control Box
int boxW;
int boxH;
int boxX;
int boxY;

//Define the zoom vars
int scale = 1;
int maxScale = 10;
float zoomFactor = 0.4;

//Define the pan vars
int panFromX;
int panFromY;

int panToX;
int panToY;

int xShift = 0;
int yShift = 0;

int direction = 1;

void setup() {
  aerial = loadImage("Campus100dpi.png");
 //Aerial Map
  imgW = aerial.width;
  imgH = aerial.height;
  centerX = imgW / 2;
  centerY = imgH / 2;

  //Inset Map
  miniW = aerial.width / 3;
  miniH = aerial.height / 3;
  miniX = width - 200;
  miniY = height - height ;

  //Control Box
  boxW = width / 3;
  boxH = height;
  boxX = width - 200;
  boxY = height / 3;

  size(800, 450);
}

void draw(){
  background(0);
  imageMode(CENTER);
  image(aerial, centerX, centerY, imgW, imgH);
  imageMode(CORNER);
  image(aerial, miniX, miniY, miniW, miniH);
  fill(0);
  rect(boxX, boxY, boxW, boxH);

}

//Pan function
void mousePressed(){
  if(mouseButton == LEFT){
    panFromX = mouseX;
    panFromY = mouseY;
  }
}

//Pan function continued..
void mouseDragged(){
  if(mouseButton == LEFT){
    panToX = mouseX;
    panToY = mouseY;

    xShift = panToX - panFromX;
    yShift = panToY - panFromY;

    //Only pan with the image occupies the whole display
    if(centerX - imgW / 2 <= 0
    && centerX + imgW / 2 >= width
    && centerY - imgH / 2 <= 0
    && centerY + imgH / 2 >= height){
      centerX = centerX + xShift;
      centerY = centerY + yShift;
    }

    //Set the constraints for pan
    if(centerX - imgW / 2 > 0){
      centerX = imgW / 2;
    }

    if(centerX + imgW / 2 < width){
      centerX = width - imgW / 2;
    }

    if(centerY - imgH / 2 > 0){
      centerY = imgH / 2;
    }

    if(centerY + imgH / 2 < height){
      centerY = height - imgH / 2;
    }

    panFromX = panToX;
    panFromY = panToY;
  }
}

//Zoom function
void mouseWheel(MouseEvent event) {
  float e = event.getAmount();

  //Zoom in
  if(e == -1){
    if(scale < maxScale){
      scale++;
      imgW = int(imgW * (1+zoomFactor));
      imgH = int(imgH * (1+zoomFactor));

      int oldCenterX = centerX;
      int oldCenterY = centerY;

      centerX = centerX - int(zoomFactor * (mouseX - centerX));
      centerY = centerY - int(zoomFactor * (mouseY - centerY));
    }
  }

  //Zoom out
  if(e == 1){
    if(scale < 1){
      scale = 1;
      imgW = aerial.width;
      imgH = aerial.height;
    }

    if(scale > 1){
      scale--;
      imgH = int(imgH/(1+zoomFactor));
      imgW = int(imgW/(1+zoomFactor));

      int oldCenterX = centerX;
      int oldCenterY = centerY;

      centerX = centerX + int((mouseX - centerX)
      * (zoomFactor/(zoomFactor + 1)));
      centerY = centerY + int((mouseY - centerY)
      * (zoomFactor/(zoomFactor + 1)));

      if(centerX - imgW / 2 > 0){
        centerX = imgW / 2;
      }

      if(centerX + imgW / 2 < width){
      //  centerX = width - imgW / 2;
      }

      if(centerY - imgH / 2 > 0){
        centerY = imgH / 2;
      }

      if(centerY + imgH / 2 < height){
       // centerY = height - imgH / 2;
      }
    }
  }
}

kfrajer

//Pan function 
void mouseDragged() {
  if (mouseButton == LEFT) {
    panToX = mouseX;
    panToY = mouseY;

    xShift = panToX - panFromX;
    yShift = panToY - panFromY;


    centerX = centerX + xShift;
    centerY = centerY + yShift;

    panFromX = panToX;
    panFromY = panToY;
  }
}

Kf