Processing １秒ごとにデータの値を切り替えたい

Question

読み込んだcsvファイルのデータを１秒たつごとに切り替わるようにしたい
（データa　-１秒-　データb　-１秒-　データc　のような感じにしたいです。）

### 発生している問題

今実行している処理だと一気にすべてのデータが同じ場所に表示されてしまうため重なり合って見えなくなってしまいます。

### 該当のソースコード
processing

Table table;

void setup() {
  table = loadTable("東京の気温と湿度2021.csv");

  PFont font = createFont("Osaka", 12);
  textFont(font);

  size(1000, 1000);
  colorMode(HSB, 360, 100, 100, 100);
  smooth();
  noStroke();
  background(0, 0, 100);

  for (int i = 2; i < table.getRowCount(); i++) {
    print(table.getString(i, 0));
    print(", ");
    print(table.getString(i, 1));
    print("-");
    print(table.getString(i, 4));
    print(", ");
  }
  for (int i = 3; i < 5; i++) {
    fill(0, 0, 0);
    textSize(70);
  text(table.getString(i, 1), 300, 350);
  }
  for (int i = 3; i < 5; i++) {
    fill(0, 0, 0);
    textSize(70);
    text(table.getString(i, 4), 300, 600);
  }
}
void draw() {
  
  for (int i = 5; i < table.getRowCount(); i++) {
    fill(0, 0, 0);
    textSize(100);
    text(table.getString(i, 0), 190, 200);
  }
  for (int i = 5; i < table.getRowCount(); i++) {
    fill(0, 0, 0);
    text(table.getString(i, 1), 375, 475);
  }
  for (int i = 5; i < table.getRowCount(); i++) {
    fill(0, 0, 0);
    text(table.getString(i, 4), 375, 725);
  }
}

Answer 1

今実行している処理だと一気にすべてのデータが同じ場所に表示されてしまうため重なり合って見えなくなってしまいます。

drawは（デフォルトでは）１秒間に６０回呼ばれています。
その瞬間に表示したいものだけを、描画するようにします（パラパラマンガのイメージ）
パラパラマンガ - Wikipedia

これはProcessingの基本なので、しっかりと理解してください。
アニメーションしよう | プログラミングとゲームの杜

読み込んだcsvファイルのデータを１秒たつごとに切り替わるようにしたい

フレームレート（drawが１秒間に何回呼ばれるか）を変えていいなら、frameRate(1);とするのが手っ取り早いです。
frameRate() / Reference / Processing.org

Table table;
int rowIndex = 1; // いま表示している行のインデックス

void setup() {
  size(1000, 1000);
  textFont(createFont("Osaka", 12));
  textSize(100);
  frameRate(1); // 1秒間に1回描画（＝１秒ごと）
  //frameRate(2); // 1秒間に2回描画（＝0.5秒ごと）
  //frameRate(0.5); // 1秒間に0.5回描画（＝2秒ごと）

  table = loadTable("東京の気温と湿度2021.csv");
}

void draw() {
  background(255);
  fill(0);

  text(table.getString(rowIndex, 0), 190, 200);
  text(table.getString(rowIndex, 1), 375, 475);
  text(table.getString(rowIndex, 4), 375, 725);

  if (rowIndex < table.getRowCount() - 1) {
    rowIndex++;
  } else {
    // 最後まで行ったらどうするのか？
    //rowIndex = 1; // 最初に戻る
    //noLoop(); // すべての描画を止める
    //なにもしない // 最後の行のまま描画継続
  }
}

---

フレームレートを変えたくない場合（ほかの描画もある等）は、frameCountの剰余を使うのが常套手段です。
frameCount / Reference / Processing.org
% (modulo) / Reference / Processing.org

Table table;
int rowIndex = 1;

void setup() {
  size(1000, 1000);
  textFont(createFont("Osaka", 12));
  textSize(100);
  //frameRate(60);

  table = loadTable("東京の気温と湿度2021.csv");
}

void draw() {
  background(255);
  // ほかに何か描画があるとして

  fill(0);
  text(table.getString(rowIndex, 0), 190, 200);
  text(table.getString(rowIndex, 1), 375, 475);
  text(table.getString(rowIndex, 4), 375, 725);

  // frameRateはデフォルト60
  // frameCountが60増えるごと（＝1秒ごと）にrowIndexを1増やす
  if (frameCount % 60 == 0) {
  //if (frameCount % 30 == 0) { // 30増えるごと（＝0.5秒ごと）
  //if (frameCount % 120 == 0) { // 120増えるごと（＝2秒ごと）
  
    if (rowIndex < table.getRowCount() - 1) {
      rowIndex++;
    } else {
      // 最後まで行ったらどうするのか？
      //rowIndex = 1; // 最初に戻る
      //noLoop(); // すべての描画を止める
      //なにもしない // 最後の行のまま描画継続
    }
  }
}

Comments

[RY54828]

ご回答ありがとうございます。
やりたいと考えていたことがそのとおりに実行できました！