# Processing, button, void

**URL:** https://discourse.processing.org/t/processing-button-void/11199
**Category:** Coding Questions
**Created:** [May 13, 2019, 4:58pm UTC](https://discourse.processing.org/t/processing-button-void/11199 "2019-05-13T16:58:43Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 13, 2019, 4:58pm UTC](https://discourse.processing.org/t/processing-button-void/11199/1 "2019-05-13T16:58:43Z")

</div>

Hello everyone I have a presentation of a computer game and my program works very well but when I have to add a button there is a problem with void reset. I will need your help please to be able to add a menu with a button that directs me to the game. Thank you for your help. Here is the code:

PImage ile;//fond  
bird b = new bird();//nouvelle partie  
pillar[] p = new pillar[3];//batons  
boolean end=false;  
boolean intro=true;  
int score=0;//score

void setup()  
{  
ile = loadImage(“Fond.png”);//fond  
size(1000, 800);//ecran  
for (int i = 0; i\<3; i++) {  
p[i]=new pillar(i);//batons  
}  
}

void draw() {  
background(ile);//fond

if (end) {  
b.move(); //mouvement de la balle  
}  
b.drawBird(); //vision de balle  
if (end) {  
b.drag(); //redessente  
}  
b.checkCollisions(); //collision  
for (int i = 0; i\<3; i++) {  
p[i].drawPillar();//batons  
p[i].checkPosition();//batons  
}  
fill(0);//couleur fond encadrement

textSize(32); //taille de l’écriture  
if (end) {  
rect(20, 20, 100, 50);//cadre score  
fill(255);//texte score  
text(score, 30, 58); //texte score  
} else {  
rect(150, 100, 220, 50);//encadrement  
rect(150, 200, 220, 50);//encadrement  
rect(150, 300, 220, 50);//encadrement  
fill(255); //couleur

```
if (intro) {//debut
  text("Flappy Rabbit", 155, 140);//titre debut
  text("Click to Play ", 165, 240);//debut
  text("Menu ", 175, 340);//menu
} else { //si perdu
  text("Game Over", 170, 140);//fin
  text("score", 180, 240);//score
  text("menu", 175, 340);//score
}

```

}

}

class bird {  
float xPos, yPos, ySpeed; //position de la balle  
bird() {  
xPos = 250;//position de la balle au début  
yPos = 400;//position de la balle au début  
}  
void drawBird() {  
stroke(#FFA500);  
noFill();  
strokeWeight(5);  
ellipse(xPos, yPos, 20, 20);//boule  
}  
void jump() {  
ySpeed=-10;//vitesse  
}  
void drag() {  
ySpeed+=0.4;  
}  
void move() {  
yPos+=ySpeed;  
for (int i = 0; i\<3; i++) {  
p[i].xPos-=3;  
}  
}  
void checkCollisions() {  
if (yPos\>800) {  
end=false;  
}  
for (int i = 0; i\<3; i++) {  
if ((xPos\<p[i].xPos+10&&xPos\>p[i].xPos-10)&&(yPos\<p[i].opening-100||yPos\>p[i].opening+100)) {  
end=false;  
}  
}  
}  
}  
class pillar {  
float xPos, opening;  
boolean cashed = false;  
pillar(int i) {  
xPos = 100+(i_200);  
opening = random(600)+100;  
}  
void drawPillar() {  
line(xPos, 0, xPos, opening-100);  
line(xPos, opening+100, xPos, 800);  
}  
void checkPosition() {  
if (xPos\<0) {  
xPos+=(200_3);  
opening = random(600)+100;  
cashed=false;  
}  
if (xPos\<250&&cashed==false) {  
cashed=true;  
score++;  
}  
}  
}  
void reset() {  
end=true;  
score=0;  
b.yPos=400;  
for (int i = 0; i\<3; i++) {  
p[i].xPos+=550;  
p[i].cashed = false;

}  
}  
void mousePressed() {//sauter avec la souris  
b.jump();  
intro=false;  
if (end==false) {  
reset();  
}  
}  
void keyPressed() {//sauter avec la barre d’espace  
b.jump();  
intro=false;  
if (end==false) {  
reset();  
}  
}

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 13, 2019, 6:50pm UTC](https://discourse.processing.org/t/processing-button-void/11199/2 "2019-05-13T18:50:38Z")

</div>

Normally use a state variable for this

It’s int state=0;

Declare that before setup ()

It tells the program which screen to show.

So in draw() say

```auto
if(state==0) {
// display start screen 
}
else if (state==1) {
// show game 
}
else if (state==2) {
// after the game: do you want to play again...?
}

```

Nothing outside of this is allowed in draw

The reset button is shown only in the last screen

In theory the same if-clause is necessary in keyPressed() and mousePressed(), so the Button is only evaluated in the last screen

Chrisir

---

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 13, 2019, 7:01pm UTC](https://discourse.processing.org/t/processing-button-void/11199/3 "2019-05-13T19:01:42Z")

</div>

thank you but I do not understand where I have to put it or / and instead of whom and what should I put inside

PImage ile;//fond  
bird b = new bird();//nouvelle partie  
pillar[] p = new pillar[3];//batons  
boolean end=false;  
boolean intro=true;  
int score=0;//score

void setup()  
{  
ile = loadImage(“Fond.png”);//fond  
size(1000, 800);//ecran  
for (int i = 0; i\<3; i++) {  
p[i]=new pillar(i);//batons  
}  
}

void draw() {  
background(ile);//fond

if (end) {  
b.move(); //mouvement de la balle  
}  
b.drawBird(); //vision de balle  
if (end) {  
b.drag(); //redessente  
}  
b.checkCollisions(); //collision  
for (int i = 0; i\<3; i++) {  
p[i].drawPillar();//batons  
p[i].checkPosition();//batons  
}  
fill(0);//couleur fond encadrement

textSize(32); //taille de l’écriture  
if (end) {  
rect(20, 20, 100, 50);//cadre score  
fill(255);//texte score  
text(score, 30, 58); //texte score  
} else {  
rect(150, 100, 220, 50);//encadrement  
rect(150, 200, 220, 50);//encadrement  
rect(150, 300, 220, 50);//encadrement  
fill(255); //couleur

```
if (intro) {//debut
  text("Flappy Rabbit", 155, 140);//titre debut
  text("Click to Play ", 165, 240);//debut
  text("Menu ", 175, 340);//menu
} else { //si perdu
  text("Game Over", 170, 140);//fin
  text("score", 180, 240);//score
  text("menu", 175, 340);//score
}

```

}  
if(state==0) {

}  
else if (state==1) {

}  
else if (state==2) {

}

}

class bird {  
float xPos, yPos, ySpeed; //position de la balle  
bird() {  
xPos = 250;//position de la balle au début  
yPos = 400;//position de la balle au début  
}  
void drawBird() {  
stroke(#FFA500);  
noFill();  
strokeWeight(5);  
ellipse(xPos, yPos, 20, 20);//boule  
}  
void jump() {  
ySpeed=-10;//vitesse  
}  
void drag() {  
ySpeed+=0.4;  
}  
void move() {  
yPos+=ySpeed;  
for (int i = 0; i\<3; i++) {  
p[i].xPos-=3;  
}  
}  
void checkCollisions() {  
if (yPos\>800) {  
end=false;  
}  
for (int i = 0; i\<3; i++) {  
if ((xPos\<p[i].xPos+10&&xPos\>p[i].xPos-10)&&(yPos\<p[i].opening-100||yPos\>p[i].opening+100)) {  
end=false;  
}  
}  
}  
}  
class pillar {  
float xPos, opening;  
boolean cashed = false;  
pillar(int i) {  
xPos = 100+(i_200);  
opening = random(600)+100;  
}  
void drawPillar() {  
line(xPos, 0, xPos, opening-100);  
line(xPos, opening+100, xPos, 800);  
}  
void checkPosition() {  
if (xPos\<0) {  
xPos+=(200_3);  
opening = random(600)+100;  
cashed=false;  
}  
if (xPos\<250&&cashed==false) {  
cashed=true;  
score++;  
}  
}  
}  
void reset() {  
end=true;  
score=0;  
b.yPos=400;  
for (int i = 0; i\<3; i++) {  
p[i].xPos+=550;  
p[i].cashed = false;

}  
}  
void mousePressed() {//sauter avec la souris  
b.jump();  
intro=false;  
if (end==false) {  
reset();  
}  
}  
void keyPressed() {//sauter avec la barre d’espace  
b.jump();  
intro=false;  
if (end==false) {  
reset();  
}  
}

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 13, 2019, 8:34pm UTC](https://discourse.processing.org/t/processing-button-void/11199/4 "2019-05-13T20:34:23Z")

</div>

Just follow my instructions

Apply the state system in draw()

have what you have now eg. as state==0

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 14, 2019, 7:48pm UTC](https://discourse.processing.org/t/processing-button-void/11199/5 "2019-05-14T19:48:17Z")

</div>

```auto

PImage ile;//fond
bird b = new bird();//nouvelle partie
pillar[] p = new pillar[3];//batons

int score=0;//score

int state = 0; 

void setup() {
  ile = loadImage("Fond.png");//fond
  size(1000, 800);//ecran
  for (int i = 0; i<3; i++) {
    p[i]=new pillar(i);//batons
  }
}

void draw() {
  background(0);//ile/ fond

  if (state==0) {

    // intro 

    textSize(32); //taille de l’écriture
    fill(#FFA500);

    rect(20, 20, 100, 50);//cadre score
    fill(255);//texte score
    text(score, 30, 58); //texte score

    fill(#FFA500);
    rect(150, 100, 220, 50);//encadrement
    rect(150, 200, 220, 50);//encadrement
    rect(150, 300, 220, 50);//encadrement
    fill(255); //couleur

    text("Flappy Rabbit", 155, 140);//titre debut
    text("Click to Play ", 165, 240);//debut
    text("Menu ", 175, 340);//menu
  } else if (state==1) {

    // GAME 

    background(0);//ile/ fond

    b.move(); //mouvement de la balle

    b.drawBird(); //vision de balle

    b.drag(); //redessente

    b.checkCollisions(); //collision

    for (int i = 0; i<3; i++) {
      p[i].drawPillar();//batons
      p[i].checkPosition();//batons
    }

    fill(0);//couleur fond encadrement
    textSize(32); //taille de l’écriture
    //
  } else if (state==2) {
    //
    //si perdu
    // 
    textSize(32); //taille de l’écriture
    fill(#FFA500);
    rect(150, 100, 220, 50);//encadrement
    rect(150, 200, 220, 50);//encadrement
    rect(150, 300, 220, 50);//encadrement
    fill(255); //couleur

    text("Game Over", 170, 140);//fin
    text("score", 180, 240);//score
    text("menu", 175, 340);//score
  }// else if
  //
}//func 

void reset() {
  score=0;
  b.yPos=400;
  b.ySpeed=0; 
  for (int i = 0; i<3; i++) {
    p[i].xPos+=550;
    p[i].cashed = false;
  }
}

void mousePressed() {
  //sauter avec la souris
  // to do like in keyPressed()
}

void keyPressed() {
  //sauter avec la barre d’espace
  switch(state) {
  case 0: 
    state=1; 
    reset();
    break; 

  case 1: 
    b.jump();
    break; 

  case 2: 
    reset();
    state=0; 
    break; 
    //
  }//switch
}

// ============================================================================================
// from now on only classes 
class bird {

  float xPos, yPos, ySpeed; //position de la balle
  bird() {
    xPos = 250;//position de la balle au début
    yPos = 400;//position de la balle au début
  }
  void drawBird() {
    stroke(#FFA500);
    noFill();
    strokeWeight(5);
    if (yPos<10) 
      yPos=10; 
    ellipse(xPos, yPos, 20, 20);//boule
  }
  void jump() {
    ySpeed=-10;//vitesse
  }
  void drag() {
    ySpeed+=0.4;
  }
  void move() {
    yPos+=ySpeed;
    for (int i = 0; i<3; i++) {
      p[i].xPos-=3;
    }
  }
  void checkCollisions() {
    if (yPos>800) {
      state=2;
    }
    for (int i = 0; i<3; i++) {
      if ((xPos<p[i].xPos+10&&xPos>p[i].xPos-10)&&(yPos<p[i].opening-100||yPos>p[i].opening+100)) {
        state=2;
      }
    }
  }
}//class

class pillar {
  float xPos, opening;
  boolean cashed = false;

  pillar(int i) {
    xPos = 100+(i*200);
    opening = random(600)+100;
  }

  void drawPillar() {
    line(xPos, 0, xPos, opening-100);
    line(xPos, opening+100, xPos, 800);
  }

  void checkPosition() {
    if (xPos<0) {
      xPos+=(2003);
      opening = random(600)+100;
      cashed=false;
    }
    if (xPos<250&&cashed==false) {
      cashed=true;
      score++;
    }
  }
}//class
//

```

---

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 14, 2019, 7:53pm UTC](https://discourse.processing.org/t/processing-button-void/11199/6 "2019-05-14T19:53:33Z")

</div>

thank you so much for helping me i will see and i will tell you if it works. thanks again

---

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 14, 2019, 7:59pm UTC](https://discourse.processing.org/t/processing-button-void/11199/7 "2019-05-14T19:59:28Z")

</div>

I have a question why there are two parties

---

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 14, 2019, 8:09pm UTC](https://discourse.processing.org/t/processing-button-void/11199/8 "2019-05-14T20:09:01Z")

</div>

and if I want to put a clickable button where should I put it

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 14, 2019, 9:12pm UTC](https://discourse.processing.org/t/processing-button-void/11199/9 "2019-05-14T21:12:25Z")

</div>

Show button in the correct state in draw

Evaluate in mousePressed

See button example

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 14, 2019, 9:19pm UTC](https://discourse.processing.org/t/processing-button-void/11199/10 "2019-05-14T21:19:21Z")

</div>

See also here

> [@How to display class button](https://discourse.processing.org/t/how-to-display-class-button/11181/5):
>
> But joseph is correct You make the objects in setup and say … a, 1 Look at the constructor: caption is now a, name 1 But then with switch, you eval the caption (wrong) and not the name. You should eval the name. Remark Besides, you don’t use the class / OOP correctly. You don’t use caption and x,y. The entire switch() is unnecessary See the tutorial: [https://www.processing.org/tutorials/objects/](https://www.processing.org/tutorials/objects/) Your sketch and a new sketch Here is your sketch, this time with a working switch() using n…

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 15, 2019, 7:10am UTC](https://discourse.processing.org/t/processing-button-void/11199/11 "2019-05-15T07:10:39Z")

</div>

> [@macabol](#):
>
> why there are two parties

What parties do you mean?

In draw() there are 3 screens (state tells which screen is the current one) for intro, game and gameOver

This replaces the boolean end and intro

---

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 15, 2019, 12:10pm UTC](https://discourse.processing.org/t/processing-button-void/11199/12 "2019-05-15T12:10:48Z")

</div>

Thank you for all this information I created a button that when you click on it changes color and I would like that when I click on the game starts. He is in void draw

PImage ile;//fond  
bird b = new bird();//nouvelle partie  
pillar[] p = new pillar[3];//batons

int score=0;//score

int state = 0;

void setup() {  
ile = loadImage(“Fond.png”);//fond  
size(1000, 800);//ecran  
for (int i = 0; i\<3; i++) {  
p[i]=new pillar(i);//batons  
}  
}

void draw() {  
background(ile);//ile/ fond

if (mousePressed && (mouseButton == LEFT)) {  
fill(48);  
} else {  
fill(0);  
}  
rect(150, 200, 220, 50);//encadrement

if (state==0) {

```
// intro 

textSize(32); //taille de l’écriture
fill(#FFA500);

rect(20, 20, 100, 50);//cadre score
fill(255);//texte score
text(score, 30, 58); //texte score

fill(#FF0000);
rect(150, 100, 220, 50);//encadrement

rect(150, 300, 220, 50);//encadrement
fill(255); //couleur

text("Flappy Rabbit", 155, 140);//titre debut
text("Click to Play ", 165, 240);//debut
text("Menu ", 175, 340);//menu

```

} else if (state==1) {

```
// GAME 

background(ile);//ile/ fond

b.move(); //mouvement de la balle

b.drawBird(); //vision de balle

b.drag(); //redessente

b.checkCollisions(); //collision

for (int i = 0; i<3; i++) {
  p[i].drawPillar();//batons
  p[i].checkPosition();//batons
}

fill(0);//couleur fond encadrement
textSize(32); //taille de l’écriture
//

```

} else if (state==2) {  
//  
//si perdu  
//  
textSize(32); //taille de l’écriture  
fill(#FFA500);  
rect(150, 100, 220, 50);//encadrement  
rect(150, 200, 220, 50);//encadrement  
rect(150, 300, 220, 50);//encadrement  
fill(255); //couleur

```
text("Game Over", 170, 140);//fin
text("score", 180, 240);//score
text("menu", 175, 340);//score

```

}// else if  
//  
}//func

void reset() {  
score=0;  
b.yPos=400;  
b.ySpeed=0;  
for (int i = 0; i\<3; i++) {  
p[i].xPos+=550;  
p[i].cashed = false;  
}  
}

void mousePressed() {  
//sauter avec la souris  
}  
void keyPressed() {  
//sauter avec la barre d’espace  
switch(state) {  
case 0:  
state=1;  
reset();  
break;

case 1:  
b.jump();  
break;

case 2:  
reset();  
state=0;  
break;  
//  
}//switch  
}

// ============================================================================================  
// from now on only classes  
class bird {

float xPos, yPos, ySpeed; //position de la balle  
bird() {  
xPos = 250;//position de la balle au début  
yPos = 400;//position de la balle au début  
}  
void drawBird() {  
stroke(#FFA500);  
noFill();  
strokeWeight(5);  
if (yPos\<10)  
yPos=10;  
ellipse(xPos, yPos, 20, 20);//boule  
}  
void jump() {  
ySpeed=-10;//vitesse  
}  
void drag() {  
ySpeed+=0.4;  
}  
void move() {  
yPos+=ySpeed;  
for (int i = 0; i\<3; i++) {  
p[i].xPos-=3;  
}  
}  
void checkCollisions() {  
if (yPos\>800) {  
state=2;  
}  
for (int i = 0; i\<3; i++) {  
if ((xPos\<p[i].xPos+10&&xPos\>p[i].xPos-10)&&(yPos\<p[i].opening-100||yPos\>p[i].opening+100)) {  
state=2;  
}  
}  
}  
}//class

class pillar {  
float xPos, opening;  
boolean cashed = false;

pillar(int i) {  
xPos = 100+(i\*200);  
opening = random(600)+100;  
}

void drawPillar() {  
line(xPos, 0, xPos, opening-100);  
line(xPos, opening+100, xPos, 800);  
}

void checkPosition() {  
if (xPos\<0) {  
xPos+=(2003);  
opening = random(600)+100;  
cashed=false;  
}  
if (xPos\<250&&cashed==false) {  
cashed=true;  
score++;  
}  
}  
}//class  
//

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 15, 2019, 12:25pm UTC](https://discourse.processing.org/t/processing-button-void/11199/13 "2019-05-15T12:25:44Z")

</div>

**Posting in the forum**

Prior to posting hit ctrl-t in processing

After copy and paste your code, select the code section using the mouse and click `</>` icon in the small command bar please

**Your button**

- First: nothing is allowed outside the `if (state==0)......else if (state==1)....else if (state==2)....}` construct in `draw()`. Because you don’t want to display or evaluate your button during the game.

- Second Using mousePressed as a variable is difficult. Better evaluate your button in the function mousePressed() that you already have.

- 3rd: With `if(mouseX>x1 && ....` you check whether the mouse has been clicked inside the button and not somewhere else or in which button it has been clicked.

- 4th: When the button has been clicked and you want to start the game, set `state` to 1.

**Example**

```auto
void mousePressed() {
  switch(state) {
  case 0:

    float x1=150;
    float y1=200;
    float w1=220;
    float h1=50;

    if (mouseX > x1 && 
      mouseX < x1 + w1 && 
      mouseY > y1 &&
      mouseY < y1 + h1) { 
      // is over the rect of the button 

      state=1;
      reset();
    }
    break;

  case 1:
    b.jump();
    break;

  case 2:
    reset();
    state=0;
    break;
    //
  }//switch
}

```

Chrisir

---

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 15, 2019, 1:09pm UTC](https://discourse.processing.org/t/processing-button-void/11199/14 "2019-05-15T13:09:33Z")

</div>

Thank you very much and if I want to put back a button with “menu” so that when I click on menu it directs me to another page (open ofice word or processing)

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 15, 2019, 1:18pm UTC](https://discourse.processing.org/t/processing-button-void/11199/15 "2019-05-15T13:18:26Z")

</div>

Those values in the function mousePressed()

```auto
    float x1=150;
    float y1=200;
    float w1=220;
    float h1=50;

```

represent one button. It’s position and size.

They must match the position on the screen, where the text / rect for this button is. You could make the variables global and use them in mousePressed() and when displaying the button. To have this in one place in the code I made the `class Button` in the code I linked to above.

**A 2nd button**

For a 2nd button use

```auto
    float x2=150;
    float y2=320; // !!!!!
    float w2=220;
    float h1=50;

```

for example (where the menu text is!!!)

and evaluate it with if.

To display a menu with Word etc., make a new `else if (state==4)....` and display the menu there…

make it in draw, in mousePressed and in keyPressed…

Chrisir

---

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 15, 2019, 1:58pm UTC](https://discourse.processing.org/t/processing-button-void/11199/16 "2019-05-15T13:58:21Z")

</div>

Thank you for everything I have a last question then I leave. How could I change the ball into an image I took on the internet?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 15, 2019, 2:14pm UTC](https://discourse.processing.org/t/processing-button-void/11199/17 "2019-05-15T14:14:47Z")

</div>

that’s easy

save the image in the folder where the sketch is

look at loadImage() in the reference and then at the image() command

[https://www.processing.org/reference/loadImage\_.html](https://www.processing.org/reference/loadImage_.html)

**Example**

```auto

PImage img;

void setup() {
  img = loadImage("laDefense.jpg");
}

void draw() {
  image(img, b.xPos, b.yPos); // your bird !!!!!!!!!!!!!!!!!!!!!
}

```

---

<div class="post-metadata">

### Author: ![macabol](https://avatars.discourse-cdn.com/v4/letter/m/c4cdca/32.png) [@macabol](https://discourse.processing.org/u/macabol)
#### Post date: [May 15, 2019, 2:21pm UTC](https://discourse.processing.org/t/processing-button-void/11199/18 "2019-05-15T14:21:16Z")

</div>

But it just displays the image but it does not change the ball jumping during the game

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 15, 2019, 2:22pm UTC](https://discourse.processing.org/t/processing-button-void/11199/19 "2019-05-15T14:22:14Z")

</div>

Without seeing your code it’s guess work…

did you tell image the correct variables b.xpos or whatever…??

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [May 15, 2019, 2:23pm UTC](https://discourse.processing.org/t/processing-button-void/11199/20 "2019-05-15T14:23:09Z")

</div>

> [@macabol](#):
>
> ellipse(xPos, yPos, 20, 20);//boule

That’s the line in drawBird you need to replace

[Next page](https://discourse.processing.org/t/processing-button-void/11199.md?page=2)