Character and button

hello I would add a button that can make me choose different character when I play. Thank you for your answer here is my script:

PImage lapin;//image boule
PImage fond;//fond
PImage fleche;//fleche
PImage fleche2;//fleche2
PImage win; //gagner
PFont police;//variable ecriture
bird b = new bird();//nouvelle partie //variable lapin

pillar[] p = new pillar[3];//variable batons

int score=0;//score
int timer; //temps
int i; //temps
int state = 0;//inserer des switch pour inserer des "case" /variable state/ (etat)
//pour simplifier if et else lorsqu'il y a plusieur alternative

int level=1;  //nombre decimaux



void setup() { //expliquer les variable
  //
  timer = millis(); //temps /milieme de seconde
  lapin = loadImage("lapin.png");//image du lapin
  fond = loadImage("Fond.png");//image fond
  fleche = loadImage("fleche.png");//image fleche droite
  fleche2 = loadImage("fleche2.png");//image fleche gauche
  win = loadImage("gagner.png");//image gagner
  size(1000, 800);//ecran
  for (int i = 0; i<3; i++) {
    p[i]=new pillar(i);//batons
  }
}

void draw() { //void--) fonction
  background(fond); // fond

  if (state==0) { //debut /etat0

    // intro 

    if (mousePressed && (mouseButton == LEFT)) { //appuyer sur le bouton
      fill(200); //couleur gris quand on clique
    } else {
      fill(0); //couleur noir case
    }
    stroke(#FFA500);//encadrement rectangle
    strokeWeight(5);//epaisseur rectangle
    rect(340, 200, 220, 50);//encadrement 
    image(fleche, 200, 175); // fleche image
    image(fleche2, 575, 175); // fleche image
    rect(340, 300, 220, 50);//encadrement
    image(fleche, 200, 275);// fleche image
    image(fleche2, 575, 275); // fleche image
    rect(340, 400, 220, 50);//encadrement
    image(fleche, 200, 375);// fleche image
    image(fleche2, 575, 375); // fleche image
    rect(340, 500, 220, 50);//encadrement
    image(fleche, 200, 475);// fleche image
    image(fleche2, 575, 475); // fleche image
    rect(340, 600, 220, 50);//encadrement
    image(fleche2, 575, 575); // fleche image
    image(fleche, 200, 575);// fleche image

    fill(#FFA500); //couleur écriture

    fill(#FF0000); //couleur cadre
    rect(310, 50, 300, 100);//encadrement
    police = loadFont("GentiumBasic-Italic-48.vlw");//type ecriture
    textFont(police, 42);//taille
    fill(255); //couleur
    text("Flappy Rabbit", 350, 115);//text titre debut
    text("NIVEAU 1 ", 370, 240);//texte niv1
    text("NIVEAU 2", 370, 340);//texte niv2
    text("REGLE ", 395, 440);//texte regle
    text("NIVEAU 3", 370, 540);//texte niv3 
    text("NIVEAU 4", 370, 640);//texte niv 4
  } 



  //------

  else if (state==1) {//pendant le jeu/ etat 1

    // GAME 

    if (millis()-timer > 10100) { //max de miliseconde
      timer = millis(); //miliseconde
      i++; //1+1 augmenter une valeur de 1
    }

    background(fond); // fond
    fill(#08088A);//couleur cadre
    rect(900, 0, 100, 50);//cadre score
    fill(#FFFF00);//texte score  
    text(score, 930, 36); //texte score
    fill(#08088A); //couleur level
    text("Level "+level, 450, 30); //texte level width(largueur)/faire +1 à chaque level au dessus

    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
    //
    if (millis()-timer > 10000) { //miliseconde
      state = 4; // si depasser 5000 alors aller page 4(gagner)
    }

    fill(#08088A);
    rect(0, 0, 100, 50);//cadre temps
    fill(#FFFF00);//couleur temps
    text(millis()-timer, 27, 33); //texte chrono
  } 
  //---------------
  else if (state==2) { //si perdu/ etat 2


    textSize(32); //taille de l’écriture
    fill(#FF0000 ); //couleur case
    rect(340, 100, 220, 50);//encadrement
    if (mousePressed && (mouseButton == LEFT)) { //appuyer sur le bouton
      fill(200); //couleur gris si clique
    } else {
      fill(0); //couleur noir case
    }
    rect(340, 200, 220, 50);//encadrement
    fill(255); //couleur ecriture

    text("GAME OVER", 370, 140);//fin
    text("ACCUEIL", 390, 235);//score
  } 

  // ------------------------

  else if (state==3) { //regle du jeu/ etat 3

    // règle 

    background(#1601FD);// fond
    textSize(32); //taille de l’écriture

    fill(#21F904); //couleur texte case
    text("REGLE DU JEU", 350, 50); //texte
    fill(0); //couleur case
    text("Le but du jeu est de:", 15, 150);//texte
    fill(#FF0000); //couleur case
    text("-passer entre les poteaux sans les toucher ", 15, 200);//texte 
    text("-marquer le plus de points", 15, 250); //texte
    text("-rester en vie jusqu'à que x de temps s'est écoulé", 15, 300);//texte
    fill(0); //couleur case
    text("Comment jouer?", 15, 400);//texte
    fill(#FF0000); //couleur case
    text("-appuyer sur la barre espace ou une lettre pour sauter ", 15, 450); //texte
    text("-choisir le niveau de difficulté ", 15, 500);//texte
    text("-rester concentré", 15, 550);//texte

    if (mousePressed && (mouseButton == LEFT)) { //appuyer sur le bouton
      fill(200);//couleur grise si clique
    } else {
      fill(0); //couleur noir case
    }
    rect(400, 600, 220, 50);//encadrement
    fill(255); //couleur
    text("RETOUR", 450, 640); //case retour
  } 
  // ------------------------
  else if (state==4) { //si gagner/ etat4

    background(#1601FD);// fond bleu
    textSize(32); //taille de l’écriture
    if (mousePressed && (mouseButton == LEFT)) { //appuyer sur le bouton
      fill(200); //couleur gris si clique
    } else {
      fill(0); //couleur noir case
    }
    rect(400, 600, 220, 50);//encadrement
    fill(255); //couleur cadre 
    text("MENU", 450, 640);//case retour menu

    textSize(90); //taille de l’écriture
    if (mousePressed && (mouseButton == LEFT)) { //appuyer sur le bouton
      fill(200);//gris si clique
    } else {
      fill(0);//case noir
    }

    image(win, 250, 150); // gagner image
  }
  // ------------------------
}

void reset() { //recomencer
  score=0;//score revient à 0
  b.yPos=400; //position oiseau
  b.ySpeed=0; //position oiseau
  for (int i = 0; i<3; i++) {
    p[i].xPos+=550;
    p[i].cashed = false;
  }
  timer=0; //temps remi à 0
}

void mousePressed() {
  // souris

  switch(state) { // comme if et else mais plus simple quand 3 alternatives

  case 0: //cas 0 /debut 

    float x1=340; //emplacement cadre  //clique to play / Level 1
    float y1=200;
    float w1=220;
    float h1=50;

    if (mouseX > x1 &&  //selection cadre
      mouseX < x1 + w1 && 
      mouseY > y1 &&
      mouseY < y1 + h1) { 
      level=1; //niv1
      state=1; //etat1/jouer
      reset(); //recomencer
    } //recommence

    float x7=340; //emplacement cadre  //clique to play / Level 3 
    float y7=500;
    float w7=220;
    float h7=50;

    if (mouseX > x7 &&  //selection cadre
      mouseX < x7 + w7 && 
      mouseY > y7 &&
      mouseY < y7 + h7) { 
      println("3"); //examiner les données produites par un programme
      level=3; //niv3
      state=1; //etat1/jouer
      reset(); //recommencer
    }

    float x8=340; //emplacement cadre  / Level 4
    float y8=600;
    float w8=220;
    float h8=50;

    if (mouseX > x8 &&  //selection cadre
      mouseX < x8 + w8 && 
      mouseY > y8 &&
      mouseY < y8 + h8) { 
      println("3"); //examiner les données produites par un programme
      level=4; //niv4
      state=1; //etat1/jouer
      reset(); //recommencer
    }

    float x2=340; //emplacement cadre / Regles 
    float y2=300;
    float w2=220;
    float h2=50;


    if (mouseX > x2 &&  //selection cadre /level2
      mouseX < x2 + w2 && 
      mouseY > y2 &&
      mouseY < y2 + h2) { 
      println("3"); //examiner les données produites par un programme
      level=2; //niv2
      state=1; //etat1/jouer
      reset(); //recmmencer
    }     



    float x5=340; //emplacement cadre / Regles 
    float y5=400;
    float w5=220;
    float h5=50;

    if (mouseX > x5 &&  //selection cadre
      mouseX < x5 + w5 && 
      mouseY > y5 &&
      mouseY < y5 + h5) {        
      state=3; //etat3/regle
      reset(); //recommencer
    }


    break; //arreter

    ////////////////////////////////fin du cas 0

  case 3: //cas 3 / regles

    float x3=400; //emplacement cadre //retour
    float y3=600;
    float w3=220;
    float h3=50;

    if (mouseX > x3 &&  //selection cadre
      mouseX < x3 + w3 && 
      mouseY > y3 &&
      mouseY < y3 + h3) { 
      state=0;//etat0/debut
      reset();//recommencer
    }
    break; //arreter

    //////////////////////////////////fin du cas 3

  case 2: //cas 2 /quand perdu
    float x4=340; //emplacement cadre // accueil
    float y4=200;
    float w4=220;
    float h4=50;

    if (mouseX > x4 &&  //selection cadre
      mouseX < x4 + w4 && 
      mouseY > y4 &&
      mouseY < y4 + h4) {
      state=0;//etat0/debut
      reset();//recommencer
    }
    break; //arreter

    //////////////////////////////////fin du cas2

  case 4: //cas 4/quand gagner
    float x6=400; //emplacement cadre // accueil
    float y6=600;
    float w6=220;
    float h6=50;

    if (mouseX > x6 &&  //selection cadre //menu (gagner)
      mouseX < x6 + w6 && 
      mouseY > y6 &&
      mouseY < y6 + h6) {
      state=0;//etat0//debut
      reset();//recommencer
    }
    break; //arreter

    //////////////////////////////fin du cas 4
  }
}

void keyPressed() {
  //touches du clavier
  switch(state) { // comme if et else mais plus simple quand 3 alternatives
  case 0://cas0/debut
    //ignore
    break; // arreter, dernier

  case 1://cas1/jouer
    b.jump();//sauter
    break;//stop

  case 2://cas2/perdu
    reset();//recommencer
    state=0;//etat0/debut
    break;//arreter
    //
  case 3://cas3/regle
    state=0;//etat0/debut
    reset();//recommencer
    break;//arreter


  case 4: //cas 4/si gagner

    reset(); //recommence
    break;//arreter
  }
}

// ============================================================================================
//  les class (ici les valeur des classes et en haut où il faut les executer)

class bird {//position lapin debut

  float xPos, yPos, ySpeed; //position de la lapin

  bird() {
    xPos = 250;//position de la lapin au début
    yPos = 400;//position de la lapin au début
  }

  void drawBird() { // lapin pdt le jeu

    if (yPos<10) //si y est inferieur à 10
      yPos=10;//alors faire baisser de 10
    image(lapin, b.xPos, b.yPos); // balle
  }

  void jump() { //monter
    ySpeed=-10; //monter de 10
  }

  void drag() { //avancer
    ySpeed+=0.4; //avancer de 0.4
  }

  void move() { //bouger
    yPos+=ySpeed;
    for (int i = 0; i<3; i++) {
      if (level==1) //niv1
        p[i].xPos-=3;//vitesse
      else if (level==2) //niv2
        p[i].xPos-=4; //vitesse
      else if (level==3) //niv3
        p[i].xPos-=5; //vitesse
      else if (level==4) //niv4 
        p[i].xPos-=6; //vitesse
    }
  }

  void checkCollisions() { //collision avec poteau
    if (yPos>800  ) { //si y depasse 800 alors perdu
      state=2; //etat2/perdu
    }


    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)) { //position des poteau
        state=2;//etat2/perdu
      }
    }
  }
}//class

class pillar { //position poteau
  //poteau
  float xPos, opening; //position x des apparition de poteau /float: valeur (decimal) 
  boolean cashed = false; //si toucher perdu /boolean: type de donné true/false pour le déroulement du programme

  pillar(int i) {
    xPos = 100+(i*200); //nombre de poteau
    opening = random(600)+100; //multiplication aléatoire des poteau
  }

  void drawPillar() { // taille et forme des poteaux
    line(xPos, 0, xPos, opening-100);
    line(xPos, opening+100, xPos, 800);
  }

  void checkPosition() { //position
    if (xPos<0) {
      xPos+=(200*3); //nombre de poteau
      opening = random(600)+100;//multiplication aléatoire des poteau
      cashed=false;// si toucher perdu
    }
    if (xPos<250&&cashed==false) { //si toucher perdu
      cashed=true; //si pas toucher continuer
      score++; //score augmente
    }
  }
}//class
//

Well, here is a simple method for selecting a “rectangle” or “circle” character.

int character=1;
void draw(){
   background(128);
   if(character==1){
     rect(10,10,80,80);
   } else if(character==2){
     ellipse(50, 50, 80, 80);
   }
}
void keyReleased(){
  if(key=='1'){
    character=1;
  } else if(key=='2'){
    character=2;
  }
}

By “add a button” do you mean a GUI button, like with the G4P or ControlP5 libraries?

Niveau - Niveau - regle - Niveau - Niveau

Why not put regle at the end?

Please, I showed you a button class

Please use it

At the moment all your buttons code is just everywhere

With a class you can add buttons more easily