人工言語入門 A 2010

Processingで時計を作る

July 14, 2010

今日の内容

最終課題のテーマ発表
- 最終課題に関連した演習
  - 基礎：普通のアナログ時計を作る
    - 時刻の取得
    - 時刻の情報から針の角度を計算する
    - より正確な時計にしていくには?
  - 応用：単純な図形で「時間」を表現する
    - 位置による時間の表現
    - 数による時間の表現
    - 色による時間の表現
    - 形態による時間の表現 …etc

最終課題について

テーマ：Processingを用いて「時間」を表現する

Processingを用いて、「時間」を表現するプログラムを作成してください。
- 時間を表現するといっても、普段身近に接している時計を作成するという意味ではなく、いままで見たことのないような表現手段で「時間」を感じさせる方法を考えてください。
作品の完成度よりは、斬新なアイデアを重視します。
完成したプログラムは下記のWebサーバのアドレスにアップロードすることで提出したこととします。
http://www.cuc.ac.jp/~[ログイン名]/proga/final/index.html

時計を作る 1 – アナログ時計を作る

課題の内容と関連して、まずは普通のアナログ時計を作成する
- 時刻の取得
- 取得した時刻から、秒針、分針、時針の角度を計算する
時刻を取得するための関数
取得される時刻は、コンピュータのOSに設定された時刻

//秒の取得
second();

//分の取得
minute();

//時の取得
hour()；

試しに現在の秒数を取得して、出力してみる
println() を利用して、Processingのコンソールのテキストエリアに現在の秒数を表示してみる

void setup() {
  frameRate(30);
}

void draw() {
  int h = hour();
  int m = minute();
  int s = second();
  println("現在の時刻は "+h+":"+m+":"+s);
}

取得した「時」「分」「秒」の値から針の角度を計算する
それぞれの1単位あたり、何度針が動くのか計算する (角速度)
- 時間
  - 12時間で時計を1周する
  - 1時間あたりの移動角度 → 360/12 = 30°
- 分
  - 60分で時計を1周する
  - 1分あたりの移動角度 → 360/60 = 6°
- 秒
  - 60秒で時計を1周する
  - 1秒あたりの移動角度 → 360/60 = 6°
現在の時刻の値にそれぞれの角速度をかけ算すると、現在の角度が算出されるはず
時刻から、針の角度を計算する
- 例：8時30分20秒
  - 時針：8 x 30 = 240°
  - 分針：30 x 6 = 180°
  - 秒新：20 x 6 = 120°

Processingのプロラムで表現してみる
- 座標系全体を画面の中央に移動 translate(width/2, height/2);
- 時刻を取得
- 時間の針
  - pushMatrix();
  - rotate(時間 x 15°);
  - popMatrix();
- 分の針
  - pushMatrix();
  - rotate(時間 x 6°);
  - popMatrix();
- 秒の針
  - pushMatrix();
  - rotate(時間 x 6°);
  - popMatrix();
Processingの rotate() 関数で用いられる角度の単位に注意する必要あり
角度の単位は「度 (degree)」ではなく「ラジアン (radian)」で指定しなくてはならない
- Processingでの、degreeからradianへの変換
  - radians( 度 );
- radianからdegreeへの変換
  - degrees( ラジアン角 );

void setup() {
  size(300,300);
  stroke(255);
  smooth();
  frameRate(30);
}

void draw() {
  background(0);
  float s = second();
  float m = minute();
  float h = hour() % 12;

  translate(width/2, height/2);
  ellipse(0,0,width,height);

  noFill();
  stroke(255);

  //秒針
  pushMatrix();
  rotate(radians(s*(360/60)));
  strokeWeight(1);
  line(0,0,0,-height/2);
  popMatrix();

  //分針
  pushMatrix();
  rotate(radians(m*(360/60)));
  strokeWeight(2);
  line(0,0,0,-height/2);
  popMatrix();

  //時針
  pushMatrix();
  rotate(radians(h*(360/12)));
  strokeWeight(4);
  line(0,0,0,-height/3);
  popMatrix();
}

実際の時計との違い

作成したプログラムの表示と実際のアナログ時計と比べてみる
- なにか違いはないだろうか?
  - 分が切り替わった瞬間の動き
  - 時間が切り替わった瞬間の動き
