Processing－色の変化（１度だけ点滅）－

Question

前提・実現したいこと

キーを押すと、順番に光る（色が変化）機能を実現させたい。
https://gamebox.gesoten.com/zakzak/game/265
このURLのような感じのゲームを作っています。
7/19までに提出のファイルのため、できれば早い回答を望みます。
無理そうだったら別の案を考えます。

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

色は変化するが、一番最初の画面にも表示されてしまい、うまく行かない。
また、順番に変化させることができない。（時間差で変化させたい。）

該当のソースコード

void setup() {
  background(255);
  size(500, 690);
  fill(0);
  textAlign(CENTER, TOP);
  textSize(50);
  text("Tap to key'1'", width/2, height/2-30);
  text("EXIT,'esc'key", width-180, height-70);
  music();
  flag=0;
  fla=0;
}

void draw() {
  tikatika2();
tikatika3();
}

void Clear(){
  if(flag==0){
  background(255,255,255);
  fill(0);
  textSize(50);
  text("GAME CLEAR", width/2, height/2-50);
  }
}

void Over(){
  if(flag==0){
  background(255,255,255);
  fill(0);
  textSize(50);
  text("GAME OVER", width/2, height/2-50);
  }
}

void Play() {
  if(flag==0){
  background(0, 255, 255);
  fill(255);
  rect(22.5, 10, width/2, 80);
  rect(295, 10, 80, 80);
  rect(397.5, 10, 80, 80);

  rect(22.5, 150, 120, 120);
  rect(22.5, 330, 120, 120);
  rect(22.5, 510, 120, 120);

  rect(190, 150, 120, 120);
  rect(190, 330, 120, 120);
  rect(190, 510, 120, 120);

  rect(357.5, 150, 120, 120);
  rect(357.5, 330, 120, 120);
  rect(357.5, 510, 120, 120);
  fill(0);
  text("1", width-65, 25);
  text("brain limit", 148, 25);
  }
}

void STAGE1(){
  if(flag==0){
  background(255);
  Play();
  fill(0);
  textSize(50);
  text("STAGE 1", width/2, height/2-100);
  text("'3'key START",width/2,height/2);
  }
}

void keyPressed() {
  switch(key) {
  case '1':
    STAGE1();
    flag=0;
    fla=0;
    break;
  case '2':
    Clear();
    flag=0;
    fla=0;
    break;
  case '3':
    Play();
    flag=1;
    fla=1;
    break;
  case '4':
    Over();
    flag=0;
    fla=0;
    break;
  case'5':
    blinking();
    flag=0;
    fla=0;
    break;
  case'6':
    reproduction();
    flag=0;
    fla=0;
    break;
  default:
  }
}

void mousePressed() {
  if (22.5<mouseX&&mouseX<142.5&&150<mouseY&&mouseY<270) {
    reproduction();
    song2();
  } else if (357.5<mouseX&&mouseX<477.5&&330<mouseY&&mouseY<450) {
    Clear();
    song2();
  } else {
    Over();
    song2();
  }
}

void stop() {
  song1.close();  //サウンドデータを終了
  minim.stop();
  super.stop();
}
void music() {
  minim = new Minim(this);  //初期化
  song1 = minim.loadFile("bgm.mp3");  //bgm.mp3をロードする
  song1.play();  //再生
}
void song2() {
  minim = new Minim(this);  //初期化
  song2 = minim.loadFile("clickmusic.mp3");
  song2.play();  //再生
  song2.rewind();  //再生が終わったら巻き戻しておく
}

int flag=0;//0のときはfillの値を直さない。（元のまま）１のときは、fillの値を変えるとき。
int fla=0;

void tikatika2() {
  if (flag==0) {
    fill(255);
  } else {
    //rprintln(flag);
    fill(0);
    flag=0;
  }
  //println(flag);
  //noStroke();
  rect(22.5, 150, 120, 120);
}

void tikatika3() {
  if (flag==0&&fla==0) {
    fill(255);
  } else {
    //println(fla);
    fla=0;
    fill(0);
  }
  //println(fla);
  //noStroke();
  rect(357.5, 330, 120, 120);
}

試したこと

tikatika2()とtikatika3()のタブの移動。

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

Processingの最新バージョンを使っています。

Comments

[thkana]

