javascript(p5.js) アナログ時計の作成

前提・実現したいこと

本来のアナログ時計のように時針を経過時間(分)に応じて動くようにしたいのですがどうしても実装方法が思いつきません
ご教授お願いいたします

該当のソースコード

function setup() {
createCanvas(600, 600);
frameRate(1);
}

//アナログ時計
function draw() {
background(50);
translate(width / 2, height / 2);
let s = second() / 60 * TWO_PI;
let m = minute() / 60 * TWO_PI;
let h = hour() / 12 * TWO_PI;

//外枠
fill(255);
noStroke();
circle(0,0,450);
//内円
fill(50);
noStroke();
circle(0,0,440);
//文字盤
push();
for (let i = 0; i < 12; i++) {
rotate(TWO_PI / 12);
noStroke();
fill("white");
circle(0, -185, 32);
}
pop();

//時針
strokeWeight(5); draw_hands(100, h);
//分針
strokeWeight(3); draw_hands(125, m);
//秒針
strokeWeight(1); draw_hands(150, s);
//デジタル時計
digital_Time(0,0);
}

function draw_hands(len, angle) {

let x = len * sin(angle);
let y = len * - cos(angle);
stroke(255,255,255);
line(0, 0, x, y);
}

//デジタル時計
function digital_Time(x,y) {
noStroke();
fill(random(150,200));
textSize(random(14, 22));
textAlign(CENTER);
//translateにより座標(0,0)がcanvasの中心にある
text(hour() + ':' + minute() + ':' + second(),
//±160はtextの座標が中心にあるためはみ出し防止でCanvasのxy座標より内側160pxで表示するため
random(width-(width1.5)+160,(width/2)-160),
random(height-(height1.5)+160,(height/2)-160 ));
}

行動規範の内容に同意します

回答1件

ベストアンサー

本来のアナログ時計のように時針を経過時間(分)に応じて動くようにしたいのですがどうしても実装方法が思いつきません

例えば「１時３０分なら短針が１と２の間に来るように」ということでしょうか？

hour()は１時３０分だろうが１時５９分だろうが、1を返すことはお分かりですね？

つまりhour()を１時３０分には1.5になるような計算式と置き換えればよいわけです（分も同様）

Processing
1//let h = hour() / 12 * TWO_PI;
2const h = (hour() + minute() / 60) / 12 * TWO_PI;

（正確には秒も足すべきでしょうが、ほとんど影響しないので無視します^^;

Processing
1function setup() {
2  createCanvas(600, 600);
3  frameRate(1);
4}
5
6function draw() {
7  background(50);
8  translate(width / 2, height / 2);
9
10  noFill();
11  stroke(255);
12  strokeWeight(5);
13  circle(0, 0, 445);
14
15  push();
16  for (let i = 0; i < 12; i++) {
17    rotate(TWO_PI / 12);
18    noStroke();
19    fill(255);
20    circle(0, -185, 32);
21  }
22  pop();
23
24  const h = (hour() + minute() / 60) / 12 * TWO_PI;
25  const m = (minute() + second() / 60) / 60 * TWO_PI;
26  const s = second() / 60 * TWO_PI;
27
28  strokeWeight(5);
29  draw_hands(100, h);
30
31  strokeWeight(3);
32  draw_hands(125, m);
33
34  strokeWeight(1);
35  draw_hands(150, s);
36
37  digital_Time();
38}
39
40function draw_hands(len, angle) {
41  const x = len * sin(angle);
42  const y = len * -cos(angle);
43  stroke(255);
44  line(0, 0, x, y);
45}
46
47function digital_Time() {
48  noStroke();
49  fill(random(150, 200));
50  textSize(random(14, 22));
51  textAlign(CENTER);
52
53  const w = width / 2 - 160;
54  const h = height / 2 - 160;
55  const x = random(-w, w);
56  const y = random(-h, h);
57  text(hour() + ':' + minute() + ':' + second(), x, y);
58}