processing画一个时钟：音乐、控制转动等

processing画一个时钟：音乐、控制转动等

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012428012/article/details/79676759

分析

钟表的功能主要实现以下几个功能：

1. 画钟表的表盘、数字等
2. 通过 s 或 S 键控制旋转，t 或 T 键暂停旋转
3. 设置音乐的定时播放、秒针转动播放音乐
4. 右上角显示当前时间
5. 设置时针的转动
6. 设置分针的转动
7. 设置秒针的转动
8. 最终效果

1. 画钟表的表盘、数字等

• 在屏幕中间画一个半径为150的圆
• 表盘上一圈有60个刻度线，对应360度。因此，一个刻度线对应6度。
• 将坐标系平移到屏幕中间，并每次旋转：每次旋转6度并画一条刻度线，总共60次。整点的刻度（如1点、3点、6点等）应该较长，所以每5次让线的更长更粗。
• 设置3点、6点、9点、12点的文字。
  

void setup () {
  size(500, 500);
}
void draw () {  
  // 表盘 
  ellipseMode(CENTER);
  strokeWeight(10);
  fill(0);
  ellipse(width/2, height/2, 300, 300);

  // 刻度线
  for(int i = 1; i <= 60; i++) {
    pushMatrix();  // 拷贝一份坐标系位置
    translate(width/2, height/2);  // 移动坐标系(0,0)到(width/2, height/2)
    rotate(radians(i * 6));
    if(i % 5 == 0) { // 整点的刻度线
      strokeWeight(3);
      line(120, 0, 130, 0);
    } else { // 非整点的刻度线
      strokeWeight(1);
      line(125, 0, 130, 0);
    }
    popMatrix();  // 恢复坐标系位置
  }

  // 0-12时
  textSize(25);
  fill(255);
  stroke(255);
  strokeWeight(1);
  text(12, 235, 155); //12
  text(3, 350, 260) ;//3
  text(9, 135, 260) ;//9
  text(6, 245, 365) ;//6 
}

2. 通过 s 或 S 键控制旋转，t 或 T 键暂停旋转

• 设置全部变量flag，用于控制时针等是否旋转
• 按下s或S时旋转，按下t或T时停止转动

Boolean flag = true;
void draw () {  
  if (key == 's' || key == 'S') {
    flag = true;
  } else if (key=='t' || key=='T') {
    flag = false;
  } 
}

3. 设置音乐的定时播放、秒针转动播放音乐

• 定义三个整型变量currentHour、currentMinute、currentSecond保存系统当前的时分秒信息
• 定义两个浮点型变量currentMinuteFloat、currentHourFloat。
  
  • currentMinuteFloat为实际的分钟（minute() + currentSecond / 60.0）
  • currentHourFloat为实际的小时（hour() + currentMinuteFloat / 60.0）。
• 两个if条件：设定闹钟音乐播放时间，和闹钟音乐停止时间。
• flag为true时，秒针转动的音乐一直播放。flag为false时，秒针不转动，音乐停止播放。

import ddf.minim.*;

Minim minim;
AudioPlayer player; // 闹钟音乐
AudioPlayer player1; // 秒针转动的音乐
PImage img; // 背景图片

int currentSecond; // second,秒
int currentMinute; // minute,分
int currentHour; // hour,时
float currentMinuteFloat; // minute,分,实际分钟 minute() + currentSecond / 60.0;
float currentHourFloat; // hour,时,实际小时 hour() + currentMinuteFloat / 60.0;

void setup () {
  size(500, 500);
  img = loadImage("1.jpg");
  minim = new Minim(this); 
  player = minim.loadFile("music.mp3");
  player1 = minim.loadFile("zhongbiao1.mp3");
}

void draw () {  
    // 当前时间的时、分、秒。08:02:03,10:32:13
  currentSecond = second();
  currentMinute = minute();
  currentHour = hour();
  currentMinuteFloat = minute() + currentSecond / 60.0;
  currentHourFloat = hour() + currentMinuteFloat / 60.0;

  // 播放音乐：指定时间段内播放音乐。闹钟功能
  if (currentSecond == 30 && currentMinute == 30 && currentHour == 22) {
    player.play();
  }
  if (currentSecond == 40 && currentMinute == 30 && currentHour == 22) {
    if (player.isPlaying()) {
      player.pause();
    }
  }

  // 播放秒针转动的音乐
  if(flag) {
    if (player1.position() == player1.length()) {
      player1.rewind();
      player1.play();
    } else {
      player1.play();
    }
  } else {
    if (player1.isPlaying()) {
      player1.pause();
    }
  }
}

