Processingにて，特定の場面で画像が表示されない

Question

実現したいこと

場合に応じて画像を表示したい

前提

タスク0，タスク1を10回ずつ行うプログラムを作成しています。どちらのタスクが指示されるかはランダムで実装したいので，最初にランダムでタスク0,1を選択。選択回数をカウントしておいて，片方が10回に達した場合はもう片方のタスクを表示させる。それぞれのタスクは必ず10回ずつで，全タスク選択が計20回になるとプログラムを終了する。といった流れです。

そこで，タスクが選択された際に特定の画像を表示したいのですが，画像が表示されません。タスク選択の待機時間＆タスク終了後の休憩時間に表示させるのがdefo.jpg, タスク0の指示タイミングで表示するのがimg0, タスク1の指示タイミングで表示するのがimg1として設定しています。
※画像表示を関数内で行っているのは，本来画像表示以外にも動作が存在するためです。

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

エラーは出ませんが，ずっとdefo.jpgのまま画面が変わりません。

該当のソースコード

// 定義
PImage defo, img0, img1;   // 画像データ

int count = 0;   // Loop回数計測変数
int count_0 = 0, count_1 = 0;  // クラスカウント変数
int max = 10;    // タスク上限回数
int crass;       //
float result;    // 
int delay_time;  // 休憩時間のランダム用

/* --- setup --- */
void setup(){
  // 画面設定
  fullScreen();
  background(0);
  
  // 画像読み込み
  defo = loadImage("defo.jpg");
  img0 = loadImage("right.jpg");
  img1 = loadImage("left.jpg");
  
  image(defo, 0, 0);
}

/* --- draw --- */
void draw(){
  background(0);
  println("start");
  count ++;   // Loop回数 (2 * max回になる)
  
  if (count_0 < max && count_1 < max) {
    result = random(0,1);  // 0 or 1をランダムで選択
    crass = int( round(result) );  // resultを四捨五入してint型に変換
    
    // タスク0
    if(crass == 0) {
      println(crass);
      count_0 ++;
      task_0();
    }  
    // タスク1
    else { 
      println(crass);
      count_1 ++;
      task_1();
    }
  }  
  // count_0 or count_1 がmaxまで達した場合の処理
  else if (count_0 < max){
    println("0");
    count_0 ++;
    task_0();
  }
  else {
    println("1");
    count_1 ++;
    task_1();
  }
  // ここから休憩
  breaktime();
  
  // x回ループで終了
  if(count == 2 * max){
    exit();
  }
}

void task_0() {
  image(defo, 0, 0);
  image(img0, 0, 0);
  delay(5000);       // タスク時間
}

void task_1() {
  image(defo, 0, 0);
  image(img1, 0, 0);
  delay(5000);       // タスク時間
}

void breaktime() {
  image(defo, 0, 0);
  println("wait");
  delay(1500);
  delay_time = round( random(500,2000) );  // 休憩時間をランダムで決定0.5 ~ 2s
  delay( delay_time ); // delay_timeをintに変形した
}

試したこと

画像を変えてみたり，画像ではなく音を鳴らしたりしてみました。音による合図に変えると正常に動作しました。

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

Processing3.5.4

Answer 1

エラーは出ませんが，ずっとdefo.jpgのまま画面が変わりません。

描画はdrawの最後に更新されるため、残念ながらyukatiiさんの意図通りには動きません。

The screen only updates when the end of draw() is reached, so delay() cannot be used to slow down drawing.
画面は draw() の最後に到達したときにのみ更新されるため、delay() を使用して描画を遅くすることはできません。

delay() / Reference / Processing.org

一般的にはmillisとかframeCountとかで自前管理することが多いです。

final int MAX = 10;

PImage defo, img0, img1;
int count_0, count_1;
String mode;
int time;


