Background(image) not working

Good work here!

Good idea to use InButtonSelection as a variable

Remarks:

I ignore the idea to turn red and then off. Only going red for the moment.

No use to draw stuff in the function setup(). Draw stuff only in the function draw(). Use background at start of draw() so rects gets drawn throughout again and again fresh.

when you wan to see the buttons throughout you must draw them outside the if-clause (if (mousePressed)). Otherwise they appear only briefly (when use background at start of draw() ). To achieve this you could have separate color variables for each button and store its color therein.

when you want to change each button separately, InButtonSelection must be separate for each button. So use InButtonSelection1, InButtonSelection2, InButtonSelection3, InButtonSelection4

Do you want it possible to change them back and forth? Then you have to change the if-clauses :

    if (mouseY > 100 && mouseY < 350 && mouseX > 100 && mouseX < 350 ) {
      if (InButtonSelection1) {

Important: with mousePressed used as a variable, each mouse press gets registered multiple times. Bad in your case. (good for drawing continously).

  • When you use mousePressed() as function each mouse press gets registered only once. Better

Code example below.

Chrisir


boolean InButtonSelection1 = true;


void setup() {
  size(1920, 1080);
  background(222);
}

void draw() {
  background(222);

  // evaluate InButtonSelection1 
  if (InButtonSelection1) {
    fill(255, 0, 0);
    rect(100, 100, 250, 250);
  } else {
    fill(0);
    rect(100, 100, 250, 250);
  }
}

void mousePressed() {

  // set InButtonSelection1
  if (mouseY > 100 && mouseY < 350 &&
    mouseX > 100 && mouseX < 350 ) {

    // toggle InButtonSelection1
    if (InButtonSelection1) {
      InButtonSelection1 = false;
    } else {
      InButtonSelection1 = true;
    }
  }//if
  //
}
//
3 Likes

Now when you want to go from black to red button to off, you could make a int variable for each button that can be 0, 1 or 2.

The state 0 would signify black,
1 red,
2 off.

1 Like

ok that works but I wanted to let the button/s disappear when clicked and a text to appear. Also, a back button has to appear. If the back button is clicked, i want the other button/s to appear again. How should I do that

1 Like

This is the idea for your question

Chrisir

1 Like

i have literaly no idea how to do that.

can you write an example?

1 Like

i just go this:

boolean InButtonSelection1 = true;


void setup() {
  size(1920, 1080);
  background(222);
}

void draw() {
  background(222);

  // evaluate InButtonSelection1 
  if (InButtonSelection1) {
    fill(255, 0, 0);
    rect(100, 100, 250, 250);
  } else {
    fill(222);
    stroke(222);
    rect(100, 100, 250, 250);
  }
}

void mousePressed() {

  // set InButtonSelection1
  if (mouseY > 100 && mouseY < 350 &&
    mouseX > 100 && mouseX < 350 ) {

    // toggle InButtonSelection1
    if (InButtonSelection1) {
      InButtonSelection1 = false;
    } else {
      InButtonSelection1 = true;
    }
  }//if
  //
}
//
1 Like

basically i want to have 4 buttons on the screen, if you click one, all buttons disappear and a text and a “back button” appear. If you click the back button, the buttons of the beginning should appear. I absolutely dont know how to do that.
@Chrisir

1 Like

hi Ladan,
i just did a kind of button tutorial
what actually starts from a working

  • hardcoded toggle button
  • to a button function
  • a array of parameters using this function
  • a array of button class.

something like this might help to learn and develop
but if i give you just the whole thing it might be too much.
at the end of this
is a link for the JAVA code
the lesson for your next step might be in JEOPARDY_kll_008\l_2.pde

3 Likes

it teaches me how to create buttons, but can you explain, how i can do, what i want to do?

1 Like

like you say,

  • 4 buttons on page 0
  • 1 button on page 1

so there you need a

int state = 0

void draw() {
  background(200,0,200);
  if ( state == 0 ) draw_4_buttons();
  if ( state == 1 ) draw_back_button_and_some_text();
}

and the button action must change the state variable.

2 Likes

thanks, that really helped me and everything is working fine, expect one thing.

If i click the bottom half of the button on the bottom left corner, nothing happens.

that is the spot, where the back button is btw.

void setup() {

  size(1920, 1080);
  background(222);
}


color blue = color(3, 182, 252);
color grey = color(222);
color black = color(0);
int state = 0;





public void draw_4_buttons() {

  fill(0);
  rect(100, 100, 250, 250);
  //Button oben rechts
  rect(1570, 100, 250, 250);
  //Button unten links
  rect(100, 730, 250, 250);
  //Button unten rechts
  rect(1570, 730, 250, 250);
}





void draw_back_button_and_some_text1() {

  fill(0);
  textSize(55);
  text("Hier könnte ihre Werbung stehen1", 500, 55);

  fill(blue);
  rect(80, 870, 250, 100);


  fill(0);
  textSize(55);
  text("zurück", 110, 940);
}


void draw_back_button_and_some_text2() {

  fill(0);
  textSize(55);
  text("Hier könnte ihre Werbung stehen2", 500, 55);

  fill(blue);
  rect(80, 870, 250, 100);


  fill(0);
  textSize(55);
  text("zurück", 110, 940);
}

void draw_back_button_and_some_text3() {

  fill(0);
  textSize(55);
  text("Hier könnte ihre Werbung stehen3", 500, 55);

  fill(blue);
  rect(80, 870, 250, 100);


  fill(0);
  textSize(55);
  text("zurück", 110, 940);
}



void draw() {
  background(222);
  if ( state == 0 ) draw_4_buttons();
  if ( state == 1 ) draw_back_button_and_some_text1();
  if ( state == 2 ) draw_back_button_and_some_text2();
  if ( state == 3 ) draw_back_button_and_some_text3();



  //button oben links wird gedrückt
  if (mouseY > 100 && mouseY < 350 &&
    mouseX > 100 && mouseX < 350 ) {

    if (mousePressed) {

      state = 1;
    }
  }


  //button oben rechts wird gedrückt
  if (mouseY > 100 && mouseY < 350 && 
    mouseX > 1570 && mouseX < 1820 ) {

    if (mousePressed) {


      state = 2;
    }
  }

  //button unten links wird gedrückt

  if (mouseY > 730 && mouseY < 980 && 
    mouseX > 100 && mouseX < 350 ) {

    if (mousePressed) {


      state = 3;
    }
  }

  //zurück button wird gedrückt
  if (mouseY > 870 && mouseY < 970 && 
    mouseX > 80 && mouseX < 330) {

    

      if ( state != 0 ) {

        if(mousePressed){
          
          state = 0;
          
        }
        
        
      }
      
      
      
      
    
  }
}
1 Like

-a- the button thing you might clean up,
possibly use functions

  • boolean over(x,y,w,h){}
  • draw_button(x,y,w,h){}

-b- having the button check inside draw
and using hardcoded over for all 5 buttons does not work,
as you must have some add logic like

if ( over(x5,y5,w5,h5) && state > 0 ) { // back button pressed
}
1 Like

cleaning up isnt that important to me, but what do i have to do to get it to work?

1 Like

Most issues get solved because we clean up

Do you use rectMode(CENTER) somewhere?

2 Likes

the code for

  //button unten rechts wird gedrückt

is completely missing??
and not forget the && state == 0 logic for the first 4 buttons

1 Like

You are asking for help from this community and making your code presentable is a reasonable expectation.

At the very least you could have used “Edit > Auto Format” in Processing before posting.

Go through your code.
The problem is very obvious so I will not be assisting with this.

:slight_smile:

2 Likes

sorry for not making it very presentable, but i will do this.

First, the button click checking thing works, but i doessnt at the position of the back button.

it should just check if you click it and than it shoud change to state 3.

How doesnt it do that?

1 Like

ok i will cleanup :smiley:

and no

2 Likes

that is missing, because i want to solve the problem first, i can do that later. Also, the && state == 0 doesnt matter, but i added it.

2 Likes

your logic is not working, “over” is underlined red, and it says The function … does not exist, do i have to code the function or did i do something wrong?

1 Like