３回キーボードを打ったら、出ている文章が変化するにはどうすればいいですか

Question

前提・実現したいこと

processingのコードでどのように打てばいいかわからず苦戦しています。

最初に「材料を入れる」の文章が出ている状態で、材料を3つ（A,B,C）を押したら「まぜる」という文章が入れ替わりで出るようにしたいです。

また、「まぜる」の後に５７行目～５９行目（Hera）をleft、rightを使い
左右に切り替わるように動かしたいです

発生している問題・エラーメッセージ

//heraの部分がたくさん出てきてしまう

該当のソースコード

PFont myfont;
float x = 250;

//float speed = 3.0;

void setup() {
  size(500, 500);
  myfont = createFont("MS Gothic",48);
  textFont(myfont,48);
  textSize(20);
  background(255, 255, 255);
  rect(150, 80, 200, 150);
  
  fill(255, 249, 137);//egg
  ellipse(85, 350, 100, 100);
  fill(154, 232, 234);//milk
  ellipse(250, 350, 100, 100);
  fill(252, 173, 69);//flour
  ellipse(415, 350, 100, 100);
  
  fill(149,80,33);
  textSize(40);
  text("A",75,450);
  text("B",240,450);
  text("C",405,450);
  
}
void draw() {
  
  fill(149,80,33);
  textSize(20);
  text("材料を入れてね",185,270);

 
if (keyPressed) {
  
  if((key=='a')|| (key=='A')){
    fill(250,237,88);
    rect(150, 80, 200, 150);
    
  }else if((key=='b')|| (key=='B')){
    fill(250,236,159);
    rect(150, 80, 200, 150);
    
  }else if((key=='c')|| (key=='C')){
    fill(250,218,129);
    rect(150, 80, 200, 150);
    
    
 }if (key == CODED) {

 }if (keyCode == RIGHT) {
          x += 50;
 } if (keyCode == LEFT) {
          x -= 50;
 }
  fill(252,196,239);
  rect(x,60,10,80);
  ellipse(x+5,150,30,40);//hera
       
  }else if((key=='k')|| (key=='K')){
    background(255,255,255);

    fill(142,155,160);
    ellipse(250,200,300,150);
}
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

タイトルは「3回キーボードを押したら云々」、発生している問題は「heraがたくさん」
問題はどっち? 両方? だろうね。

アニメーションの基本ってのは、次の画で変わるところを消して、新しい画を描いてやると動いているように見える、ということです。前の画を消さなければ当然前の画に重なった画が描かれるでしょう。ただ、部分だけ消すというのが大変なら全画面を消して、画を全部書き直した方が楽かも知れません。
画面を消す、というか単色で塗りつぶすbackground()という関数で画面クリアして、必要な画を描き直すというのがよく使われる手です。これは既に他の回答に紹介されているので略。

「まぜる」という文章が入れ替わりで出るようにしたいです

Processingでは、draw()が繰り返し実行されるという動作の仕方をします。ですから、draw()に入ったら"材料を入れる"を表示するべきときなのか、"まぜる"を表示するべきときなのかをざっくりとわけてやる必要があります。「今なにをすべきなの?」を表す変数を設けてそれでざっくり切り替えてやればいいでしょう。キーが押されることで「今何をすべきなの?」変数を書き換えてやると、こんなことになります。

int status=0;
void draw(){
  background(0);
  if(status==0){
    text("材料を入れる",0,height/3);
  }else if(status==1){
    text("まぜる",0,height*2/3);
  }
  if(keyPressed){
    status=1;
  }
}

さて。

３回キーボードを打ったら

3回というのが、a,b,c各一回とは限らないけど...まぁいいか。

keyPressedは「キーが押されたら」真になるというよりは「キーが押されていると」真になる変数です。

int count=0;
void draw(){
  background(0);
  if(keyPressed){
    ++count;
  }
  text("押された回数"+count, 0,height/3);
  text("押されたkey "+key, 0,height*2/3);
}

とすると、キーをちょんと押しただけでも何度もif文の中身が実行されているのがわかるでしょう。ではどうやって「キーが押された」と「キーが押されている」を区別するのか...直前の状態に注目します。「キーが押された」は、今キーが押されていて、直前はキーが押されていなかった。「押されている」は、今も直前も押されている。では、直前の状態を変数に記録しておきましょう。

int count=0;
boolean prevPressed=false;
void draw(){
  background(0);
  if(keyPressed){ //今押されていて
    if( ! prevPressed){//前回は押されていなかったら
      ++count; //カウンタ増加
    }
    prevPressed=true;//今回の状態を保存しておく
  }else{
    prevPressed=false;//今回の状態を保存しておく
  }
  text("押された回数"+count, 0,height/3);
  text("押されたkey "+key, 0,height*2/3);
}

キーが「押された時」に呼ばれるkeyPressed()関数を使うのももう一つの解決です。調べてみるといいでしょう。

Answer 2

へらがたくさん出てしまうのは前に描画したヘラがそのまま残ってしまうからです。
アニメーションにしたい場合は毎フレーム描画し直す必要があります。
( draw()メソッドは1秒間に数十回実行されます。 )
状態によって文章や画面を切り替えるには、現在の状態を記憶する変数を用意してその値によって切り替えるのが一般的だと思います。

PFont myfont;
float x = 250;

//float speed = 3.0;
color col = color(255, 255, 255); //容器の色
int status = 0; //状態（入れたものを記憶しておく）

void setup() {
  size(500, 500);
  myfont = createFont("MS Gothic", 48);
  textFont(myfont, 48);
  textSize(20);
}
void draw() {
　//毎フレーム描画し直す
  background(255, 255, 255); //前フレームに描画したものを全部消す

  fill(col); //colは現在の容器の色
  rect(150, 80, 200, 150);

  fill(255, 249, 137);//egg
  ellipse(85, 350, 100, 100);
  fill(154, 232, 234);//milk
  ellipse(250, 350, 100, 100);
  fill(252, 173, 69);//flour
  ellipse(415, 350, 100, 100);

  fill(149, 80, 33);
  textSize(40);
  text("A", 75, 450);
  text("B", 240, 450);
  text("C", 405, 450);

  if((status & 7) == 7){ //A,B,Cが全部入っていたらstatusの下位3ビットが立っている
    fill(149, 80, 33);
    textSize(20);
    text("まぜる", 185, 270);
    
    fill(252, 196, 239);
    rect(x, 60, 10, 80);
    ellipse(x+5, 150, 30, 40);//hera
  }
  else{
    fill(149, 80, 33);
    textSize(20);
    text("材料を入れてね", 185, 270);
  }


  if (keyPressed) {

    if ((key=='a')|| (key=='A')) {
      col = color(250, 237, 88); //容器の色を変える
      status |= (1 << 0); //Aを入れたらstatusの1桁目のビットを立てる
    } else if ((key=='b')|| (key=='B')) {
      col = color(250, 236, 159); //容器の色を変える
      status |= (1 << 1); //Bを入れたらstatusの2桁目のビットを立てる
    } else if ((key=='c')|| (key=='C')) {
      col = color(250, 218, 129); //容器の色を変える
      status |= (1 << 2); //Cを入れたらstatusの3桁目のビットを立てる
    }
    if (key == CODED) {
    }
    if (keyCode == RIGHT) {
      x += 50;
    } 
    if (keyCode == LEFT) {
      x -= 50;
    }

    //ヘラが容器の外に出ないようにする
    if(x < 150-5+15) x = 150-5+15; 
    if(x > 350-5-15) x = 350-5-15; 
    
  } else if ((key=='k')|| (key=='K')) {
    background(255, 255, 255);

    fill(142, 155, 160);
    ellipse(250, 200, 300, 150);
  }
}