This bascially comes from an attempt at zoom and pan (not using peasyCam ) it’s part of a much bigger project.
I have a load of ‘cells’ that are clickable and I want to be able to scale them to ‘simulate’ a zoom in 2D, all cells are in thier own PGraphics buffer.
Scaling them is no real bother, but any attempt I’ve made at getting their new position after being scaled has failed totally.
I’m sure I’m missing something very obvious here, but I can’t figure out how to find the new x and y positions.
Can any point me in the right direction please ?
Simplified code below uses just up and down arrows for simple zoom and ‘r’ to reset.
/* ************* 2D zoom & click question ****************
***---->> ZOOM IN : PRESS DOWN ARROW <<----***
***---->> ZOOM OUT : PRESS UP ARROW <<----***
***---->> RESET VIEW : PRESS 'r' <<----***
*********************************************/
final int cell_size = 66;
final int padding = 2; // just to keep rect stroke within buffer
final int cell_space = 6;
final int startGrid_space = cell_size+cell_space;
int startX = startGrid_space;
int startY = startGrid_space;
float zoom = 1.0;
int cell_count = 100;
ArrayList<Cell> Cells = new ArrayList<Cell>();
int liveCell;
//
boolean bufferDebug = true;
int nbrBufferUpdates = 0;
void setup() {
size(864, 864);
for (int i = 0; i < cell_count; i++) {
Cells.add(new Cell(this, i));
}
}
void draw() {
background(0);
if (bufferDebug) {
surface.setTitle(int(frameRate) + " fps" +" BufferUpdates :" +nbrBufferUpdates);
}
for (Cell cell : Cells) {
cell.display();
}
}
void mouseMoved() {
liveCell = -1;
for (Cell cell : Cells) {
if (cell.isOver()) {
liveCell = Cells.indexOf(cell);
}
}
}
void mouseReleased() {
for (Cell cell : Cells) {
if (Cells.indexOf(cell) == liveCell) {
cell.clicked();
}
}
}
void keyReleased() {
if (key == CODED) {
switch(keyCode) {
case UP : //zoom out
zoom += 0.1;
zoom = constrain(zoom, 0.5, 1.0);
break;
case DOWN : // zoom in
zoom -= 0.1;
zoom = constrain(zoom, 0.5, 1.0);
break;
}
} else if (key == 'r') { //reset all cells to start up size & position
zoom = 1.0;
for (Cell cell : Cells) {
cell.setPosition(startX +(cell.index/10)*startGrid_space, startY +(cell.index%10)*startGrid_space);
}
}
println("Zoom :"+zoom);
}
//----------------------------->> CELL CLASS
public class Cell {
PGraphics buffer;
float x, y, w, h;
boolean invalidBuffer, Over, pre_Over, Active;
int index;
Cell(PApplet app, int t_index) {
index = t_index;
x = startX + (index/10)*startGrid_space;
y = startY + (index%10)*startGrid_space;
w = cell_size;
h = cell_size;
buffer = app.createGraphics(int(w+padding), int(h+padding));
invalidBuffer = true;
}
public boolean isOver() {
if (mouseX >x && mouseX< x+w && mouseY>y && mouseY<y+h ) { // Edit for changed position when zoomed ?
Over = true;
} else {
Over = false;
}
if (Over != pre_Over) {
invalidBuffer = true;
pre_Over = Over;
}
return Over;
}
public void clicked() {
Active = !Active;
invalidBuffer = true;
}
public void setPosition(float t_X, float t_Y) {
x = t_X;
y = t_Y;
}
public void update() {
invalidBuffer = true;
}
public void display() {
if (invalidBuffer) {
updateBuffer();
}
pushMatrix();
scale(zoom);
translate(x, y);
image(buffer, 0, 0);
popMatrix();
}
public void updateBuffer()
{
if (bufferDebug) {
nbrBufferUpdates ++;
}
buffer.beginDraw();
buffer.clear() ;
buffer.rectMode(CENTER);
buffer.strokeWeight(2);
buffer.noFill();
buffer.stroke(200, 200, 200);
if (Active) {
buffer.stroke(0, 200, 0);
} else if (Over) {
buffer.stroke(253, 114, 63);
}
buffer.rect(w/2, h/2, w-padding, h-padding, 15);
buffer.endDraw();
invalidBuffer = false;
}
}
