Trying to make a image a button but cant seem to get it right

I am still learning a lot of things about processing since i have only been using it for a couple months, i am making a program for a lab for class and cant get the code to make the image a button work properly, i have looked at a lot of other posts on forums and cant find something that works the way i need it to. also i need to have the image loaded from the data folder because a lot of the examples ive seen they dont use it that way.

currently i am trying to make the Lidnt_Bunny the button and cant seem to get it, it probably is a simple error im making but hoping i can get some help, thanks in advance i appreciate all the help i get on here.

also is there a way to make the line that prints to the console just update the variable and not reprint the statement each time it is printed?

//Carmine 
//
//Lab 3
//

PImage ChocolateEggs;
//source for image https://groceries.morrisons.com/webshop/product/Cadbury-Mini-Eggs-Chocolate-Easter-Egg/309447011
PImage Peeps;
//Source for image https://www.amazon.com/Peeps-Marshmallow-Candy-Bunnies-Yellow/dp/B001HZWWQW?th=1
PImage Lidnt_Bunny;
//source for image https://www.amazon.com/Lindt-GOLD-BUNNY-Chocolate-Ounce/dp/B000OVRIDW
PFont f;
int BunnyCount;


void setup() {
  size(600, 400);
  background(35, 164, 214);
  ChocolateEggs= loadImage("ChocolateEggs.jpg");
  Peeps= loadImage("Peeps.jpg");
  Lidnt_Bunny= loadImage("Lindt_Bunny.jpg");
  f = loadFont("ComicSansMS-48.vlw");
}

void draw() {
  //draws images
  ChocolateEggs.resize(100, 100);
  image (ChocolateEggs, 50, 150);
  Peeps.resize(100,100);
  image (Peeps,200,150);
  Lidnt_Bunny.resize(100,100);
  image (Lidnt_Bunny,350,150);
  textFont (f, 18);
  fill(214,35,184);
  text ("Chocolate Eggs:",50,265);
  text("88 Pieces $5.99",50,285);
  text("Lindt Bunny:",350,270);
  text("3.5 oz $4.00",350,285);
  text("Peeps:",200,265);
  text("15 Count $2.99",200,285);
 }
 void mousePressed(){
   int Lidnt_BunnyWidth=Lidnt_Bunny.width;
   int Lidnt_BunnyHeight=Lidnt_Bunny.height;
   //if (mouseButton==LEFT){BunnyCount++;} else {BunnyCount=0;}
     //detects is mouse is clicked in image button
  if(mousePressed== true && mouseX<Lidnt_BunnyWidth && mouseY<Lidnt_BunnyHeight){
     BunnyCount++;

 }
 }

 void consolePrint(){
   print("Number of Choclate Bunnies "+ BunnyCount);

 }