実際の時計
- 時針、分針も常にゆっくりと動いている
- 時刻が変化した瞬間に動くのではなく、ゆっくりと移動して、気がつくと角度が変化している

実際の分針
- 秒の影響を受けている
- 毎秒あたり、1/60の影響 (1分 = 60秒なので)
- m = m + (s/60);
実際の時針
- 分の影響を受けている
- 毎分あたり、1/60の影響 (1時間 = 60分なので)
- h = h + (m/60);
実際にアナログ時計の動きと同じになるよう、プログラムを改良する

void setup() {
  size(300,300);
  stroke(255);
  smooth();
  frameRate(30);
}

void draw() {
  background(0);

  float s = second();
  float m = minute() + (s/60.0);
  float h = hour()%12 + (m/60.0);

  translate(width/2, height/2);
  ellipse(0,0,width,height);

  noFill();
  stroke(255);

  //秒針
  pushMatrix();
  rotate(radians(s*(360/60)));
  strokeWeight(1);
  line(0,0,0,-height/2);
  popMatrix();

  //分針
  pushMatrix();
  rotate(radians(m*(360/60)));
  strokeWeight(2);
  line(0,0,0,-height/2);
  popMatrix();

  //時針
  pushMatrix();
  rotate(radians(h*(360/12)));
  strokeWeight(4);
  line(0,0,0,-height/3);
  popMatrix();
}

文字盤を追加
- 角度を変更しながら、一定間隔に目盛を刻んでいく
- 小さな目盛：6度づつ
- 大きな目盛：30度づつ

int MARGIN = 20;

void setup() {
  size(300,300);
  stroke(255);
  smooth();
  frameRate(30);
}

void draw() {
  background(0);

  float s = second();
  float m = minute() + (s/60.0);
  float h = hour()%12 + (m/60.0);
  translate(width/2, height/2);
  rotate(radians(180));

  // 文字盤の表示
  pushMatrix();
  fill(128);
  noStroke();
  for(int i=0; i<60; i++){
    rotate(radians(6));
    ellipse(width/2-MARGIN,0,3,3);
  }
  for(int i=0; i<12; i++){
    rotate(radians(30));
    ellipse(width/2-MARGIN,0,10,10);
  }
  popMatrix();
  noFill();
  stroke(255);

  // 秒針
  pushMatrix();
  rotate(radians(s*(360/60)));
  strokeWeight(1);
  line(0,0,0,width/2-MARGIN);
  popMatrix();

  // 分針
  pushMatrix();
  rotate(radians(m*(360/60)));
  strokeWeight(2);
  line(0,0,0,width/2-MARGIN);
  popMatrix();

  // 時針
  pushMatrix();
  rotate(radians(h*(360/12)));
  strokeWeight(4);
  line(0,0,0,width/3-MARGIN);
  popMatrix();
}

アナログ時計 OOP版

int MARGIN = 20;
Clock myClock = new Clock();

void setup() {
  size(300,300);
  stroke(255);
  smooth();
  frameRate(30);
}

void draw() {
  background(0);
  myClock.getTime();
  myClock.draw();
}

class Clock {
  float s, m, h;
  Clock(){
  }

  void getTime(){
    s = second();
    m = minute() + (s/60.0);
    h = hour()%12 + (m/60.0);
  }

  void draw(){
    translate(width/2, height/2);
    rotate(radians(180));
    pushMatrix();
    fill(128);
    noStroke();
    for(int i=0; i<60; i++){
      rotate(radians(6));
      ellipse(width/2-MARGIN,0,3,3);
    }
    for(int i=0; i<12; i++){
      rotate(radians(30));
      ellipse(width/2-MARGIN,0,10,10);
    }
    popMatrix();
    noFill();
    stroke(255);
    pushMatrix();
    rotate(radians(s*(360/60)));
    strokeWeight(1);
    line(0,0,0,width/2-MARGIN);
    popMatrix();
    pushMatrix();
    rotate(radians(m*(360/60)));
    strokeWeight(2);
    line(0,0,0,width/2-MARGIN);
    popMatrix();
    pushMatrix();
    rotate(radians(h*(360/12)));
    strokeWeight(4);
    line(0,0,0,width/3-MARGIN);
    popMatrix();
  }
}