複数のイメージを並べて1つのイメージにまとめる方法

Question

いつもお世話になっております。

前提・実現したいこと

赤枠の中を表示するために3つのイメージを1つのイメージとして扱いたいです。

draw()内では3つのイメージのy位置が変わっても、纏められたイメージが更新されるだけなので、動的にイメージを纏めたいです。

1つのイメージに纏められさえすれば、
copy(イメージ,[赤枠領域],[表示領域])で出来るはずなのですが......
###コード
spd_number,spd_label_1,spd_label_10,spd_label_100はどれもPGraphics型です。

void move_spd_num_label()
{
  float divisor = spd_label_1.height / 2 - (spd_num_distance / 2) * 3;

  float y_1 = map(kvc, 0, 20, -divisor, divisor);
  float y_10 = map(floor(kvc / 10), 0, 20, -divisor, divisor);
  float y_100 = map(floor(kvc / 100), 0, 20, -divisor, divisor);

  if (kvc >= 10)
  {
    y_1 = y_1 % divisor;
  } 
  if (floor(kvc / 10) >= 10)
  {
    y_10 = y_10 % divisor;
  }
  if (floor(kvc / 100) >= 10)
  {
    y_100 = y_100 % divisor;
  }

  translate(displayWidth/2, displayHeight/2);
  stroke(0, 255, 0);
  line(0, 0, displayWidth/2, 0);
  //imageMode(CENTER);
  //image(spd_label_1, spd_num_x, y_1 - font_size_large / 2);
  //image(spd_label_10, -(spd_label_1.width + spd_label_10.width) / 2 + spd_num_x, y_10 - font_size_large /2);
  //image(spd_label_100, -(spd_label_1.width + spd_label_100.width) / 2 - spd_label_10.width + spd_num_x, y_100 - font_size_large / 2);

  imageMode(CORNER);
  spd_number = createGraphics(spd_label_1.width + spd_label_10.width + spd_label_100.width, displayHeight / 10);
  spd_number.beginDraw();
  spd_number.imageMode(CORNER);
  spd_number.image(spd_label_1, 0, y_1 - font_size_large / 2);
  spd_number.image(spd_label_10, -spd_label_1.width, y_10 - font_size_large /2);
  spd_number.image(spd_label_100, -(spd_label_1.width + spd_label_10.width), y_100 - font_size_large / 2);
  spd_number.endDraw();

  image(spd_number, 0, 0);
  noFill();
  translate(-displayWidth/2, -displayHeight/2);
}

補足情報（FW/ツールのバージョンなど）

processig 3.3.6

Answer 1

Processingでは画像はPImageですが、PImageの派生クラスとしてPGraphicsというのもありそれもPImageと同じものとして扱えます。

http://processing.github.io/processing-javadocs/core/processing/core/PGraphics.html

PGraphicsはPImageと異なり、あたかもそれがスケッチの画面であるかのように様々な描画関数を用いて描画できます。もちろんimageで別の画像(PImage)も描画できます。これを使えば複数の画像を一つの画像へ合成することも可能です。

PImage anImage = ...
PGraphics newImage = createGraphics(幅, 高さ);
newImage.beginDraw();
newImage.image(anImage, 描画位置x, 描画位置y);
...
newImage.endDraw();

Comments

[P5_USER]

KSwordOfHasteさん
ありがとうございます。

質問があります。動的なPGraphicsについて確保しなければならないキャンバスのことです。

質問の図のように3つの静的な図があり、これらのyの位置を動的に動かすのですが、キャンバスのサイズが小さいとイメージが圧縮されてしまい、同じ比率を維持しにくくなってしまいます。それぞれの図の幅と長さと移動量が決まっている場合は、3つの図がキャンバスからはみ出ない最小領域を構えてあげる必要があるのでしょうか。

[KSwordOfHaste]

> キャンバスのサイズが小さいとイメージが圧縮されてしまい
すみません、どういう状況か正確にわかりません。実際のコードを見た方がわかりやすいかも知れません。

[P5_USER]

質問文にコードというタイトルで追加しました。
move_spd_num_label()はdraw()内で動作させています。

http://mukai-lab.info/class/programming_1/chapter7.html
↑の方のサイトを見て、3枚の画像を横に並べてそれぞれのyの位置を変更することには成功していますが、質問文のコードでは、何故か画面に出てきてくれていません......

[KSwordOfHaste]

うーん、各々のPGraphicsに画像がどんな具合に入っているなど、コードの断片だけを見てもわかりません。
再現するようなもっと小さなコードを提示してくれると見やすいです。今のままでは再現させること自体が大変ですので、コードの雰囲気だけみて「問題ないように見える」としか言えません。

ちなみに当初の質問と内容がかわってきてますが？

[P5_USER]

ちょこちょこと弄っていたらうまく解決出来ました。