Gallery with some images

Processing Coding Questions
1

ir, can i ask u a question? I wrote this code in processing, where you have something like gallery with some images. And if you click on one picture its enlarges. But right now, where ever I click, it is same picture which enlarge and fit the “screen” help?

This is my original code

boolean makeLarge;
PImage bat;
PImage Mask;
PImage jpg_bat;
PImage jpg_mask;

void setup()
{
 size(400, 600);
 smooth();
 fill(255,255,255);
 textFont(createFont("sansSerif",32));
 textAlign(CENTER);

 bat = loadImage("imvbbbage.jpg");
 Mask = loadImage("iVEEmage.jpg");
 jpg_bat = loadImage("Serena+Williams.jpg");
 jpg_mask = loadImage("image.jpg");
}

void draw() {
 background(0);
 text("Click On An Image!", width/2, height/2);
 image(bat, 10,419, 70, 70);
 image(jpg_bat, 380,380, 140, 140);
 image(jpg_mask,415,10, 70,70);
 if (makeLarge)
 {
   image(Mask, 10, 10, 210, 210);
 }
 else
 {
   image(Mask, 10, 10, 70, 70);
 }
}

void mousePressed()
{
 makeLarge = true;
}

void mouseReleased()
{
  makeLarge = false;
}
1 Like
2

i not have your picture files, so i replace each image(X,a,b,c,d); with rect(a,b,c,d)

each one has to be treated like a button with click
( means you need to find if mouse is over it at click)

what you do on click is a other question
( you set a boolean variable, i set a float,
again, you need one for each picture / rectangle )
example:

// https://discourse.processing.org/t/gallery-with-some-images/8295
// each image ( or rectangle ) is a button, what should be zoomed on click

//PImage bat,Mask,jpg_bat,jpg_mask;
float zoom1=1, zoom2=1, zoom3=1, zoom4=1;

void setup() {
  size(500, 500);
  smooth();
  fill(255, 255, 255);
  textFont(createFont("sansSerif", 32));
  textAlign(CENTER);
  //  bat = loadImage("imvbbbage.jpg");
  //  Mask = loadImage("iVEEmage.jpg");
  //  jpg_bat = loadImage("Serena+Williams.jpg");
  //  jpg_mask = loadImage("image.jpg");
}

void draw() {
  background(200, 200, 0);
  text("Click On An Image!", width/2, height/2);
  stroke(0, 0, 200);
  //  image(bat, 10, 419, 70, 70);
  rect(10, 419, 70*zoom1, 70*zoom1);
  //  image(jpg_bat, 380, 380, 140, 140);   // that was too big
  rect(380, 380, 30*zoom2, 30*zoom2);
  //  image(jpg_mask, 415, 10, 70, 70);
  rect(415, 10, 70*zoom3, 70*zoom3);
  //image(Mask, 10, 10, 70, 70);
  rect(10, 10, 70*zoom4, 70*zoom4);
}
//_________________________________________________________________ mouse click left
void mousePressed() {
  if (mouseButton == LEFT) {
    if ( overRect(10, 419, 70, 70) )   zoom1=1.2;
    if ( overRect(380, 380, 30, 30) )  zoom2=1.2;
    if ( overRect(415, 10, 70, 70) )   zoom3=1.2;
    if ( overRect(10, 10, 70, 70) )    zoom4=1.2;
  }
}

//_________________________________________________________________ mouse position over rectangle yes/no
boolean overRect(int rx, int ry, int rwidth, int rheight) {
  if (mouseX >= rx && mouseX <= rx+rwidth   && 
    mouseY >= ry && mouseY <= ry+rheight)  return true;
  else                                       return false;
}

void mouseReleased() {
  zoom1=zoom2=zoom3=zoom4=1;
}
2 Likes
3

Thanks. Let’s say I have size(400,600) and I click and image, and fit the size. Of you get me lol
What do I need to change?

4

possibly a other way might be better:
problem is that if the ratio width height canvas and all pictures is not same
it might look ugly,

void setup() {
  size(500, 500);
  smooth();
  fill(255, 255, 255);
  textFont(createFont("sansSerif", 32));
  textAlign(CENTER);
  //  bat = loadImage("imvbbbage.jpg");
  //  Mask = loadImage("iVEEmage.jpg");
  //  jpg_bat = loadImage("Serena+Williams.jpg");
  //  jpg_mask = loadImage("image.jpg");
}

void draw() {
  background(200, 200, 0);
  text("Click On An Image!", width/2, height/2);
  stroke(0, 0, 200);
  //  image(bat, 10, 419, 70, 70);
  rect(10, 419, 70, 70);
  //  image(jpg_bat, 380, 380, 140, 140);   // that was too big
  rect(380, 380, 30, 30);
  //  image(jpg_mask, 415, 10, 70, 70);
  rect(415, 10, 70, 70);
  //image(Mask, 10, 10, 70, 70);
  rect(10, 10, 70, 70);
  // if zoom by mouse pressed ( hold ) and mouse over original pic just paint it over.
  if ( mousePressed && overRect(10, 419, 70, 70) )  rect(0,0, width,height);
  if ( mousePressed && overRect(380, 380, 30, 30))  rect(0,0, width,height);
  if ( mousePressed && overRect(415, 10, 70, 70) )  rect(0,0, width,height);
  if ( mousePressed && overRect(10, 10, 120, 60) )  rect(0,0, width,height);
  
}

//_________________________________________________________________ mouse position over rectangle yes/no
boolean overRect(int rx, int ry, int rwidth, int rheight) {
  if (mouseX >= rx && mouseX <= rx+rwidth   && 
    mouseY >= ry && mouseY <= ry+rheight)  return true;
  else                                       return false;
}

to verify the aspect ration might use something like

void calc_zoom(int i ) {  // calc max possible zoom without change of the ratio
  float zoomx,zoomy;
  if ( i == 1 ) { zoomx = width/70;  zoomy = height/70; zoom1 = (int)min(zoomx,zoomy);}
  if ( i == 2 ) { zoomx = width/30;  zoomy = height/30; zoom2 = (int)min(zoomx,zoomy);}
  if ( i == 3 ) { zoomx = width/70;  zoomy = height/70; zoom3 = (int)min(zoomx,zoomy);}
  if ( i == 4 ) { zoomx = width/120; zoomy = height/60; zoom4 = (int)min(zoomx,zoomy);}
}
2 Likes
5

Thanks you so much. I’m having fun with this code right now lol. I’ll hit you up later. :blush: