PImage scale when mouse is over

Processing Coding Questions
1

Hello, is it possible to scale a PImage by 10% when the mouse is over it and return to its normal size after the mouse is clicked?

void settings() {
  size(1080, 720, P2D);
  smooth();
}



void setup() {
  //Sfondo
  Uomo1 = loadImage("figura uomo 1.png");
  Uomo2 = loadImage("figura uomo 2.png");
  Foresta = loadImage("cold-fog-forest-1003124.jpg");
  Foresta.resize(1080, 720);
  Stanza = loadImage("castle-european-interiors-68389.jpg");
  Stanza.resize(1080, 720);
  background(0);


void draw() { 
  switch (i) {
  case 0 : 

    textSize(50);
    textAlign(CENTER);
    text("PROGETTO PROCESSING", width/2, 360);      //Titolo del progetto
    fill(255);

    textSize(30);
    textAlign(CENTER);
    text(".....................................", width/2, 500);   //Campo con informazioni dello studente
    fill(255);


    if ( millis () - timer > 5000) {
      timer = millis();
      i++;
    }
    break;


  case 1 :    
    background(Stanza); 
      if ( millis () - timer > 500 ){
        
      
    image(Uomo1, 200, 400, 138, 415);
    image(Uomo2, 650, 360, 138, 440);
      }

    beat.detect(player.mix);
    fill(#1A1F18, 100);
    noStroke();
    rect(0, 0, width, height); //Grandezza della finestra della composizione 
    translate(width/2, height/2); //Posiziona la figura al centro della composizione 
    fill(-1, 10);
    ellipse(0, 0, 2*rad, 2*rad);
    stroke(-1, 50);
    int bsize1 = player.bufferSize();
    for (int i = 0; i < bsize1 - 1; i+=5) {
      float x = (r)*cos(i*2*PI/bsize1);
      float y = (r)*sin(i*2*PI/bsize1);
      float x2 = (r + player.left.get(i)*100)*cos(i*2*PI/bsize1);
      float y2 = (r + player.left.get(i)*100)*sin(i*2*PI/bsize1);
      line(x, y, x2, y2);
        if (testoClick & mouse == 1) {
            textSize(35);
            text(b1, CENTER, -230);
            textAlign(CENTER);
            fill(255);
          }else if (testoClick & mouse == 2){
             textSize(35);
             text(b2, CENTER, -230);
             textAlign(CENTER);
             fill(255);
           }else if (testoClick & mouse == 3){
              textSize(35);
              text(b3, CENTER, -230);
              textAlign(CENTER);
              fill(255);
            }else if (testoClick & mouse == 4){
              textSize(35);
              text(b4, CENTER, -230);
              textAlign(CENTER);
              fill(255);
            }else{
              noFill();
              }
 }
    beginShape();
    noFill();
    stroke(-1, 50);
    endShape();

    if ( (millis () - timer > 25000) | mouse == 5) {
      timer = millis ();
      i++;
    }
    break;


  case 2:

    background(Foresta);
    image(Uomo1, 200, 400, 138, 415);
    image(Uomo2, 650, 360, 138, 415);
    beat.detect(player.mix);
    fill(#1A1F18, 100);
    noStroke();
    rect(0, 0, width, height); //Grandezza della finestra della composizione 
    translate(width/2, height/2); //Posiziona la figura al centro della composizione 
    fill(-1, 10);
    ellipse(0, 0, 2*rad, 2*rad);
    stroke(-1, 50);
    int bsize2 = player.bufferSize();
    for (int i = 0; i < bsize2 - 1; i+=5) {
      float x = (r)*cos(i*2*PI/bsize2);
      float y = (r)*sin(i*2*PI/bsize2);
      float x2 = (r + player.left.get(i)*100)*cos(i*2*PI/bsize2);
      float y2 = (r + player.left.get(i)*100)*sin(i*2*PI/bsize2);
      line(x, y, x2, y2);
    }
    beginShape();
    noFill();
    stroke(-1, 50);
    endShape();





    if ( millis () - timer > 1500) {
      timer = millis();
      i++;
    }
    break;

Thank you!

2

here a mod of the
File / Examples /
Basics / Image / LoadDisplayImage /

/**
 * Load and Display 
 * 
 * Images can be loaded and displayed to the screen at their actual size
 * or any other size. 
 */

PImage img;  // Declare variable "img" of type PImage
float scale = 1.0;
int off = 10;

void setup() {
  size(700, 500);
  // The image file must be in the data folder of the current sketch to load successfully
  img = loadImage("moonwalk.jpg");  // Load the image into the program  
}

void draw() {
  background(200,200,0);
  scale = 1.0;
  if ( mouseover() ) scale = 0.9;
  image(img, off, off, img.width*scale, img.height*scale);
}

boolean mouseover() {
  if ( ( mouseX > off && mouseX < img.width+off ) && ( mouseY > off && mouseY < img.height +off ) ) return true;
  return false;
}
1 Like
3

How can I prevent both Pimage from scaling simoultaneously?

float scale = 1.0;
int offx = 200;  int offy = 400; 
int offx1 = 650; int offy1 = 360;


void setup() {
  //Sfondo
  Uomo1 = loadImage("figura uomo 1.png");
  Uomo2 = loadImage("figura uomo 2.png");

}


void draw() { 
  switch (i) {
    background(Stanza); 
      scale = 1.0;
      if ( (mouseover() && mouseover1()) ) scale = 0.9;{
        if ( millis () - timer > 500 ){
            image(Uomo1, offx, offy, Uomo1.width*scale, Uomo1.height*scale);
            image(Uomo2, offx1, offy1, Uomo2.width*scale, Uomo2.height*scale); 
    //image(Uomo1, 200, 400, 138, 415);
    //image(Uomo2, 650, 360, 138, 440);
        
      }
     }
}


boolean mouseover() {
  if ( ( mouseX > offx && mouseX < Uomo1.width+offx ) && ( mouseY > offy && mouseY < Uomo1.height +offy) ) return false;
  return true; 
  } 
boolean mouseover1() {
  if ( ( mouseX > offx1 && mouseX < Uomo2.width+offx1) && ( mouseY > offy1 && mouseY < Uomo2.height +offy1 ) ) return false;
  return true;
}
4

as the picture files not available the img.width & height is unknown.

so the 2 pictures overlap?
in that case your code

(mouseover() && mouseover1()

can be true and you use same “scale” on both pictures.

try to give each its own logic and scale factor?

1 Like
5

Note that, while you can use the 5-argument version of image, this is really process intensive. Probably better to make a copy of your PImage, scale it by 10 percent, and then IF the mouse is over it, show the copy – otherwise show the original. That way you aren’t recomputing the scaling over, and over, and over…

2 Likes