We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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;
}
}
}
}
Answers
Kf