Processingでアナログ時計の針を画像（png）で作りたい

Question

Processing初心者です。

Processingでアナログ時計の針を画像（png）で作りたいのですが、
参考になるコードを探しても見つかりません。

短針、長針、秒針をそれぞれ画像（png）で作り
秒針は連続秒針（スイープセコンド・スイープ）が理想です。

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

Comments

[thkana]

> 参考になるコードを探しても見つかりません。
だから、作るんでしょ?

画像であることが問題なら、画像じゃなかったらできるんですね? では、まずそのプログラムを示して下さい。そこから改造しましょう。

[noutore]

参考にしたコードに7行目と19行目を書き加えました。

int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;

void setup() {
img = loadImage(“sample.png");
size(640, 360);
stroke(255);

int radius = min(width, height) / 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() {
image(img, 0, 0);
background(0);

// Draw the clock background
fill(80);
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(millis(), 0, 60000, 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 minute ticks
strokeWeight(2);
beginShape(POINTS);
for (int a = 0; a < 360; a+=6) {
float angle = radians(a);
float x = cx + cos(angle) * secondsRadius;
float y = cy + sin(angle) * secondsRadius;
vertex(x, y);
}
endShape();
}

Answer 1

針を画像から描画することと、
秒針をなめらかに(正しく)動かす操作を組み込んでみました。

PImage img;
int cx, cy;
float secondsRadius;
float clockDiameter;

PImage hourHand, minuteHand, secondHand;
int millisOffset;
float multiplier=1;

void setup() {
  //  img = loadImage("sample.png");//背景画像?はダミーで
  size(640, 360);
  img=get(0, 0, 640, 360);
  stroke(255);
  int radius = min(width, height)/2;
  secondsRadius = radius * 0.72;
  clockDiameter = radius * 1.8;
  cx = width / 2;
  cy = height / 2;

  //針画像はイラスト素材のサイトからググったもの。実は時計じゃないみたいな?
  PImage set=loadImage("https://bvews.jpn.org/images/gauge-needle-sample.png");
  //画像から針を切り出し。各画像の中心が回転原点になる(別途原点情報を持たなくてよい)ように、敢えて大きく切り抜いている
  hourHand = set.get(22, 25, 30, 107*2);
  minuteHand = set.get(85, 0, 30, 132*2);
  secondHand = set.get(148, 0, 30, 131*2);

  multiplier=secondsRadius/132;
  //millis()はプログラム開始からの通算ミリ秒であって、時刻の秒の下位ではない
  //ので、「秒の変わり目」に対応するミリ秒の下位を求める
  int sec=second();
  do {
    millisOffset=millis()%1000;
  } while (sec==second());
}

void drawHands() {
  float s = map(second()+norm((millis()-millisOffset)%1000, 0, 1000), 0, 60, 0, TWO_PI);
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI);
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2);
  translate(cx, cy);
  rotate(s);
  scale(multiplier, multiplier);
  image(secondHand, -secondHand.width/2, -secondHand.height/2);
  rotate(m-s);//既にs回っているのでこれでmだけ回ったことになる
  image(minuteHand, -minuteHand.width/2, -minuteHand.height/2);
  rotate(h-m);//hだけ回ったことに
  image(hourHand, -hourHand.width/2, -hourHand.height/2);
  resetMatrix();//一応元に戻しておく
}

void draw() {
  background(0);
  image(img, 0, 0); //この順序でないと背景が表示されないのでは?

  // Draw the clock background
  fill(80);
  noStroke();
  ellipse(cx, cy, clockDiameter, clockDiameter);

  // Draw the minute ticks
  stroke(255);
  strokeWeight(2);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=6) {
    float angle = radians(a);
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();

  drawHands();//針の描画
}

---

追記 単独の針の画像で描く

なんだか難しいと言われてしまったのでソコだけのサンプル。

原理的には同じことで長針短針秒針3回描けばいいので針一本分だけ描いてみる。

//本題とは関係ない参考:針の画像を描く
//背景を透過にするためmaskを使ってpngでsaveする
PImage img1,msk;
size(100,200);
noStroke();
fill(0);
background(255);
triangle(50,20,45,180,55,180);
circle(50,180,20);
img1=get();
msk=img1.get();
msk.filter(INVERT);
img1.mask(msk);
img1.save("hand1.png");

これで次の画像ファイルが生成される。

このファイルを読み込んで、ぐるぐる回せばよい

PImage hand1;
final int refX=50; //針画像で回転の中心座標x
final int refY=180; //針画像で回転の中心座標y
final int centerX=400; //回転の中心x
final int centerY=240; //回転の中心y
float angle=0;

void setup(){
  size(640,480);
  hand1=loadImage("https://teratail-v2.storage.googleapis.com/"+
"uploads/contributed_images/fdf1674fe63b0bec82085f26b192c116.png");
//URL文字列が長くなって見にくいのが嫌で分割している。
}

void draw(){
  background(0xc0);
  translate(centerX,centerY); //centerX,centerYを新たな0,0とする
  rotate(angle); //0,0を中心に座標系を回す
  image(hand1,-refX,-refY); //refX,refYが0,0に来るように描画
  angle+=0.01;
}

Comments

[noutore]

thkanaさま
回答いただき、有難うございます。
そして、丁寧な解説も付けていただき感動しております。

１枚の画像を読み込み、それぞれの針にされておりますが
申し訳ございませんが、この箇所がかなり難しいです。
そこで大変恐縮ですが、お願いがございます。
それぞれの針に、それぞれの画像を読み込んで設定した場合は
どのようになるか、ご教授いただけないでしょうか？

それぞれの針に、それぞれの画像を読み込みが
もし可能であれば、宜しくお願い致します。

[thkana]

何ら難しいことはしていません。
https://processing.org/reference/PImage_get_.html
画像の一部を切り出して、保存しただけです。

> それぞれの針に、それぞれの画像を読み込んで
そうしたいならそうして下さい。画像も提示されていませんし、質問に書いていないことは私には知りようがないです。
画像をファイルから読み出す方法はあなたの提示したプログラムに書かれていますからご承知のものと思います。

[noutore]

thkanaさま
回答いただき、有難うございます。

2020/11/21にいただいた参考URLと
その後いただいた追記（単独の針の画像で描く）を頼りに
Processingを動かせました。
本当に有難うございました！