ソースも不完全なのに、「一番最初の画面」とか「順番」とか言われても何が何やらわかりませんが。

[Haru_330]

すみません。修正しました。
一番最初の画面は、void setupで行われる処理のことです。
その上にvoid drawの中の処理が行われてしまっています。
void drawが何回も行われる処理だということはわかっているんですが、void drawの中にいれないとうまく行かないので、どうすればいいのかと思い、質問させていただきました。
順番は、色が変化する順番です。
これは、tikatika2(),tikatika3()を見ていただければわかるかと思います。
わかりづらくてすみません。
よろしくおねがいします。

[thkana]

関数毎にProcessingのIDEのタブを分けているのですか? ちょっと見通しが悪くなりませんか?

[thkana]

blinking()とreproduction()とが足りませんね。
あと、minimで音を出す部分は、ファイルが無いとエラーになるので面倒です。

言葉での説明が出来なくてソースに語らせるのはそれはそれでありとは思いますが、それならば語ってくれるだけのソースを提示して下さい。
それと、あなたが問題と考える現象の再現手順と。

できれば
https://teratail.com/help/question-tips#questionTips3-5-1
「最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ること」です。

[Haru_330]

ありがとうございます
とりあえず、ミニマムなものを作ってみてまた違うもので質問します。
blinkingと、reproductionは、あまり使っていない部分だったので入れませんでした。申し訳ないです。
タブに関しては、大学でわかりやすくした方がいいと言うのと、1個のタブが長くなりすぎてはダメという方針だったので、そうしました。
色々ありがとうございます。
自分でもうすこし頑張ってみてからまた質問します。

Answer 1

質問のプログラムの方針がイマイチ見えなかったので勝手に作ってみた。参考まで。ボタンはクラスにしたい気もしたけど、「習ってない」とかいわれそうでやめた。

教えすぎ? まぁ、先は長そうだし。

final color NORMALCOLOR=color(255);
final color BRIGHTCOLOR=color(255, 0, 0);

//ボタン配置のための変数群
float buttonSize;
float border;
float top;

int[] pos=new int[9+1];//光らせる位置を保持。負は無効
int frame0=30;//ボタンを変える時間間隔
int frameCnt;//時間測定のための変数
int index;//何番目かを保持

enum Mode {//全体の動作のモード
  START, 
    SHOW_PATTERN, 
    ASK_PATTERN, 
    PATTERN_DONE, 
    GAME_OVER
}
Mode mode=Mode.START;//現在のモードを保持

void setup() {
  size(300, 500);
  buttonSize=width/3*0.8;
  border=width*0.2/4;
  top=height-width;
}

void drawButtons(int bright) {//指定場所だけ色を変えてボタンを表示。負は無効
  for (int y=0; y<3; y++) {
    for (int x=0; x<3; x++) {
      if (x+y*3==bright) {
        fill(BRIGHTCOLOR);
      } else {
        fill(NORMALCOLOR);
      }
      square(x*buttonSize+(x+1)*border, top+y*buttonSize+(y+1)*border, buttonSize);
    }
  }
}

void createPositions(int n) {//ボタン位置順番を生成
  int i;
  for (i=0; i<n; i++) {
    pos[i]=(int)random(9);
  }
  pos[i]=-1;
}

void draw() {
  background(204);
  switch(mode) {
  case START:
    fill(0);
    textAlign(CENTER, CENTER);
    textSize(24);
    text("Hit '1' key to START", width/2, height/2);
    if (keyPressed && key=='1') {
      createPositions(5);//解答生成
      index=0;//最初から
      frameCnt=frame0;//時間を設定
      mode=Mode.SHOW_PATTERN;//パターン表示へ
    }
    break;
  case SHOW_PATTERN:
    if (frameCnt-->0) {//drawは1/frameRate秒に1回実行されるのでその回数を数えることで「間」を作る
      drawButtons(pos[index]);
    } else {
      frameCnt=frame0;//時間を設定
      index++;//次のパターン
      if (pos[index]<0) {//終わり?
        mode=Mode.ASK_PATTERN;//解答入力へ
      }
    }
    break;
  }
}

Comments

[Haru_330]

ありがとうございます！！
どういう原理か解読して、勉強したいと思います。
解決しましたら、また連絡します。