处理,制作模拟时钟,数字
Processing, making an analog clock, the numbers
所以,作为一项任务,我想制作一个模拟时钟,而且我还差得很远。我只需要全天候的数字,但我不知道如何制作这些。我现在已经做了一些点,但我想用数字 1-12 替换这些点。任何人都知道一种简单快捷的方法吗?我的代码如下:
int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;
void setup() {
size(1366,768);
stroke(255);
float radius = min(width/1.2, height/1.2) / 2;
secondsRadius = radius * 0.72;
minutesRadius = radius * 0.60;
hoursRadius = radius * 0.50;
clockDiameter = radius * 1.8;
cx = width / 2;
cy = height / 2;
}
void draw() {
background(random(0,255),random(0,255),random(0,255));
// Draw the clock background
fill(0);
noStroke();
ellipse(cx, cy, clockDiameter, clockDiameter);
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
// Draw the hands of the clock
stroke(255);
strokeWeight(1);
line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
strokeWeight(2);
line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
strokeWeight(4);
line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
// Draw the dots arround the clock
strokeWeight(2);
beginShape(POINTS);
for (int a = 0; a < 360; a+=30) {
float angle = radians(a);
float x = cx + cos(angle) * secondsRadius;
float y = cy + sin(angle) * secondsRadius;
vertex(x, y);
}
endShape();
textSize(40);
text("Dank Clock", 570,40);
}
您已经有了一个全天候循环并在时钟位置放置点的循环。现在你所需要的只是一些在这些位置绘制小时的逻辑。
Processing 具有 text()
功能,可让您在屏幕上绘制文本(或数字)。您可以调用它而不是 vertex()
来计算时间。
要获取绘制时间,只需使用每次循环递增的 int
变量。像这样:
int hour = 3;
for (int a = 0; a < 360; a+=30) {
float angle = radians(a);
float x = cx + cos(angle) * secondsRadius;
float y = cy + sin(angle) * secondsRadius;
vertex(x, y);
fill(255);
text(hour, x, y);
hour++;
if(hour > 12){
hour = 1;
}
}
请注意,我从 3
开始,因为您的角度从 0
开始,一直指向右侧。当循环超过 12 时,我只是从 hour
开始回到 1
。
您或许还可以找出一个从 a
映射到一个小时的简单公式,这样您就不必自己递增了。
所以,作为一项任务,我想制作一个模拟时钟,而且我还差得很远。我只需要全天候的数字,但我不知道如何制作这些。我现在已经做了一些点,但我想用数字 1-12 替换这些点。任何人都知道一种简单快捷的方法吗?我的代码如下:
int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;
void setup() {
size(1366,768);
stroke(255);
float radius = min(width/1.2, height/1.2) / 2;
secondsRadius = radius * 0.72;
minutesRadius = radius * 0.60;
hoursRadius = radius * 0.50;
clockDiameter = radius * 1.8;
cx = width / 2;
cy = height / 2;
}
void draw() {
background(random(0,255),random(0,255),random(0,255));
// Draw the clock background
fill(0);
noStroke();
ellipse(cx, cy, clockDiameter, clockDiameter);
// Angles for sin() and cos() start at 3 o'clock;
// subtract HALF_PI to make them start at the top
float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
// Draw the hands of the clock
stroke(255);
strokeWeight(1);
line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
strokeWeight(2);
line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
strokeWeight(4);
line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
// Draw the dots arround the clock
strokeWeight(2);
beginShape(POINTS);
for (int a = 0; a < 360; a+=30) {
float angle = radians(a);
float x = cx + cos(angle) * secondsRadius;
float y = cy + sin(angle) * secondsRadius;
vertex(x, y);
}
endShape();
textSize(40);
text("Dank Clock", 570,40);
}
您已经有了一个全天候循环并在时钟位置放置点的循环。现在你所需要的只是一些在这些位置绘制小时的逻辑。
Processing 具有 text()
功能,可让您在屏幕上绘制文本(或数字)。您可以调用它而不是 vertex()
来计算时间。
要获取绘制时间,只需使用每次循环递增的 int
变量。像这样:
int hour = 3;
for (int a = 0; a < 360; a+=30) {
float angle = radians(a);
float x = cx + cos(angle) * secondsRadius;
float y = cy + sin(angle) * secondsRadius;
vertex(x, y);
fill(255);
text(hour, x, y);
hour++;
if(hour > 12){
hour = 1;
}
}
请注意,我从 3
开始,因为您的角度从 0
开始,一直指向右侧。当循环超过 12 时,我只是从 hour
开始回到 1
。
您或许还可以找出一个从 a
映射到一个小时的简单公式,这样您就不必自己递增了。