赤ボタンを押してから青ボタンを押すまでの時間を表示したい

Question

赤ボタンを押してから青ボタンを押すまでのタイムを枠内に表示するプログラムを作りたいです。最新のProcessingで作業しています。
この状態だとエラーメッセージは出ないのですが、表示されるのは、ボタンを押しても反応しないpngだけです。
pngのRGBはイラレでしっかり指定して作ってあります。

大学の選択授業の自由課題で、プログラミングの専攻でもなく、ど初心者なので詳しく教えてもらえると大変嬉しいです。どうか添削よろしくお願いいたします。
授業で配布されたイライラ棒の見本コードがあって、それを書き換えながら行っているので、下手に書き換えられず宣言している変数で使っていない変数もあります。

こうした方がスッキリするなどのご意見も欲しいです。

該当のソースコード

final int STANDBY = 0;
final int GAMESTART = 1;
final int GAMEFINISH = 2;
int state = STANDBY;
int startTime;
int finishTime;
PImage pic;

void setup(){
size(512,512);
pic = loadImage("pic.png");
textSize(50);
startTime = millis();
finishTime= millis()-startTime;
}

void draw(){
image(pic,0,0);
}

void mousePressed(){
if(get(mouseX,mouseY)==color(255,0,0)){
text((millis()-startTime)0.001,256,260);
}
if(get(mouseX,mouseY)==color(0,0,255)){
text(finishTime0.001,256,260);
}
else{
}
}

Comments

[thkana]

javascriptは関係ないです。

[Red_yejil]

どちらかわからなくて、どちらもタグに書いてしまいました。混乱させてしまい申し訳ございません。

[thkana]

では修正して下さい。質問やタグは編集できます。

[Red_yejil]

訂正しました。
不慣れで申し訳ありません。

Answer 1

課題ということなのでヒントにとどめます。
ヒントが足りなければ追記しますので、コメントしてください。

pngのRGBはイラレでしっかり指定して作ってあります。

添付画像がpic.pngであれば、どう見てもcolor(255,0,0)やcolor(0,0,255)はありません。

println(hex(get(mouseX, mouseY), 6));

とすると16進でff0000のように表示して確認できます。
color(255,0,0)の代わりに#ff0000のような表記もできるので、if文を画像の色に合わせましょう。
hex() \ Language (API) \ Processing 3+
color \ Language (API) \ Processing 3+

下手に書き換えられず宣言している変数で使っていない変数もあります。

（イライラ棒の跡形もないので）もうすでにかなり書き換えてると思うのですが、このコード量なら変数を使っているかどうかは一目では？

例えばfinal int STANDBY = 0;を削除します。
もしどこかで使われている変数なら、実行ボタンを押したときにエラーになります。
エラーになったら元に戻せばいいだけです。

こうした方がスッキリするなどのご意見も欲しいです。

それ以前にやりたいことにコードがなっていません。

startTime = millis();
finishTime= millis()-startTime;

これはどういうつもりで書いたのでしょう？
スタートするのは赤ボタンを押したときですよね？
setup()（プログラム開始）時の値をとっても仕方ありません。
finishTimeもmillis()-millis()になるわけですから結局０です。

---

text((millis()-startTime)*0.001,256,260);

ここの意図もわかりません。赤を押したときに何か表示するんですか？

---

text(finishTime*0.001,256,260);

ここの気持ちはわかります。
しかしfinishTimeは０です。青ボタンを押したとき（if文の中）に、finishTimeを計算する必要があります。

あと2点
文字色は今のままでは白です。
text() \ Language (API) \ Processing 3+
fill() \ Language (API) \ Processing 3+

mousePressed()で文字を書きますが、すぐdraw()に入ってしまい画像で上書きされて消えてしまいます。
簡単にやるならループを止めることです。
noLoop() \ Language (API) \ Processing 3+

---

全体コードを追記

_になっている部分を埋めてください。

int startTime;
PImage pic;

void setup() {
  size(512, 512);
  pic = loadImage("pic.png");
  textSize(50);
  fill(0); // 塗りつぶし色（文字色）黒
}

void draw() {
  image(pic, 0, 0);
}

void mousePressed() {
  println(hex(get(mouseX, mouseY), 6)); // 717272 や FFFFFF 等

  if (get(mouseX, mouseY) == #______) { // 赤ボタンを押したとき #FF0000 等確認した色を入れる
    startTime = millis(); // startTimeを記録
    loop(); // 再チャレンジ時のためにループを再開
  }

  if (get(mouseX, mouseY) == #______) { // 青ボタンを押したとき #0000FF 等確認した色を入れる
  
    // 先に赤ボタンを押してなければ青ボタンは押せない（赤を押したときに変えた変数は？）
    if(_________ == 0) return;

    // finishTimeの計算（finishTimeはここでしか使わないのでローカル変数でよい）
    int finishTime = millis() - startTime;
    text(finishTime * 0.001, 256, 260); // 位置が全然合ってない
    noLoop(); // ループを止める
  }
}

