Background(image) not working

Ladan · September 30, 2019, 6:32am

I have written this code:

void Setup(){

size(1920, 1080);
PImage img;
img = loadImage("desktop-wallpaper-9.jpg");
background(img);
  
}

and it just opens this window:

kll · September 30, 2019, 6:34am

try

void setup(){

and the picture must fit in size…

GoToLoop · September 30, 2019, 6:34am

It’s void setup() {, not void Setup() {:

Ladan · September 30, 2019, 7:24am

thanks! that worked! but now i am trying to to make a rectangle that changes its colour to red if you click it, but if i click it nothing happens:


void setup(){
  
PImage img  = loadImage("Lodo army text mit streifen.png");
size(1920, 1080);
background(img);
  
  rect(100, 100, 500, 500);
  
}

void Draw(){
 
  if(mouseY > 100 && mouseY < 600){
    
    if(mousePressed){
      fill(255, 0, 0);
      rect(100, 100, 500, 500);
      
    }
    
  }
  
}

the image is just so big, because my screen is smaller than full hd just ignore it

Waboqueox · September 30, 2019, 8:09am

Again, don’t use capital letters in functions

void draw(){

Chrisir · September 30, 2019, 10:16am

Processing is case sensitive

draw()

Also, you want the rect command outside the if clause

Also, the color is permanently; to change this set the original color before if, so it’s always restored

Ladan · September 30, 2019, 12:59pm

i thought, that i had to do that in that one xd, thanks

Ladan · October 1, 2019, 3:38pm

another question: i want to get Buttons(the rectangles) that disappear when you click them, so i can show text if you click them, but when i click one of them, all of them turn red, why? they turn red, because i want them to change colour before they disappear btw


boolean InButtonSelection = true;

void setup() {

  PImage img  = loadImage("Lodo army text mit streifen.png");
  size(1920, 1080);
  background(img);

  //Button oben links
  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() {
  //Button oben links
  if (mousePressed) {

    if (InButtonSelection) {

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

        fill(255, 0, 0);
        rect(100, 100, 250, 250);
        InButtonSelection = false;
      } else {

        fill(0);
        rect(100, 100, 250, 250);
      }
    }else{
      
      tint(0, 0);
      rect(100, 100, 250, 250);
      InButtonSelection = false;
      
  }

  //Button oben rechts
  if (mousePressed) {

    if (InButtonSelection) {

      if (mouseY > 100 && mouseY < 350 && mouseX > 1570 && mouseX < 1820 ) {


        fill(255, 0, 0);
        rect(1570, 100, 250, 250);
        InButtonSelection = false;
      } else {

        fill(0);       
        rect(1570, 100, 250, 250);
      }
    }else{
     
      tint(0, 0);
      rect(1570, 100, 250, 250);
      InButtonSelection = false;
      
    }
  }

  //Button unten links
  if (mousePressed) {

    if (InButtonSelection) {

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

        fill(255, 0, 0);
        rect(100, 730, 250, 250);
        InButtonSelection = false;
      } else {

        fill(0);
        rect(100, 730, 250, 250);
      }
    }else{
     
      tint(0, 0);
      rect(100, 730, 250, 250);
      InButtonSelection = false;
      
    }
  }

  //Button unten rechts
  if (mousePressed) {

    if (InButtonSelection) {

      if (mouseY > 730 && mouseY < 980 && mouseX > 1570 && mouseX < 1820 ) {

        fill(255, 0, 0);
        rect(1570, 730, 250, 250);
        InButtonSelection = false;
      } else {

        fill(0);
        rect(1570, 730, 250, 250);
      }
    }else{
     
      tint(0, 0);
      rect(1570, 730, 250, 250);
      InButtonSelection = false;
      
    }
  }
}
}

Chrisir · October 2, 2019, 6:29am

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
  //
}
//

Chrisir · October 2, 2019, 6:31am

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.

Ladan · October 21, 2019, 8:22am

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

Chrisir · October 21, 2019, 9:38am

This is the idea for your question

Chrisir

Ladan · November 5, 2019, 7:01am

i have literaly no idea how to do that.

can you write an example?

Ladan · November 5, 2019, 7:09am

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
  //
}
//

Ladan · November 5, 2019, 7:25am

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

kll · November 5, 2019, 8:01am

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

Ladan · November 5, 2019, 8:22am

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

kll · November 5, 2019, 8:27am

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.

Ladan · November 10, 2019, 1:07pm

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;
          
        }
        
        
      }
      
      
      
      
    
  }
}

kll · November 10, 2019, 1:14pm

-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
}

Topic		Replies	Views
I can`t load an Image as background Coding Questions	4	259	October 21, 2019
Why this code not working Coding Questions	4	320	July 22, 2019
Problem loading screen Coding Questions	7	682	September 20, 2021
Resize background image Coding Questions	1	761	May 16, 2020
Background Image won't load Coding Questions	2	535	November 30, 2019

Background(image) not working

Related Topics