void setup() {
  //fullScreen();
  size(400, 300);
  background(0);

  //defo = loadImage("defo.jpg");
  //img0 = loadImage("right.jpg");
  //img1 = loadImage("left.jpg");
  defo = createImage(200, 200, RGB);
  defo.loadPixels();
  for (int i = 0; i < defo.pixels.length; i++) defo.pixels[i] = color(0, 90, 102);
  defo.updatePixels();
  img0 = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u15/159598/rY7KVihT_thumbnail.jpg");
  img1 = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");

  image(defo, 0, 0);

  mode = "task_" + int(random(2));
  time = millis();
}

void draw() {
  if(millis() < time) return;

  background(0);

  switch(mode) {
  case "task_0":
    task_0();
    mode = "wait";
    break;
  case "task_1":
    task_1();
    mode = "wait";
    break;
  default:
    breaktime();
    if (count_0 < MAX && count_1 < MAX) {
      mode = "task_" + int(random(2));
    } else if (count_0 < MAX) {
      mode = "task_0";
    } else {
      mode = "task_1";
    }
    break;
  }

  if (count_0 + count_1 == 2 * MAX) {
    exit();
  }
}

void task_0() {
  println("start");
  println("0");
  count_0++;

  image(defo, 0, 0);
  image(img0, 0, 0);

  //delay(5000);
  time = millis() + 5000;
}

void task_1() {
  println("start");
  println("1");
  count_1++;

  image(defo, 0, 0);
  image(img1, 0, 0);

  //delay(5000);
  time = millis() + 5000;
}

void breaktime() {
  println("wait");

  image(defo, 0, 0);

  int delay_time = round(random(500, 2000)) + 1500;
  //delay(delay_time);
  time = millis() + delay_time;
}

millis() / Reference / Processing.org

---

あるいはframeRateを変えるほうが元の意図に近いでしょうか？（大差ないけどｗ

final int MAX = 10;

PImage defo, img0, img1;
int count_0, count_1;
String mode;


void setup() {
  //fullScreen();
  size(400, 300);
  background(0);

  //defo = loadImage("defo.jpg");
  //img0 = loadImage("right.jpg");
  //img1 = loadImage("left.jpg");
  defo = createImage(200, 200, RGB);
  defo.loadPixels();
  for (int i = 0; i < defo.pixels.length; i++) defo.pixels[i] = color(0, 90, 102);
  defo.updatePixels();
  img0 = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u15/159598/rY7KVihT_thumbnail.jpg");
  img1 = loadImage("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg");

  image(defo, 0, 0);

  mode = "task_" + int(random(2));
}

void draw() {
  background(0);

  switch(mode) {
  case "task_0":
    task_0();
    mode = "wait";
    break;
  case "task_1":
    task_1();
    mode = "wait";
    break;
  default:
    breaktime();
    if (count_0 < MAX && count_1 < MAX) {
      mode = "task_" + int(random(2));
    } else if (count_0 < MAX) {
      mode = "task_0";
    } else {
      mode = "task_1";
    }
    break;
  }

  if (count_0 + count_1 == 2 * MAX) {
    exit();
  }
}

void task_0() {
  println("start");
  println("0");
  count_0++;

  image(defo, 0, 0);
  image(img0, 0, 0);

  //delay(5000);
  frameRate(1000f / 5000);
}

void task_1() {
  println("start");
  println("1");
  count_1++;

  image(defo, 0, 0);
  image(img1, 0, 0);

  //delay(5000);
  frameRate(1000f / 5000);
}

void breaktime() {
  println("wait");

  image(defo, 0, 0);

  int delay_time = round(random(500, 2000)) + 1500;
  //delay(delay_time);
  frameRate(1000f / delay_time);
}

frameRate() / Reference / Processing.org

Comments

[TN8001]

実際には`delay`ではなく「何か重い処理」ということであれば、別スレッドに逃がすなりが必要でしょうね。

[yukatii]

delayは使えないのですね。おかげさまで画像切り替えができるようになりました。
ありがとうございました！