Answers

  • edited April 2018

    the image is like a rectangle

    so you need to check

    • if mouseX is bigger than upper left corner and

    • if mouseY is bigger than upper left corner

    but also both must be inside the rectangle, so they must be smaller than lower right corner (which is

    • upper left corner plus width of image for mouseX and

    • upper left corner plus height of image for mouseY ) :

    So this is the if-clause:

          if (
            mouseX > Lidnt_BunnyX && 
            mouseX < Lidnt_BunnyX + Lidnt_BunnyWidth && 
            mouseY > Lidnt_BunnyY && 
            mouseY < Lidnt_BunnyY + Lidnt_BunnyHeight) {
            BunnyCount++;
            consolePrint();
          }
    

    OK?

    Chrisir ;-)

    //Carmine 
    //
    //Lab 3
    //
    
    PImage ChocolateEggs;
    //source for image https : // groceries.morrisons.com/webshop/product/Cadbury-Mini-Eggs-Chocolate-Easter-Egg/309447011
    PImage Peeps;
    //Source for image https : // www.amazon.com/Peeps-Marshmallow-Candy-Bunnies-Yellow/dp/B001HZWWQW?th=1
    PImage Lidnt_Bunny;
    //source for image https : // www.amazon.com/Lindt-GOLD-BUNNY-Chocolate-Ounce/dp/B000OVRIDW
    PFont f;
    int BunnyCount;
    
    
    int Lidnt_BunnyX, Lidnt_BunnyY;// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    
    void setup() {
      size(600, 400);
      background(35, 164, 214);
    
      ChocolateEggs= loadImage("ChocolateEggs.jpg");
      Peeps= loadImage("Peeps.jpg");
      Lidnt_Bunny= loadImage("Lindt_Bunny.jpg");
    
      f = createFont("ComicSansMS-48.vlw", 14);
    }
    
    void draw() {
      //draws images
      // ChocolateEggs.resize(100, 100);
      // image (ChocolateEggs, 50, 150);
      // Peeps.resize(100, 100);
      //image (Peeps, 200, 150);
      Lidnt_Bunny.resize(100, 100);
    
      image (Lidnt_Bunny, 350, 150);
      Lidnt_BunnyX=350;  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      Lidnt_BunnyY=150;
    
      textFont (f, 18);
      fill(214, 35, 184);
      text ("Chocolate Eggs:", 50, 265);
      text("88 Pieces $5.99", 50, 285);
      text("Lindt Bunny:", 350, 270);
      text("3.5 oz $4.00", 350, 285);
      text("Peeps:", 200, 265);
      text("15 Count $2.99", 200, 285);
    }
    void mousePressed() {
      int Lidnt_BunnyWidth=Lidnt_Bunny.width;
      int Lidnt_BunnyHeight=Lidnt_Bunny.height;
      //if (mouseButton==LEFT){BunnyCount++;} else {BunnyCount=0;}
      //detects is mouse is clicked in image button
      if (
        mouseX > Lidnt_BunnyX && 
        mouseX < Lidnt_BunnyX + Lidnt_BunnyWidth && 
        mouseY > Lidnt_BunnyY && 
        mouseY < Lidnt_BunnyY + Lidnt_BunnyHeight) {
        BunnyCount++;
        consolePrint();
      }
    }
    
    void consolePrint() {
      print("Number of Choclate Bunnies "+ BunnyCount+ ". ");
    }
    
  • edited April 2018

    instead of placing consolePrint(); in draw() where it gets always executed,

    You can place consolePrint(); just where the value BunnyCount changes, this is inside the if-clause where it says BunnyCount++;

    see above.

    OR just use text("Your Bunny Count "+BunnyCount, 220, 385);

  • ok that does help a lot with the image buttons but Lidnt_BunnyX has no value and is giving an error as well as all the other ones for that statement, i was orginally trying to figure out how to find the values so i can do that but i wasnt sure since i resized them, i havent worked much with images like this and my professor didnt cover much

    also with the console print i have decided im going to add a button to print all the statements so the variables can be added up as needed and then when the user is done they can press checkout and get their total

    i shouldve started this earlier lol i make such bad decisions most of the time...

  • edited April 2018

    but Lidnt_BunnyX has no value and is giving an error as well as all the other ones for that statement

    ??

    Lidnt_BunnyX gets its value in line 38 !!!!!!!!!!!!!!!!!!!!!

    (you can just use 350, 150 by the way)

    You must set Lidnt_BunnyX and Lidnt_BunnyY and the others like I did in line 38/39

    The variables Lidnt_BunnyX, Lidnt_BunnyY is just the position of the bunny like you see in this line: image (Lidnt_Bunny, 350, 150); - it's the upper left corner as I mentioned. It's not the size, but the position. That's why we add the width of the image to the x-position of the upper left corner (to get the lower right corner) later.

    check the lines with !!!!!!!! above.

    with the console print

    just use this throughout

    text("Your Bunny Count "+BunnyCount, 220, 385);
    

    Remark

    Don't use resize in draw() since it's quite slow. Use it in setup().

    setup is executed only once to prepare everything, draw() runs on and on 60 times per second. You don't want to resize something 60 times per second.

  • weird i copied it in how you wrote it and it gave me an error saying the variable had no value, which doesn’t make sense cause it looked right, i’ll have to check it out again when i get home

  • ok now that i have more time i really got to look what you did and cannot thank you enough this was stumping me real bad! now i just need to do some more and i can call it a night. THANK YOU

  • and now im mad, just realized i dont need buttons that its supposed to be randomly generated.... well thanks for educating me in making images buttons

Sign In or Register to comment.