3 月 01

[Processing]シンプルなサンプル、アナログ時計を描いてみた

Tag: processing — uechoco @ 00 : 00 : 00

　シンプルなアナログ時計を描いてみました。

　注意点は、ラジアンの0度がx軸の方向で、しかも反時計回りに増えるので、プログラム中ではラジアンをマイナス値でとり、さらに90度の補正をしています。

PLAIN TEXT
Processing:
  1. int cx, cy; // 中心座標
  2. int radius = 85; //時計の半径
  3.  
  5.   size(200, 200);
  6.   colorMode(RGB, 100);
  7.   background(100);
  8.   smooth();
  9.  
  10.   frameRate(10);
  11.  
  12.   cx = width / 2;
  13.   cy = height / 2;
  14. }
  15.  
  17.   // 背景
  18.   noStroke();
  19.   fill(100, 30);
  20.   rect(0, 0, width, height);
  21.  
  22.   // 時計のフレーム
  23.   stroke(0);
  25.   noFill();
  26.   ellipseMode(CENTER_RADIUS);
  27.   ellipse(cx, cy, radius, radius);
  28.  
  29.   // 時刻を取得
  30.   float s = second();
  31.   float m = minute() + s / 60.0;
  32.   float h = hour() % 12 + m / 60.0;
  33.  
  34.   float rad;
  35.  
  36.   // 時
  37.   rad = -TWO_PI * h / 12 + HALF_PI;
  38.   stroke(0, 0, 100);
  40.   line(cx, cy, cx + cos(rad) * radius * 0.5, cy - sin(rad) * radius * 0.5);
  41.  
  42.   // 分
  43.   rad = -TWO_PI * m / 60 + HALF_PI;
  44.   stroke(0, 100, 0);
  46.   line(cx, cy, cx + cos(rad) * radius * 0.75, cy - sin(rad) * radius * 0.75);
  47.  
  48.   // 秒
  49.   rad = -TWO_PI * s / 60 + HALF_PI;
  50.   stroke(100, 0, 0);
  52.   line(cx, cy, cx + cos(rad) * radius * 0.9, cy - sin(rad) * radius * 0.9);
  53. }

processing_Clock.jpg