Processing：アナログ時計のプログラム

前回はhour()、minute()、second()を用いてデジタル時計のプログラムをつくりました。同様にそれらの時間の数値を利用して、今回は図形描画によるアナログ時計のプログラムをします。
時計の構成として、時計の外形をellipse()で、時針、分針、秒針をline()を用いてstrokeWeight()で太さを変えて表現することにします。
各針の回転は、rotate()を用います。括弧内には角度を入れて図形を回転させますが、角度についてはラジアンを用います。ラジアンは0~360度までを0~TWO_PIで表現します（TWO_PIは円周率のπ*2です）。
時、分、秒の角度の変数float h,m,s;を用意しておき、図形を描画する前に角度を計算しておくことにします。

秒針の角度計算：
秒については0~59の数値が読み取られるので、
s=second()/60.0*TWO_PI;
で求められます。一秒ごとにカクカクと動く秒針になります。気をつけなければいけないところは、second()で得られる整数値（0~59）を小数の60.0（あるいは60f）で割っておくところです。もし整数の60で割ってしまうと、second()/60=0になってしまい（小数は切り捨てられる）、小数での計算ができなくなってしまいます。

分針の角度計算：
分針は連続した動きのため秒数も角度に反映されるので、そのままminute()で得られる値を角度に変換するだけでは充分ではありません。よって、
m=minute()/60.0*TWO_PI+s/60;
になります。minute()/60.0*TWO_PIによって分の角度を得てから、その角度に+s/60することで秒数の角度も加えてあります。

時針の角度計算：
時針も分針同様連続した動きのため分も角度に反映されます。hour()からは24時間表示の数値（0~23）が得られるので、一旦12時間表示に変換する必要があります。そのために、割り算の余りを求める「%」をつかって、hour()%12とします。そうすれば12時のときは0時として扱われます。よって、
h=(hour()%12)/12.0*TWO_PI+m/12;
になります。

図形の描画：
これで三つの角度が求められたので、あとは図形を描くだけです。
図形を回転させるためにrotate()を使いますが、一旦回転の中心を原点（画面の左上）にして、それぞれの針（線）を00時00分00秒として描きます。translate()を図形描画の前に書くことで、それ以降の図形は画面中心に移動します。translate()は括弧内に入れた座標の分だけそれ以降の図形を全体的にずらしてくれます。rotate()は、それ以降の図形すべてを回転させるので、pushMatrix()とpopMatrix()を用いて、それぞれ別々に回転するようにします。それぞれの針の角度設定と描画のプログラム部分をpushMatrix()とpopMatrix()ではさむことで可能になります。

float s;//秒針の角度の変数
float m;//分針の角度の変数
float h;//時針の角度の変数

void setup(){
  size(400,400);//表示画面サイズ
  smooth();     //滑らかな描画（アンチエイリアス）
  noFill();     //図形の塗り面なし
  stroke(255);  //外形線の色を白に設定
}

void draw(){
  background(0);                 //背景色を黒に設定
  s=second()/60.0*TWO_PI;         //秒針の角度計算
  m=minute()/60.0*TWO_PI+s/60;    //分針の角度計算
  h=(hour()%12)/12.0*TWO_PI+m/12; //時針の角度計算
  
  translate(200,200);  //画面の中心へずらす。 
  strokeWeight(1);     //線の太さを1ピクセルにする
  ellipse(0,0,380,380);//時計の外形線描画
  
  pushMatrix();  
  rotate(s);        //秒針の回転角度
  line(0,0,0,-190); //秒針の描画
  popMatrix();
  
  pushMatrix();
  rotate(m);        //分針の回転角度
  strokeWeight(3);  //分針の太さを3ピクセルに設定
  line(0,0,0,-180); //分針の描画
  popMatrix();
  
  pushMatrix();
  rotate(h);        //時針の回転角度
  strokeWeight(5);  //時針の太さを5ピクセルに設定
  line(0,0,0,-130); //時針の描画
  popMatrix();  
}

以下がプログラム実行例です。



関連：
「Processing：デジタル時計のプログラム」文字列の表示例。

Getting Started With Processing

posted with amazlet at 10.06.19

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

Amazon.co.jp で詳細を見る