じょりじょり日記

JavaScript100サイトチャレンジを記録するブログです。

JavaScriptチャレンジ Processing vol9

単位円…の存在を完全に抹消しておりました。
なぜcosがx方向の座標を…、なぜsinがy方向…という疑問は残りますが、もう少し掘り下げてみる必要がありますね。
まずは三角関数と単位円の関係を勉強してみたいと思います。

f:id:zyoryzyory:20170909231213p:plain

//https://processing.org/examples/clock.html

int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;

void setup() {
  size(640, 360);
  stroke(255);
  
  //360が最小値として扱われてradisuには180が入る
  int radius = min(width, height) / 2;
  
  //秒針、長針、短針の半径を設定
  secondsRadius = radius * 0.72;
  minutesRadius = radius * 0.60;
  hoursRadius = radius * 0.50;
  
  //時計盤の半径を設定
  clockDiameter = radius * 1.8;
  
  //centerXとcenterYと予想
  cx = width / 2;
  cy = height / 2;
  
  frameRate(1);
}

void draw() {
  background(0);
  
  //時計盤を描画
  fill(80);
  noStroke();
  ellipse(cx, cy, clockDiameter, clockDiameter);
  
  //sin(), cos()は3時の時点から始まってしまうから
  //1/4スタート地点を戻すために-HALF_PIしている
  //時間に対応した角度を返すために、0-60を0から1周(TWO_PI)にマッピング
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
  
  // 針を描画
  stroke(255);
  
  //outlineの太さを指定
  strokeWeight(1);
  
  //centerから単位円に半径を掛けると円になる
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
  strokeWeight(2);
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
  strokeWeight(4);
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
  
  strokeWeight(2);
  beginShape(POINTS);
  
  //60回ループ
  for (int a = 0; a < 360; a+=6) {
    //6の倍数をラジアンに変換
    float angle = radians(a);
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    
    //x, y座標に点を描画
    vertex(x, y);
  }
  endShape();
}