4. 右上角显示当前时间

• 右上角显示当前时间：时间一般显示格式为08:02:03 或10:32:13，所以当currentSecond<10的时候，数字前面加上一个0。
• 右上角第二行显示当前日期：调用year()/month()/day()函数显示
• 右下角显示作品作者
  

void draw () {  
  // 右上角显示当前时间
  String secondBeatiful = currentSecond + "";
  String minuteBeatiful = currentMinute + "";
  String hourBeatiful = currentHour + "";
  if (currentSecond < 10) {
    secondBeatiful = "0" + currentSecond;
  }
  if (currentMinute < 10) {
    minuteBeatiful = "0" + currentMinute;
  }
  if (currentHour < 10) {
    hourBeatiful = "0" + currentHour;
  }
  String currentTime = hourBeatiful + ":" + minuteBeatiful + ":" + secondBeatiful;
  textSize(50);
  text(currentTime, width - 230, 50);
  String currentDate = year() + "/" + month() + "/" + day();
  textSize(25);
  text(currentDate, width - 150, 100);
  String author = "Author: Yuanhao Zheng";
  textSize(20);
  text(author, width - 250, height - 10);
}

5. 设置时针的转动

• 时针转动一圈为12个小时，因此一个小时为30度。
• 平移坐标系原点到屏幕中央，然后旋转坐标系达到旋转时针的效果。
  
  • 当时针为3点到12点（或15点到24点）时，应该转动的角度是0到270度，所以旋转的角度为
    angleHour = radians(30 * (currentHourFloat - 3));
  • 当时针为1点到2点（或13点到14点）时，应该转动的角度是270到360度，所以旋转的角度为angleHour = radians(30 * (currentHourFloat - 1) + 300);
• 根据之前设定好的是否转动值flag来控制坐标系转动。（flag默认是true，按下t后为false）
• 画线：设置线条颜色（白色）和粗细（7），注意此时线条起始点和终止点的坐标都为0，横坐标不同。

void draw () {  
  // hour：时针
  // 12个小时为360度，一个小时30度。
  // 3点到12点的角度是0到270；0到3点的角度是270到360。
  pushMatrix();
  translate(width/2, height/2);
  float angleHour = radians(270);
  if ((currentHourFloat >= 3 && currentHourFloat <= 12) || (currentHourFloat >= 15 && currentHourFloat <= 24)) {
    angleHour = radians(30 * (currentHourFloat - 3));
  } else {
    angleHour = radians(30 * (currentHourFloat - 1) + 300);
  }
  if (flag) { // 判断是否按下按键，停止转动
    rotate(angleHour);
  } else {
    rotate(radians(270));
  }
  stroke(255);
  strokeWeight(7);
  line(-10, 0, 50, 0);
  popMatrix();
}

6. 设置分针的转动

• 分针转动一圈为60分钟，因此一分钟为6度。
• 平移坐标系原点到屏幕中央，然后旋转坐标系达到旋转分针的效果。
  
  • 当分针为15分钟到60分钟时，应该转动的角度是0到270度，所以旋转的角度为
    angleMinute = radians(6 * (currentMinuteFloat - 15));
  • 当分针为0分钟到15分钟时，应该转动的角度是270到360度，所以旋转的角度为angleMinute = radians(270 + 6 * currentMinuteFloat);
• 根据之前设定好的是否转动值flag来控制坐标系转动。（flag默认是true，按下t后为false）
• 画线：设置线条颜色（白色）和粗细（5），注意此时线条起始点和终止点的坐标都为0，横坐标不同。

void draw () {  
  // minute：分针
  // 60分钟为360度，一分钟为6度。
  // 15分钟到60分钟的角度是0到270；0到15分钟的角度是270到360。
  pushMatrix();
  translate(width/2, height/2);
  float angleMinute = radians(270);
  if ((currentMinuteFloat >= 0 && currentMinute <= 15)) {
    angleMinute = radians(270 + 6 * currentMinuteFloat);
  } else {
    angleMinute = radians(6 * (currentMinuteFloat - 15));
  }
  if (flag) { // 判断是否按下按键，停止转动
    rotate(angleMinute);
  } else {
    rotate(radians(0));
  }
  stroke(255);
  strokeWeight(5);
  line(-10, 0, 70, 0);
  popMatrix();
}