Processing基础——钟表（简单）

艺术编程Processing基础——钟表（简单）

刚接触到processing这个简单而强大的工具，看了一些基础便可以制作一些简单的“小玩意”，下面是一个简单的钟表的制作过程，记录下来

效果：

表盘，圆形，有60个刻度，12个明显一些的刻度

float lineLength = 10;
for(int i = 1;i <= 60;i++){
    if(i % 5 == 0){
      lineLength = 20;
    }
    else{
      lineLength = 10;
    }
//processing通过弧长进行运算的话  0在钟表“3点”的位置，12点的位置为-PI/2
float x1 = width/2 + cos(i * PI / 30 - PI / 2) * (radius - lineLength);
float y1 = height/2 + sin(i * PI / 30 - PI / 2) *(radius - lineLength);
float x2 = width/2 + cos(i * PI / 30 - PI / 2) * radius; 
float y2 = height/2 + sin(i * PI / 30 - PI / 2) * radius;
line(x1,y1,x2,y2);

表盘上有字，显示1-12，在长刻度下面进行显示

for(int i = 1;i <= 60;i++){
    if(i % 5 == 0){
      lineLength = 20;
      pushMatrix();
      translate(width/2,height/2);
      int numTex = i / 5;
      rotate(radians(30 * numTex));
      String str = numTex + "";
      fill(255);
      //注释部分为另一种显示数字的方式，所有数字都是正向显示，与画刻度线的方式同理
      //text(str,width/2 + cos(i * PI / 30 - PI / 2) * 160,height/2 + sin(i * PI / 30 - PI / 2) * 160);
      textSize(10);
      text(str,cos(-PI/2) * 160,sin(-PI/2) * 160);
      popMatrix();
    }
    else{
      lineLength = 10;
    }
    float x1 = width/2 + cos(i * PI / 30 - PI / 2) * (radius - lineLength);
    float y1 = height/2 + sin(i * PI / 30 - PI / 2) * (radius - lineLength);
    float x2 = width/2 + cos(i * PI / 30 - PI / 2) * radius;
    float y2 = height/2 + sin(i * PI / 30 - PI / 2) * radius;
    line(x1,y1,x2,y2);
  }

这样刻度就显示出来了，现在还差左上角的时间和指针

时间就是简单的hour() minute() second()内置函数来获取
指针思路：
把一整天的时间换算成秒，计算当前时间为多少秒
通过当前时间有多少秒和整天时间的比值求指针在一圈之中转到了多少度

显示时间：

  fill(0,0,0,50);
  noStroke();
  rect(0,0,220,48);
  textSize(25);
  fill(255);
  text(hour() + ":" + minute() + ":" + second(),110,25);

绘制指针

float secondNum = 0;
float hourLineLength = 60;
float minuteLineLength = 90;
float secondLineLength = 120;


  secondNum = hour() * 60 * 60 + minute() * 60 + second();
  stroke(18,255,255);
  line(width/2,height/2,width/2 + cos(radians((secondNum/86400) * 720 - 90)) * hourLineLength,
  height/2 + sin(radians((secondNum/86400) * 720 - 90)) * hourLineLength);
  stroke(255,219,147);
  line(width/2,height/2,width/2 + cos(radians(((secondNum%3600)/3600) * 360 - 90)) * minuteLineLength,
  height/2 + sin(radians(((secondNum%3600)/3600) * 360 - 90)) * minuteLineLength);
  stroke(18,255,150);
  line(width/2,height/2,width/2 + cos(radians(((secondNum%60)/60) * 360 - 90)) * secondLineLength,
  height/2 + sin(radians(((secondNum%60)/60) * 360 - 90)) * secondLineLength);
  
  //上面是通过角度算出指针指向角度，注释部分是通过弧长计算
  //secondNum = (hour()%12) * 60 * 60 + minute() * 60 + second();
  //line(width/2,height/2,width/2 + cos(secondNum/43200 * TWO_PI - PI / 2) * hourLineLength,
  //height/2 + sin(secondNum/43200 * TWO_PI - PI / 2) * hourLineLength);

这样基本上就完成了
其中运用到一点点数学知识就是通过三角函数求圆上的某一点的坐标
在绘画刻度，指针的时候用到

下面是全部代码

float radius = 200;
float lineLength = 10;
float hourLineLength = 60;
float minuteLineLength = 90;
float secondLineLength = 120;
PFont myFont;

void setup(){ 
  size(500,500);
  background(0);
  strokeWeight(3);
  myFont = createFont("font1.ttf",48);
  ellipseMode(RADIUS);
  textFont(myFont);
  textAlign(CENTER,CENTER);
}

void draw(){
  
  stroke(255,252,31);
  fill(0);
  ellipse(width / 2,height / 2,200,200);
  
  for(int i = 1;i <= 60;i++){
    if(i % 5 == 0){
      lineLength = 20;
      pushMatrix();
      translate(width/2,height/2);
      int numTex = i / 5;
      rotate(radians(30 * numTex));
      String str = numTex + "";
      fill(255);
      //text(str,width/2 + cos(i * PI / 30 - PI / 2) * 160,
      //height/2 + sin(i * PI / 30 - PI / 2) * 160);
      textSize(10);
      text(str,cos(-PI/2) * 160,sin(-PI/2) * 160);
      popMatrix();
    }
    else{
      lineLength = 10;
    }
    float x1 = width/2 + cos(i * PI / 30 - PI / 2) * 
    (radius - lineLength);
    float y1 = height/2 + sin(i * PI / 30 - PI / 2) *
    (radius - lineLength);
    float x2 = width/2 + cos(i * PI / 30 - PI / 2) * radius;
    float y2 = height/2 + sin(i * PI / 30 - PI / 2) * radius;
    line(x1,y1,x2,y2);
  }
  
  fill(0,0,0,50);
  noStroke();
  rect(0,0,220,48);
  textSize(25);
  fill(255);
  text(hour() + ":" + minute() + ":" + second(),110,25);
  
  float secondNum = 0;
  
  secondNum = hour() * 60 * 60 + minute() * 60 + second();
  stroke(18,255,255);
  line(width/2,height/2,width/2 + cos(radians((secondNum/86400) * 720 - 90)) * hourLineLength,
  height/2 + sin(radians((secondNum/86400) * 720 - 90)) * hourLineLength);
  stroke(255,219,147);
  line(width/2,height/2,width/2 + cos(radians(((secondNum%3600)/3600) * 360 - 90)) * minuteLineLength,
  height/2 + sin(radians(((secondNum%3600)/3600) * 360 - 90)) * minuteLineLength);
  stroke(18,255,150);
  line(width/2,height/2,width/2 + cos(radians(((secondNum%60)/60) * 360 - 90)) * secondLineLength,
  height/2 + sin(radians(((secondNum%60)/60) * 360 - 90)) * secondLineLength);
  
  //secondNum = (hour()%12) * 60 * 60 + minute() * 60 + second();
  //line(width/2,height/2,width/2 + cos(secondNum/43200 * TWO_PI - PI / 2) * hourLineLength,
  //height/2 + sin(secondNum/43200 * TWO_PI - PI / 2) * hourLineLength);
  
}