Processing：デジタル時計のプログラム

Processingを使った時間を表示するプログラムです。
まずは、文字表示によるデジタル時計についてです。
Processingには以下のようなコンピュータ内の時間の数値を読み取るコマンドがあります。

year();   //年（2010など）
month();  //月（1~12）
day();    //日（1~31）
hour();   //時（0~23）
minute(); //分（0~59）
second(); //秒（0~59）
millis(); //プログラムが開始してから0.001秒（1/1000秒）単位でカウントする

今回のプログラムではhour()、minute()、second()の三つをつかって時計の時間表示を行いたいと思います。
文字を使用するには、PFontを用いてcreateFont()やloadFont()でフォントを用意する必要があります。そしてtext()によって文字表示します。
text("表示文字",x,y)というように、括弧内に表示される文字や数値を入れ、その後にXY座標を入れて表示位置を決定します。
時間と分と秒の間に「:」マークを挿入して、「12:10:35」というように表示することにします。文字は「"」マークで括ってtext()内に入れ、連続させる場合は「+」でつなぎます。
ちなみに、計算可能な数値（intやfloat）の場合は、
123+456=579
になりますが、
文字列の数字（String）の場合は、
"123"+"456"="123456"
になります。あるいは、数値と文字列の組み合わせも、
123+"456"="123456"
になります。"数値"は、そのままでは計算できない文字列の数字になってしまいます。文字列の数字を再度計算可能な数値に変換するには、整数値の場合ならint()で括ります。
int("123456")=123456

よって、text()の括弧内に入れる文字列は、
text(hour()+":"+minute()+":"+second(),10,200);
となりますが、このままだとやや不自然な表示になります。
例えば、12時09分05秒の場合「12:9:5」というように一桁の数値は一桁として表示されるので、nf()というコマンドを使って一桁の数値も二桁表示されるように（09や05のように）変換する必要があります。
nf(数値,桁数)というように値を入れることで、その数値に対する出力桁数を指定して文字列に変換してくれます。
つまり、それぞれの値をnf()で括って変換し、以下のようになります。
text(nf(hour(),2)+":"+nf(minute(),2)+":"+nf(second(),2),10,200);

読み取った各数値を文字表示するために、今回はcreateFont()を使って以下のようになります。

PFont font;  //PFontインスタンスを用意（フォントの準備）

void setup(){  //初期設定
  size(400,400);  //画面サイズ設定
  font=createFont("Monaco",30);  //フォントMonacoをサイズ30ポイントに設定
  textFont(font);  //使用フォントのセット
}

void draw(){  //描画処理
  background(0);  //背景を黒に設定
  text(nf(hour(),2)+":"+nf(minute(),2)+":"+nf(second(),2),10,200);  //時間の表示
}

文字を使う場合は、最初に「PFont font」を用意し、void setup(){...}内で「font=createFont()」と「textFont()」でフォントのセッティングを行い、void draw(){...}内で「text()」によって表示するという手順であると覚えておくといいでしょう。またcreateFont()のかわりにloadFont()を使う方法もあります。その場合はProcessingのメニューバー「Tools>Create Font...」を選択し、表示されたウィンドウの中からフォントやそのサイズなどを選んで使用します（説明はこちら）。

以下のように表示されます。



関連：
「Processing：アナログ時計のプログラム」時間に合わせた図形の回転。

Getting Started With Processing

posted with amazlet at 10.06.19

Casey Reas Ben Fry
O'Reilly Media
売り上げランキング: 20010

Amazon.co.jp で詳細を見る