Moving around inside a larger-than-screen image - processing

Question

Context: Processing v3; Windows 10
I have an 853x2048 pixel image that I want to display fullsize on the screen. A large part of it will disappear off the bottom. I want to use Processing to navigate around inside the image, motion-path like, pause at certain points and also zoom in and out.
The code below is adapted from a demo of the Robot class as I thought that would be the go for moving around inside the image.
This code works but I can't as yet figure out how to move the viewport. And then there's the issue of zooming (which I am yet to address.)
How does one move the mouse so that the image moves or how does one move the image with respect to the viewport?
//
// how to use java.awt.Robot class in processing ...
//
import java.awt.*;
import java.awt.event.*;
Robot robot;
PFont pfont;
Point save_p;
PImage img;
void setup() {
try {
robot = new Robot();
robot.setAutoDelay(0);
}
catch (Exception e) {
e.printStackTrace();
}
surface.setResizable(true);
fullScreen();
img = loadImage("bigpic.jpg");
pfont = createFont("Impact", 32);
}
void draw() {
background(#ffffff);
fill(#000000);
imageMode(CORNERS);
image(img, 0, 0, 640*3, 480*8);
Point p = getGlobalMouseLocation();
textFont(pfont);
text("now x=" + (int)p.getX() + ", y=" + (int)p.getY(), 10, 32);
if (save_p != null) {
text("save x=" + (int)save_p.getX() + ", y=" + (int)save_p.getY(), 10, 64);
}
}
void keyPressed() {
switch(key) {
case 's':
save_p = getGlobalMouseLocation();
break;
case 'm':
if (save_p != null) {
mouseMove((int)save_p.getX(), (int)save_p.getY());
}
break;
case 'c':
break;
case 't':
translate(2000, 0);
break;
case ' ':
if (save_p != null) {
mouseMoveAndClick((int)save_p.getX(), (int)save_p.getY());
}
break;
}
}
Point getGlobalMouseLocation() {
// java.awt.MouseInfo
PointerInfo pointerInfo = MouseInfo.getPointerInfo();
Point p = pointerInfo.getLocation();
return p;
}
void mouseMove(int x, int y) {
robot.mouseMove(x, y);
}
void mouseMoveAndClick(int x, int y) {
robot.mouseMove(x, y);
robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);
robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);
robot.waitForIdle();
}

Answer 1

I'm a little confused by what you're doing with the Robot class.
But in any case, basically what you want to do is draw the image so its Y value is lower, which will cause the image to rise so you can see more of it. Here's a small example:
PImage img;
float imageY = 0;
void setup() {
img = loadImage("bigpic.jpg");
}
void draw() {
image(img, 0, imageY);
imageY--;
}
You can do something similar with resizing, just by passing in more parameters to the image() function.
But it sounds like what you're really looking for are the transformation functions. See the transform section of the Processing reference for more info, but basically you would call the translate() function to move the origin. You could also call the scale() function to "zoom" in and out.
Here's a little example that moves around a rectangle instead of an image:
void setup(){
size(500, 500);
}
void draw(){
background(64);
translate(-mouseX, -mouseY);
rect(0, 0, width, height);
}
Don't forget that Processing comes with a ton of examples. In the Processing editor, go to File > Examples.