Processingで時刻指定のタイマーをつくる

はじめに

プログラミング入門でお世話になったProcessingで遊んでみました。
拙いコードですが記録を兼ねて公開します。

開発環境・使用ソフト

• windows11
• Processing 4.1.2

完成品

※等速ではありません
※撮影時刻22時5分くらい

1.数字キーで時刻入力
2.Enterでカウントダウン開始
3.BackSpaceで時刻リセット(再入力可能に)

一般的なタイマーとの違い

現在時刻を12:00と仮定して、図に表してみます。

使い分けとしては

• 〇分間の作業をしたい場合は一般的なタイマー
• 〇時〇分までの作業をしたい場合は時刻指定のタイマー

という感じででしょうか。
図のように5分後程度なら暗算で変換できますが、長時間では面倒ですからね。

.pdeコード

int t[] = {0,0,0,0};
int input_place;
int target;
boolean isStart;
int max_val;

void setup() {
  size(360, 380);
  PFont normalFont = createFont("Yu Gothic", 100);
  textFont(normalFont);
  input_place = 0;
  target = 0;
  isStart = false;
  max_val = 0;
}

void draw() {
  background(255);
  noStroke();
  textAlign(CENTER);
  fill(0);
  ellipse(width/2, 100, 10, 10);
  ellipse(width/2, 70, 10, 10);
  textSize(100);
  text(t[0], width/2-120, 115);
  text(t[1], width/2-60, 115);
  text(t[2], width/2+60, 115);
  text(t[3], width/2+120, 115);
  textAlign(LEFT, CENTER);
  textSize(30);
  text("入力: 数字キー", 50, 160);
  text("取消: BackSpace", 50, 200);
  text("開始: Enter", 50, 240);
  noFill();
  stroke(2);
  rect(7.5, 305, 345, 60);
  fill(255);
  noStroke();
  rect(12, 300, 130, 10);
  if(isStart) {
    target = change_sec();
    max_val = target - now();
    isStart = false;
  }
  clocker();  
}

void keyPressed() {
    if(Character.isDigit(key) && input_place < 4) {
      t[input_place] = key-48;
      input_place += 1;
    }
    if(key == BACKSPACE) {
      for(int i=0; i<4; i++) {
        t[i] = 0;
      }
      input_place = 0;
    }
    if(key == ENTER) {
      isStart = true;
    }
}

int change_sec() {
  return (t[0]*10+t[1])*3600 + (t[2]*10+t[3])*60;
}

int now() {
 return hour()*3600 + minute()*60 + second();
}

void clocker() {
  textAlign(LEFT, CENTER);
  int df = target - now();
  float a = 0;
  noStroke();
  if(df <= 0) {
    fill(0);
    text("Finished ", 20, 295); 
    return;
  }else {
    a = ((float)df) / (max_val) * 330;
    //println(a);
    fill(10,200,0);
    rect(15, 310, a, 50);
    fill(0);
    text(df/60 + "m " + df%60 + "s", 20, 293);
  }
}

追加ライブラリなどありませんので、同じ環境なら問題なく実行できるかと思います。

苦労ポイント(?)

時刻入力をどう受け取ろとうか悩んだ結果、数字キー入力のみを配列に入れていく実装となりました。以下が入力取得周りの抜粋↓

void keyPressed() {
    if(Character.isDigit(key) && input_place < 4) {
      t[input_place] = key-48;
      input_place += 1;
    }
    if(key == BACKSPACE) {
      for(int i=0; i<4; i++) {
        t[i] = 0;
      }
      input_place = 0;
    }
    if(key == ENTER) {
      isStart = true;
    }
}

また、数字キーの判別方法は、とうに忘れていたので以下のサイトを参考にしています。

ちなみに...

見ての通り(見にくいけど)、24時以降の入力をはじく機能はありません！
そのため、「25:00」で翌1:00、「32:00」で翌8:00を指定できます！
すばらしい汎用性です（）

おわりに

以上、シンプルかつちょっと変わったタイマープログラムの紹介でした。
私自身、これを利用してレポート課題などの時間管理が楽になり助かってます。
気になった方、ぜひ使ってみてください(自由に改造OK)
質問・ご意見あればコメントお願いします。

今後へ

最低限、ウィンドウサイズを自由に変更できるようにすべきだったなと反省。
あと、やはり手軽さでいえばスマホアプリとして使えたほうがいいと思う。
Processingでそのまま対応させてもいいし、Flutterなど新しく勉強するのも面白そう！