光の三原色が構成するアナログ時計

実現したいこと

光の三原色が構成するアナログ時計を連続秒針タイプで表現したい。

発生している問題・分からないこと

アナログ時計の分針（赤色）の動きに飛ぶ箇所があるので、スムーズに回転させたい。
時針（青色）も正しい動きをしているか不明です。

ご教授の程、宜しくお願い致します。

該当のソースコード

sketch.js
1const circleSize = 550
2
3function setup() {
4	createCanvas(windowWidth, windowHeight);
5    background(0);
6}
7
8let hours, minutes, seconds,milliseconds;
9
10function draw() {
11	noStroke();
12	translate(width/2, height/2);
13	rotate(PI);
14
15blendMode(BLEND);
16	background(0);
17	blendMode(DIFFERENCE);
18	fill(255,255,255,255);
19	noStroke();
20
21    showTime(hour(), minute(), millis());
22}
23
24function showTime(hours, minutes, millis){
25
26//hour hand
27    push();
28    fill(0, 0, 255);
29    rotate(radians(30*hours + 0.5*minutes +90));
30    circle(width/4, (height/4 - circleSize/4) ,circleSize);
31    pop();
32//minute hand
33    push();
34    fill(255, 0, 0);
35    rotate(radians(6*minutes + 0.0001*millis +90));
36    circle(width/4, (height/4 - circleSize/4) ,circleSize);
37    pop();
38//second hand
39    push();
40    fill(0, 255, 0);
41    rotate(radians(6 * 0.001 * millis+90));
42    circle(width/4, (height/4 - circleSize/4) ,circleSize);
43    pop();
44}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

Processingで連続秒針タイプのアナログ時計を作った経験はあるのですが、blendModeを使用すると動きません。
また、Google検索でProcessingの3や4があるという情報を得たのですが、ダウンロード先にたどり着けませんでした。

補足

宜しくお願いいたします。

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

回答1件

ベストアンサー

アナログ時計の分針（赤色）の動きに飛ぶ箇所があるので、スムーズに回転させたい。

millis()は実行した時からの積算のミリ秒です。
大きくなる一方で、今の秒でも今のミリ秒でもありません。
millis

p5.jsには今のミリ秒を取得する関数はないので、JavaScriptで取得するのが早いです。
Date - JavaScript | MDN

時針（青色）も正しい動きをしているか不明です。

（デバッグ中は）針も出すようにするとか、（行数が増えても）ロジックをわかりやすく書くとかでしょうか。

js
1const circleSize = 550;
2
3function setup() {
4  createCanvas(windowWidth, windowHeight);
5  background(0);
6  noStroke();
7}
8
9function draw() {
10  translate(width/2, height/2);
11  rotate(-HALF_PI);
12
13  blendMode(BLEND);
14  background(0);
15  blendMode(DIFFERENCE);
16  fill(255);
17
18  showTime();
19}
20
21function showTime() {
22  let d = new Date();
23  let hours = d.getHours();
24  let minutes = d.getMinutes();
25  let seconds = d.getSeconds();
26  let milliseconds = d.getMilliseconds();
27  //print(hours + ":" + minutes + ":" + seconds + "." + milliseconds);
28
29  let s = seconds + (milliseconds / 1000);
30  let m = minutes + (s / 60);
31  let h = hours + (m / 60);
32
33  push();
34  fill(0, 0, 255);
35  rotate(h / 12 * TWO_PI);
36  circle(width/4, 0, circleSize);
37  //stroke(255);
38  //line(0, 0, 200, 0);
39  pop();
40
41  push();
42  fill(255, 0, 0);
43  rotate(m / 60 * TWO_PI);
44  circle(width/4, 0, circleSize);
45  //stroke(255);
46  //line(0, 0, 300, 0);
47  pop();
48
49  push();
50  fill(0, 255, 0);
51  rotate(s / 60 * TWO_PI);
52  circle(width/4, 0, circleSize);
53  //stroke(255);
54  //line(0, 0, 400, 0);
55  pop();
56}