Last active
February 11, 2019 22:42
-
-
Save companje/5d752b9a131e867932d87bcf6282922f to your computer and use it in GitHub Desktop.
Pan and Zoom with mouse in Processing using Texture Coordinates
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//I wrote this example to explain how to Zoom and Pan with the mouse in Processing. | |
//It uses texture coordinates (texcoords). Enjoy! | |
//Rick Companje, Feb. 2019 | |
float tx, ty; | |
float scale; | |
PImage img; | |
float xratio, yratio; | |
float minScale, maxScale; | |
void setup() { | |
//use P2D or P3D to be able to use texture() | |
size(450, 360, P2D); | |
//load image and calculate window/image ratio | |
img = loadImage("1337.jpg"); | |
xratio = float(width) / img.width; | |
yratio = float(height) / img.height; | |
//minumum scale is calculated to prevent texture wrapping | |
minScale = max(xratio, yratio); | |
maxScale = 5; | |
//start zoomed out | |
scale = minScale; | |
} | |
void draw() { | |
//calculate width/height of the region of interest in the texture | |
float tw = img.width / scale * xratio; | |
float th = img.height / scale * yratio; | |
//limit the left-top texcoords to prevent texture wrapping | |
tx = constrain(tx, 0, img.width-tw); | |
ty = constrain(ty, 0, img.height-th); | |
//draw textured rectangle | |
beginShape(); | |
texture(img); | |
vertex(0, 0, tx, ty); | |
vertex(width, 0, tx+tw, ty); | |
vertex(width, height, tx+tw, ty+th); | |
vertex(0, height, tx, ty+th); | |
endShape(); | |
} | |
void mouseDragged() { | |
//move left-top texcoord using scaled mouse delta | |
tx -= (mouseX-pmouseX)/scale; | |
ty -= (mouseY-pmouseY)/scale; | |
} | |
void mouseWheel(MouseEvent event) { | |
//zoom factor needs to be between about 0.99 and 1.01 to be able to multiply so add 1 | |
float zoomFactor = -event.getAmount()*.01 + 1; | |
float newScale = constrain(scale * zoomFactor, minScale, maxScale); | |
//next two lines are the most important lines of the code. | |
//subtract mouse in 'old' scale from mouse in 'new' scale and apply that to position. | |
tx -= (mouseX/newScale - mouseX/scale); | |
ty -= (mouseY/newScale - mouseY/scale); | |
scale = newScale; | |
} |
Author
companje
commented
Feb 11, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment