質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 289

honey_8t1

score 5

前提・実現したいこと

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

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

また、「まぜる」の後に57行目~59行目(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/ツールのバージョンなど)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

へらがたくさん出てしまうのは前に描画したヘラがそのまま残ってしまうからです。
アニメーションにしたい場合は毎フレーム描画し直す必要があります。
( 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);
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+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回キーボードを打ったら

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()関数を使うのももう一つの解決です。調べてみるといいでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる