嘿，我来帮你解决这个数字添加的问题！其实核心就是根据时段计算要显示的数字，再结合三角函数算出每个数字的位置，咱们一步一步来：

1. 核心思路梳理 #

• 小时数字：AM时段（0-11点）显示0-11，PM时段（12-23点）显示12-23，每个小时对应时钟上的12个刻度位置，放在刻度内侧。
• 分钟数字：每5分钟显示一次（0、5、10…55），对应时钟上的12个大刻度位置，位置可以比小时数字更靠近中心一点，避免重叠。

2. 具体实现代码 #

你只需要在draw()函数里添加以下数字绘制的逻辑，结合你已有的时针/分针代码即可：

void draw() {
  background(0);
  // 把坐标原点移到画布中心，方便后续计算位置
  translate(width/2, height/2);
  // 设置文本居中对齐，避免数字偏移
  textAlign(CENTER, CENTER);
  textSize(16); // 可以根据你的时钟大小调整字号
  fill(255); // 白色文本，也可以换成你喜欢的颜色

  // --- 绘制小时数字 ---
  int currentHour = hour();
  float hourNumRadius = 170; // 小时数字到中心的距离，比时钟半径小（假设时钟半径200）
  for (int h = 0; h < 12; h++) {
    // 计算每个小时对应的角度：Processing默认0度向右，所以要转90度让0点（12点）在顶部
    float angle = radians(h * 30) - HALF_PI;
    // 用三角函数算出数字的x、y坐标
    float x = cos(angle) * hourNumRadius;
    float y = sin(angle) * hourNumRadius;
    // 根据AM/PM决定显示的数字
    int displayHour = currentHour < 12 ? h : h + 12;
    text(str(displayHour), x, y);
  }

  // --- 绘制每5分钟的数字 ---
  float minuteNumRadius = 150; // 分钟数字的半径，比小时数字更靠近中心
  for (int m = 0; m < 60; m += 5) {
    // 每个分钟对应的角度：每分钟6度（360/60），同样转90度对齐顶部
    float angle = radians(m * 6) - HALF_PI;
    float x = cos(angle) * minuteNumRadius;
    float y = sin(angle) * minuteNumRadius;
    text(str(m), x, y);
  }

  // --- 这里放你原来的时针、分针、秒针绘制代码 ---
}

3. 关键细节说明 #

• 坐标转换：translate(width/2, height/2)把原点移到中心，这样计算每个数字的位置时不用额外加中心坐标，更简洁。
• 角度调整：- HALF_PI是把Processing默认的0度（向右）转成时钟的0度（向上），确保数字对应正确的时钟位置。
• 半径设置：hourNumRadius和minuteNumRadius可以根据你时钟的实际大小调整，只要比时钟的外半径小，就能放在刻度内侧。
• 文本对齐：textAlign(CENTER, CENTER)是必须的，不然数字会以左上角为基准绘制，导致位置偏移。

这样调整后，你的时钟就能在AM时段显示0-11，PM时段显示12-23，同时每5分钟显示对应的分钟数啦！

内容的提问来源于stack exchange，提问作者Captain Cox