Processing 基礎 (四) 指針式時鐘

     這範例 Processing 會抓取電腦即時時鐘(RTC)顯示在畫面上。

   範例是取自Processing網站更改。

//**************範例******************

int cx, cy;                                      //設定變數
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;

void setup() {
  size(640, 480);    //設定畫面大小
  stroke(255);        //背景黑色

  int radius = min(width, height) / 2;    //半徑取水平或垂直最小  x 0.5
  secondsRadius = radius *0.70;           // 秒針長度半徑 x 0.7
  minutesRadius = radius * 0.60;          //分針長度半徑  x 0.6
  hoursRadius = radius * 0.50;             // 十針長度半徑 x 0.5
  clockDiameter = radius * 1.6;            // 外框半徑 x 1.6

  cx = width / 2;              // x 座標 = 銀幕寬度的 1/2
  cy = height / 2;             // y 座標 = 銀幕高度的 1/2
}

void draw() {             // 開始畫圖
  background(0);        //畫面背景 "黑色"
   //畫外框
  fill(0);              //不填滿
  stroke(128);    //外框顏色 = 灰階128
  ellipse(cx, cy, clockDiameter, clockDiameter);   //畫圓

  // 畫秒針,分針,時針的位置
  // 圓的起點是在右手水平位置,要調整到12點鐘位置要扣掉90度
  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(#24FF4A);     //顏色 #24FF4A
  strokeWeight(1);       //線條寬度=1
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);   //畫秒針
  stroke(#7DFA12);    //顏色#7DFA12
  strokeWeight(2);      //線條寬度 = 2
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);  //劃分針
  stroke(#DEFA12);    //顏色 #DEFA12
  strokeWeight(5);       //線條寬度 = 5
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);  //畫時針  

  // 畫分秒點,在時鐘的一圈畫上60個點
  strokeWeight(5);            // 線條寬度 = 5
  stroke(#E212FA);          //顏色 #E212FA
  beginShape(POINTS);   //畫點
  for (int a = 0; a < 360; a+=6) {      //總點數 = 360/6每6度畫一點
    float angle = radians(a);            
    float x = cx + cos(angle) * secondsRadius;   //計算出頂點 x
    float y = cy + sin(angle) * secondsRadius;    //計算出頂點 y
    vertex(x, y);       //頂點位置
  }
  endShape();      //結束繪圖
}

按 "播放"後

函數

min()

      min()是取最小值，min(a,b) b>a 回傳b，比較組數可以2個或3個也可以是一個陣列，比較值可以是整數或浮點數。

語法

min(a,b)
min(a,b,c)
min(list)       //比較數字陣列

回傳值 :  (比較式中的最小值)

map()

  map()是從一個範圍映射到另一個範圍。start1, stop1 映射到 start2, stop2。

語法

map(value, start1, stop1, start2, stop2)

sin()

       sin()是計算的角度的正弦值。sin()輸入值為弧度(值從0到2π）。回傳值為浮點數(float)範圍-1到1。

語法

sin(angle)

回傳值 : 浮點數(-1~1)

cos()

      cos()是計算的角度的餘弦值。cos()輸入值為弧度(值從0到2π）。回傳值為浮點數(float)範圍-1到1。

語法

cos(angle)

回傳值 : 浮點數(-1~1)

參考資料 : https://processing.org/