New Issue With Code / variable usage

Processing Coding Questions
1

The issue I am currently having with my code is it having it randomly display the image I want. I attempted to have a variable named finalImage in which it would be stored once it selected the random image but I cannot have it do so.

Additonally my second issue is how to have the mouse press pickup when I hover over the coordinates of the rectangle I created using rect(); (THIS PART IS LOCATED IN setup() )

 //This gives the button the functionality when hover over
void mousePressed() {
  if (overButton) { 
    link("http://www.processing.org");
  }
}
//Checks whether the mouse is being moved and not being pressed; it allows it to do so.
void mouseMoved() { 
  checkButtons(); 
}
//Checks whether the mouse is moving while being pressed. 
void mouseDragged() {
  checkButtons(); 
}
//This checks whether or not the mouse is being hovered upon. 
void checkButtons() {
  if (mouseX > 75 && mouseX < 230 && mouseY > 50 && mouseY < 50) {
    overButton = true;   
  } else {
    overButton = false;
  }
}
 //master variables  
PImage[] randomIMG = new PImage[5];
int numOfIMG;
int rand = 0;
PImage image1,image2,image3,image4,image5 , myChosenImage, finalImage;
float height = 100;
float width = 50;
float length = 150;
boolean overButton = false;

void setup() {
  
  size(400,400);
  
  randomIMG[0] = loadImage("image1.jpg");
  randomIMG[1] = loadImage("image2.jpg");
  randomIMG[2] = loadImage("image3.jpg");
  randomIMG[3] = loadImage("image4.jpg"); 
  randomIMG[4] = loadImage("image5.jpg");
  myChosenImage = loadImage("image5.jpg");
 
 int randomIndex = (int) random(5);
 PImage myChosenImage = randomIMG[randomIndex];
 myChosenImage.resize(100,125);
 println("a= " + randomIndex );
 myChosenImage = finalImage;
 
}
 
 




 void draw() { 
   
   //Adding Button Functionality 
   if (overButton == true) {
    fill(255);
  } else {
    noFill();
  }
  //This gives the button a distinct color if clicked. 
  
  background(0);
  fill(150);
  rect(75,50,height, width);
  rect(230,50,height, width);
  myChosenImage.resize(100,125);
  image(myChosenImage,155,145);
 }
//This gives the button the functionality when hover over
void mousePressed() {
  if (overButton) { 
    link("http://www.processing.org");
  }
}
//Checks whether the mouse is being moved and not being pressed; it allows it to do so.
void mouseMoved() { 
  checkButtons(); 
}
//Checks whether the mouse is moving while being pressed. 
void mouseDragged() {
  checkButtons(); 
}
//This checks whether or not the mouse is being hovered upon. 
void checkButtons() {
  if (mouseX > 75 && mouseX < 230 && mouseY > 50 && mouseY < 50) {
    overButton = true;   
  } else {
    overButton = false;
  }
}
1 Like
2

ok, lets start slowly:

  • -a- your variables

you declare numOfIMG rand but not use them,
instead in setup declare a randomIndex
what would be only local…

you declare
image1,image2,image3,image4,image5
for what

you declare height width ( used for rect )
and unsused length
this 3 words should not use as variables names

myChosenImage declared 2 times
and used for the random selection,
but overwritten by empty finalImage

  • -b- your button logic

mouse moved and draged should not be used for button check

the mouse over rectangle you call
checkButtons
but it is in a way that you only can check
one set of positions // one rectangle

anyhow you should have clean variables like
b1_x = 75 , b1_y = 50, b1_w = 50, b1_h=100;
and use that for draw rect and mouse over check

usually i see that a mouse_over_rect check
is done as a
boolean mouse_over_rect() {
}
instead of a
void checkButtons() {
overButton = true OR false
}
what could not work for 2 buttons anyhow.

  • -c- modular code

try to think of jobs what need to be done like

void get_images() {

}

void make_buttons() {

}

void setup() {
 get_images();
 make_buttons();
}

p.s. i edit your title

1 Like
3

Note that you inverted width and height in your setup values for your rects. And try to avoid to use variables with same names that methods of Processing. Use for exemple width1, I don’t know ^
And you declare a variable finalImage wich is useless
And for the clickable zone, it’s only because you’re wrong when you defined the area :

  if (mouseX > 75 && mouseX < 230 && mouseY > 50 && mouseY < 50) {

change it in :

  if (mouseX > 75 && mouseX < 230 && mouseY > 50 && mouseY < 100) {
1 Like