Zoom on clicked area then click again to zoom back out

Processing Coding Questions
1

I uploaded an image then created a flashlight type of light that only showcases part of the image that are hovered over. That part of the code worked but now I want to use if/else statements to zoom in on a clicked area then click again to zoom back out. Any help will be appreciated!

PImage ispy;
void setup () {
  size(1024,768); 
  ispy = loadImage("ispy2.jpeg");
}

void draw () { 
  loadPixels(); 
  ispy.loadPixels(); 
  for (int x = 0; x < width; x++) { 
    for (int y = 0; y < height; y++) {
      int loc = x+y*width;
      float r = red(ispy.pixels[loc]); 
      float g = green(ispy.pixels[loc]);
      float b = blue(ispy.pixels[loc]);
      float d = dist(mouseX, mouseY, x, y); //
     
      float factor = map(d, 0, 200, 2, 0); 
      pixels[loc] = color(r*factor, g*factor, b*factor); 
    }
  }
  updatePixels();
}
2

Demo below.

Kf

PImage ispy;

int state=0;
float scale=1.0;

PGraphics pg;

void settings(){
  ispy = loadImage("img.jpg");
  size(ispy.width,ispy.height); 
  
}
void setup () {
  imageMode(CENTER);
  pg=createGraphics(ispy.width,ispy.height);
}

void draw () { 
  background(0);
  
  pg.beginDraw();
  pg.image(ispy,0,0); 
  pg.endDraw();
  
  pg.loadPixels(); 
  
  for (int x = 0; x < pg.width; x++) { 
    for (int y = 0; y < pg.height; y++) {
      int loc = x+y*pg.width;
      float r = red(pg.pixels[loc]); 
      float g = green(pg.pixels[loc]);
      float b = blue(pg.pixels[loc]);
      float d = dist(mouseX, mouseY, x, y); //
     
      float factor = map(d, 0, 200, 2, 0); 
      pg.pixels[loc] = color(r*factor, g*factor, b*factor);
      
    }
  }
  pg.updatePixels();
  
  
  
  
  translate(width/2,height/2);
  scale(scale);
  image(pg,0,0);
  
}

void mousePressed(){
  state=(state+1)%2;  //Change state to either 0 or 1
  scale= state==0 ? 1.0 : 3.0;
  surface.setTitle("State:"+state+" scale:"+scale);
}
1 Like
3

Great demo! Here is a slight variation – it zooms in to a region of the image based on the mouse location when clicked. Note that this does not use imageMode(CENTER) – instead, it computes a new center each click and then offsets the scaled image() from that center.

PImage ispy;

int state=0;
float scale=1.0;
PVector center;
PGraphics pg;

void settings(){
  ispy = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Processing_3_logo.png/480px-Processing_3_logo.png");
  size(ispy.width,ispy.height); 
  center = new PVector(width/2.0, height/2.0);
}
void setup () {
  pg=createGraphics(ispy.width,ispy.height);
}

void draw () { 
  background(0);
  
  pg.beginDraw();
  pg.image(ispy,0,0); 
  pg.endDraw();
  
  pg.loadPixels(); 
  
  for (int x = 0; x < pg.width; x++) { 
    for (int y = 0; y < pg.height; y++) {
      int loc = x+y*pg.width;
      float r = red(pg.pixels[loc]); 
      float g = green(pg.pixels[loc]);
      float b = blue(pg.pixels[loc]);
      float d = dist(mouseX, mouseY, x, y); //
     
      float factor = map(d, 0, 200, 2, 0); 
      pg.pixels[loc] = color(r*factor, g*factor, b*factor);
      
    }
  }
  pg.updatePixels();
  
  translate(center.x, center.y);
  scale(scale);
  image(pg, -center.x, -center.y);
  
}

void mousePressed(){
  state=(state+1)%2;  //Change state to either 0 or 1
  scale= state==0 ? 1.0 : 3.0;
  if(state==0) {
    scale = 1.0;
    center.x = width/2.0;
    center.y = height/2.0;
  }
  if(state==1) {
    scale = 3.0;
    center.x = mouseX;
    center.y = mouseY;
  }
  surface.setTitle("State:"+state+" scale:"+scale+" center:"+center.x+","+center.y);
}
1 Like