Comments

[Red_yejil]

int startTime;
int finishTime;
PImage pic;

void setup(){
size(512,512);
pic = loadImage("pic.png");
textSize(50);
}

void draw(){
image(pic,0,0);
noLoop();
}

void mousePressed(){
if(get(mouseX,mouseY)==color(255,0,0)){
startTime = millis();
}
}

void drawText(){
fill(0);
if(get(mouseX,mouseY)==color(0,0,255)){
finishTime=millis()-startTime;
text(finishTime*0.001,256,260);
}
}

丁寧なご指摘本当にありがとうございます。リンクなども貼ってくださり非常にわかりやすいです。
知識がないながら、ご指摘されたところを一通りやり直してみました。
エラーは出ていないのですが、やはり表示されません。

他サイトなども見たのですが、２つ理解しきれていないところがあって、
①millis()が完全に理解できていなくて、最後のfinishTime=millis()-startTime;がまた０になっているのでは？と思うのですが、解決策がわかりません。
②ループを止めないといけないとのことですが、何かアクションが起きるたびに画像が上書きされるから、画像のループを止めるということですか？

初歩的な質問であれば大変申し訳ないです。
他にも間違っているところがあれば教えていただけると嬉しいです。

[TN8001]

> やはり表示されません。

イラストレーターのデータがどうであれ、提示画像にはcolor(255,0,0)になっている色はないんです。
color(255,0,0)はもっとどぎつい赤です。
printlnして実際の数値を確認してください。

① millis()はプログラム開始時からのミリ秒です。
[millis() \ Language (API) \ Processing 3+](https://processing.org/reference/millis_.html

時間が経つほど増えますから 青を押したとき 引く 赤を押したとき でいいでしょう（あっています）

② void draw() は1秒間に60回呼ばれます。noLoop();すると呼ばれなくなります。
青を押したとき（mousePressed()）に文字を書く（text()）のはいいのですが、すぐにdraw()が来てしまうので書いた文字が消えてしまうということです。
文字を書いたときに止めればいいのです（基本止めておく方針もありますが、Processing的にはあまりやりません）

ほぼコード的には出そろったようですので、全体コードを追記しました。

[Red_yejil]

こんにちは、お返事遅くなってしまいすみません。
おかげでできました。
画像も差し替えさせていただきました。
①、②もわかりやすい回答ありがとうございます。
本当にお世話になりました、何もわかっていない私に丁寧に教えてくれてありがとうございました。
nt startTime;
PImage pic;

void setup() {
size(512, 512);
pic = loadImage("pic.png");
textSize(40);
fill(0); // 文字色黒
}

void draw() {
image(pic,0,0);
}

void mousePressed() {
println(hex(get(mouseX, mouseY), 6));
if (get(mouseX, mouseY) == #FF0000) { // 赤ボタンを押したとき
startTime = millis(); // startTimeを記録
loop(); // 再チャレンジ時のためにループを再開
}

if (get(mouseX, mouseY) == #0000FF) { // 青ボタンを押したとき
// finishTimeの計算
int finishTime = millis() - startTime;
text(finishTime * 0.001, 190, 247);
noLoop(); // ループを止める
// 先に赤ボタンを押してなければ青ボタンは押せない
if(startTime == 0) return;

}
}
完成コードも貼っておきます。本当にありがとうございます。

[TN8001]

実行後に青ボタンを先に押されるとちょっと変になります（まあ細かい突込みですが^^;

if (startTime == 0) return;の位置の問題です。

Answer 2

大学の選択授業の自由課題で、プログラミングの専攻でもなく、ど初心者なので詳しく教えてもらえると大変嬉しいです

teratailをgoogleで調べると"ITエンジニア特化型Q&Aサイト"と出てくるんですけどね。あ、回答者が特化してればいいのか?

赤ボタンを押してから青ボタンを押すまでのタイム

全然そういう計算をしていません。赤ボタンを押した時の時間を記録し、青ボタンを押したときにその時間から赤ボタンを押した時の時間を引くと経過時間が求まります。

pngのRGBはイラレでしっかり指定して作ってあります。

まちがっています。クリックしたときのマウスカーソルの位置がR=255,G=0,B=0かR=0,G=0,B=255であったときに応答するプログラムになっていますが、ボタンの色がそうなっていません。

表示されるのは、ボタンを押しても反応しないpngだけです。

先の間違いがあるので反応しないのもありますが、そこを直したとしてもmousePressed関数でなにか表示したとして、draw()内で画像を描くことで覆い隠してしまっています。

Comments

[Red_yejil]

ご回答ありがとうございます。
teratailのことを詳しく知らずに質問してしまってすみません。他サイトがあることも知りませんでした。
画像は書き出しや指定はRGBだったのですが、IllustratorのドキュメントカラーモードがCMYKになっていたことが原因でした。ご指摘ありがとうございます。
もう少し調べてやってみます。ありがとうございました。