Hi guys, I made a post a long while ago working on the zoom interface for this drawing app Ive been working on, Ive got it closish to what I want but am having issues with figuring out how to make the zoom focus on the mouse pointer.
The problem is im not that great at math, and Im pretty sure theres something Im missing in algebra here.
The scale is only working to the top left corner of the canvas, Im trying to figure out how to make it zoom in to where the mouse is pointing.
Also, how would I go about limiting the whole canvas zoom, so the image doesnt become too small in the window and leave glitches if you zoom out too far… or maybe have somesort of a non drawable background that is constantly refreshed? (Im literally thinking of just making the layer canvases larger and putting in a grey rectangle around them or something that cant be drawn on)
Currently, the zoom works like this: Mid MouseScroll wheel to zoom in and out, and left shift + scroll wheel to move side to side or ctrl+mousewheel scroll to move up and down.
Ive still yet to figure out how to add scroll bars
Muchly appreciated, a lot of artists have been wanting to use this app and I feel im really close to a more or less usable demo of it!
Code:
float speed;
float pos;
float c0, c1, c2, c3;
boolean auto;
void settings() {
size(400, 400);
}
boolean isShifting = false; //is the canvas being moved
float offsetX =0;
float offsetY =0;
PGraphics layer_1; //mid layer onto which things will be onto and will be merged with c_1
PGraphics layer_2;
boolean shiftPressed = false;
boolean ctrlPressed = false;
int l1_T = 255; //transparency for the layers
int l2_T = 255; //transparency for the layers
float distThresh = 200;
ArrayList points = new ArrayList();
float locY =0;
float locX=0;
float scalar = 1;
//UI
boolean uI = false;
void setup() {
size(500, 500); //c_0 size smaller than main canvases
background(255); //c_0 background
noStroke();
//UI END
layer_1 = createGraphics(1000, 1000, JAVA2D); // the canvases are larger than the draw area
layer_2 = createGraphics(1000, 1000); // the canvases are larger than the draw area
}
void draw() {
noCursor();
pushMatrix();
scale(scalar);
offsetX = mouseX /scalar - locX ;
offsetY = mouseY /scalar - locY;
layer_1.beginDraw();
layer_1.background(128);
layer_1.tint(255, l1_T);
layer_1.image(layer_2, 0, 0);
layer_1.endDraw();
if (mousePressed && (mouseButton == LEFT)) {
sketcher(layer_2, points, 200);
}
image(layer_1, locX, locY); // 0 0
popMatrix();
rect(0, 0, 210, 210); //viewfinder frame
noFill();
stroke(0, 40);
ellipse(mouseX, mouseY, distThresh/10, distThresh/10);
}
//Sketcher Code itself
void sketcher(PGraphics layer, ArrayList pointsList, int threshHold) {
layer.beginDraw();
layer.smooth();
PVector mouseCord = new PVector(offsetX, offsetY);
pointsList.add(mouseCord);
for (int index = 0; index < points.size(); index++) {
PVector v = (PVector) pointsList.get(index);
float joinchance = mouseCord.dist(v) / threshHold;
if (joinchance < 0.1) {
float dx = mouseCord.x - v.x;
float dy = mouseCord.y - v.y;
float angle = atan2(dy, dx);
float pad = mouseCord.dist(v)/4;
layer.stroke(0, 0, 0, 255);
layer.line(mouseCord.x - (pad * cos(angle)), mouseCord.y - (pad * sin(angle)), v.x + (pad * cos(angle)), v.y + (pad * sin(angle)) );
}
}
layer.endDraw();
}
//MouseWheel and MouseEvents
void mouseWheel(MouseEvent event) {
float e = event.getCount();
if (shiftPressed == false && ctrlPressed == false) {
scalar += (e*.1);
distThresh += (e/1);
println(scalar, distThresh);
}
if (shiftPressed == true) {
locX += (e*10);
}
if (ctrlPressed == true) {
locY += (e*10);
}
if (locX>0) {
locX = 0;
}
if (locY>0) {
locY = 0;
}
if (locX < -500) {
locX = -500;
}
if (locY < -500) {
locY = -500;
}
}
//Keys and KeyCodes
void keyPressed() {
if (key == CODED) {
if (keyCode == SHIFT) {
shiftPressed = true;
}
if (keyCode == CONTROL) {
ctrlPressed = true;
}
}
println(locX, locY);
}
void keyReleased() {
if (key == CODED) {
if (keyCode == SHIFT) {
shiftPressed = false;
}
if (keyCode == CONTROL) {
ctrlPressed = false;
}
}
}