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

Question

前提・実現したいこと

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

該当のソースコード

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 ));
}

Answer 1

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

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

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

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

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

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

---

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

function draw() {
  background(50);
  translate(width / 2, height / 2);

  noFill();
  stroke(255);
  strokeWeight(5);
  circle(0, 0, 445);

  push();
  for (let i = 0; i < 12; i++) {
    rotate(TWO_PI / 12);
    noStroke();
    fill(255);
    circle(0, -185, 32);
  }
  pop();

  const h = (hour() + minute() / 60) / 12 * TWO_PI;
  const m = (minute() + second() / 60) / 60 * TWO_PI;
  const s = second() / 60 * TWO_PI;

  strokeWeight(5);
  draw_hands(100, h);

  strokeWeight(3);
  draw_hands(125, m);

  strokeWeight(1);
  draw_hands(150, s);

  digital_Time();
}

function draw_hands(len, angle) {
  const x = len * sin(angle);
  const y = len * -cos(angle);
  stroke(255);
  line(0, 0, x, y);
}

function digital_Time() {
  noStroke();
  fill(random(150, 200));
  textSize(random(14, 22));
  textAlign(CENTER);

  const w = width / 2 - 160;
  const h = height / 2 - 160;
  const x = random(-w, w);
  const y = random(-h, h);
  text(hour() + ':' + minute() + ':' + second(), x, y);
}

---

ほかの人がどんな実装しているか見てみることもできます（気になったのを開いて上部にある</>ボタン）
多くの人が公開しているので、やってないもの・トリッキーなもの・スマートなもの等いろいろあって面白いです^^
Browse Sketches - OpenProcessing

Comments

[420kbps]

ご丁寧にありがとうございます!
助かりました