Question

在处理3.3.6时，只需要一点模拟时钟上的数字帮助我相信我已经接近了，但我似乎无法破解代码。

我需要在时钟节拍内部（0-11）添加数字，对应于AM期间的平均时钟，以及PM期间的12-23。也可以尝试对分钟数进行编号（每5分钟，所以0,5,10，最多55）。

它应该是这样的：

以下是目前的代码：

    void setup()
{
  size(500, 500);
  colorMode(HSB);
  background(0);
  frameRate(1);
  surface.setResizable(true);
}



  void draw()
  {
    float h, m, s;
    float radius;
    float cx, cy;

    float clockface;
    float hoursRadius, minutesRadius, secondsRadius;
    float hoursTick, minutesTick;
    float hoursNum, minutesNum;
    float hoursNumSize, minutesNumSize;


    radius = min(height/2.0, width/2.0);
    cx = width/2.0;
    cy = height/2.0;



    clockface = radius * 0.9;
   hoursRadius = radius * 0.5;
   minutesRadius = radius * 0.65;
   secondsRadius = radius * 0.72;
   hoursTick = radius * 0.05;
   minutesTick = hoursTick * 0.5;




   // get time
   s = second();
   m = minute();
   h = hour()%12 + m/60.0;



   // draw clock face
   fill(40);
   noStroke();
   ellipseMode(RADIUS);
   ellipse(cx, cy, clockface, clockface);



  // draw the hands
  drawHand(cx, cy, s*6.0, secondsRadius, 2);
  drawHand(cx, cy, m*6.0, minutesRadius, 3);
  drawHand(cx, cy, h*30.0, hoursRadius, 5);



  // draw the ticks
  for( int i=0; i<60; i++) {
    if (i%5==0) {
   drawTick(cx, cy, i*6, secondsRadius, hoursTick); 
    }
    else {
      drawTick(cx, cy, i*6, secondsRadius, minutesTick); 
    }
  }
  }



  void drawTick(float x, float y, float angle, float len, float weight) {
    fill(angleToColor(angle));
    noStroke();
    rectMode(CENTER);
    rect(x + cos(radians(angle-90))*len, y + sin(radians(angle-90))*len,
    weight, weight); 
  }
  void drawHand(float x, float y, float angle, float len, float weight) {
    strokeWeight(weight);
    stroke(angleToColor(angle));
  line(x, y, x + cos(radians(angle-90))*len, y + sin(radians(angle-90))*len);
  }



 color angleToColor(float angle) {
    return color(map(angle, 0, 360, 0, 256), 255, 255);
  }



  void drawNum(float x, float y, float angle, float len, float tsize, int num) {
    fill(angleToColor(angle));
    noStroke();
    rectMode(CENTER);
  rect(x + cos(radians(angle-90))*len, y + sin(radians(angle-90))*len,
  tsize, num);

  }

Answer 1

这是一个关于如何绘制小时数的快速示例，您可以按照相同的原则制作分钟。

在draw方法调用drawHourNums中，它需要布尔值， true 如果是AM， false ，如果是PM，则可以从当前时间推断出

drawHourNums(false);

drawHourNums将为0到11之间的每个数字调用drawHourNum方法

void drawHourNums(boolean am) {
  for(int i=0; i<12; i++) {
    drawHourNum(i, am);
  }
}

drawHourNum会根据时钟和当天的时间来绘制一个数字。它与drawTick和drawHand方法具有几乎相同的算法，我只是对它进行了调整。

angle是距离中心（360/12）-90 *指数的角度 len是到中心的距离 num与index相同，如果是AM，index+12代表PM

void drawHourNum(int numIndex, boolean am) {
  PFont f = createFont("Arial",16,true);
  textFont(f,16);
  fill(100);
  float angle = numIndex*(360/12)-90;
  float len = 145;
  float x = width/2.0 + cos(radians(angle))*len;
  float y = height/2.0 + sin(radians(angle))*len;
  int num = am ? numIndex : numIndex + 12;
  text(num, x, y);
}

处理中的模拟时钟上的数字

1 个答案: