基于Processing实现带数字显示的24小时模拟时钟技术求助

我来帮你搞定这个24小时制模拟时钟的数字显示问题～看起来你之前的代码缺少了数组初始化、drawNum函数的具体实现，以及24小时制时段的判断逻辑，我给你整理了完整的可运行代码，并且详细解释关键部分：

完整实现代码 #

float[] x, y; // 存储每个数字的坐标
float clockRadius; // 时钟半径
color[] numColors;
int totalNums = 12; // 每个时段显示12个数字

void setup() {
  size(500, 500);
  colorMode(HSB);
  background(0);
  frameRate(30);
  
  // 初始化时钟半径，取窗口最小边的40%避免超出
  clockRadius = min(width, height) * 0.4;
  x = new float[totalNums];
  y = new float[totalNums];
  numColors = new color[totalNums];
  
  // 计算每个数字的位置和颜色
  for (int i = 0; i < totalNums; i++) {
    // 12点对应-π/2弧度，顺时针依次排列每个数字
    float angle = radians(i * 30) - HALF_PI;
    // 数字位置比时钟半径内缩20像素，避免贴到外框
    x[i] = width/2 + cos(angle) * (clockRadius - 20);
    y[i] = height/2 + sin(angle) * (clockRadius - 20);
    // 给每个数字分配不同的HSB颜色
    numColors[i] = color(map(i, 0, totalNums-1, 0, 360), 100, 100);
  }
}

void draw() {
  background(0);
  
  // 获取当前24小时制时间
  int hour = hour();
  int minute = minute();
  int second = second();
  
  // 绘制时钟外框
  stroke(255);
  strokeWeight(2);
  noFill();
  ellipse(width/2, height/2, clockRadius*2, clockRadius*2);
  
  // 绘制时针、分针、秒针
  // 时针：24小时转2圈，所以用hour%12 + 分钟占比计算位置
  drawHand(hour % 12 + minute/60.0, clockRadius * 0.5, 6, color(0, 255, 0));
  // 分针：每分钟转6度，加上秒针的占比
  drawHand(minute + second/60.0, clockRadius * 0.7, 4, color(0, 0, 255));
  // 秒针：每秒转6度
  drawHand(second, clockRadius * 0.8, 2, color(255, 0, 0));
  
  // 绘制中心圆点
  fill(255);
  noStroke();
  ellipse(width/2, height/2, 10, 10);
  
  // 绘制对应时段的数字
  drawNum(hour);
}

// 通用指针绘制函数
void drawHand(float value, float length, int weight, color c) {
  // 每个时间单位（小时/分钟/秒）对应6度（360°/60），偏移-π/2让0度对应12点
  float angle = radians(value * 6) - HALF_PI;
  stroke(c);
  strokeWeight(weight);
  line(width/2, height/2, width/2 + cos(angle)*length, height/2 + sin(angle)*length);
}

// 核心：根据24小时制时段绘制对应数字
void drawNum(int currentHour) {
  fill(255);
  textSize(20);
  textAlign(CENTER, CENTER);
  
  // 判断当前是AM（0-11点）还是PM（12-23点）时段
  boolean isAM = currentHour < 12;
  
  for (int i = 0; i < totalNums; i++) {
    int displayNum;
    if (isAM) {
      // AM时段：0点显示12，1-11点显示1-11
      displayNum = i == 0 ? 12 : i;
    } else {
      // PM时段：默认显示12、1-11（和12小时制一致）
      // 如果需要显示24小时制数字（12-23），替换成下面这行：
      // displayNum = i == 0 ? 12 : 12 + i;
      displayNum = i == 0 ? 12 : i;
    }
    
    // 绘制数字
    fill(numColors[i]);
    text(str(displayNum), x[i], y[i]);
  }
  
  // 底部显示AM/PM标识
  textSize(24);
  fill(255);
  text(isAM ? "AM" : "PM", width/2, height/2 + clockRadius + 30);
}

关键逻辑说明 #

1. 数字位置初始化：在setup()里通过三角函数计算每个数字的坐标，确保它们均匀分布在时钟边缘内缩的位置
2. 24小时制时段判断：用currentHour < 12区分AM/PM，同一时刻只显示对应时段的数字
3. 数字显示规则：
   • AM时段：0点对应显示12，1-11点对应显示1-11
   • PM时段：默认显示12、1-11（和常规12小时制一致），如果需要显示24小时制的12-23，只需要替换drawNum里PM部分的displayNum计算代码
4. 指针适配24小时制：时针通过hour % 12实现12小时转一圈，符合24小时制的视觉逻辑

你可以直接运行这段代码，然后根据需求调整数字显示样式（比如大小、颜色）或者PM时段的数字规则～

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