mieki256's diary

_sketch_20241026a_pgraphics_test.pde

// PGraphics save sample

PGraphics pg;
PImage img;
PImage bg;
int scrw;
int scrh;
float ang = 0;
boolean exitfg = false;
boolean saveframe_enable;
int sframecount;

void setup() {
  size(512, 288, P2D);
  scrw = width;
  scrh = height;
  println("size=" + scrw + "," + scrh);

  frameRate(24);

  img = loadImage("./chara.png");
  bg = loadImage("./bg.png");
  pg= createGraphics(scrw, scrh, P2D);
  exitfg = false;
  saveframe_enable = false;
  sframecount = 0;
}

void draw() {
  background(40, 80, 160);

  //draw to PGraphics
  pg.beginDraw();
  pg.clear();
  pg.push();
  pg.imageMode(CENTER);
  float x =(scrw / 2) * 0.9 * sin(radians(ang * 2.0)) +(scrw / 2);
  float y =(scrh / 2) * 0.9 * sin(radians(ang * 5.0)) +(scrh / 2);
  pg.translate(x, y);
  pg.rotate(radians(ang));
  pg.image(img, 0, 0);
  pg.pop();
  pg.endDraw();

  // draw Background
  image(bg, 0, 0);
  
  // draw PGraphics to canvas
  image(pg, 0, 0);

  if (saveframe_enable) {
    String fn = "frames/" + get_seq(sframecount, 8) + ".png";
    noStroke();
    fill(255);
    textSize(24);
    text("capture " + sframecount + " frame", 8, 24);
    text("save " + fn, 8, 48);
    pg.save(fn);

    sframecount++;
  }
  ang += 1.0;

  if (exitfg) {
    exit();
  }
}

void keyTyped() {
  if (key == 's') {
    // frame save enable / disable
    saveframe_enable = !saveframe_enable;
    if (saveframe_enable) sframecount = 0;
  }
  else if (key == 'q') {
    // set exit
    exitfg = true;
  }
}

String get_seq(int n, int k) {
  String s = "000000000000" + n;
  return s.substring(s.length() - k);
}

使用画像。

_bg.png
_chara.png

実行すると以下のような見た目になる。



動いてる部分が PGraphics に描画してる部分。BGと書かれているのがウインドウに直接描画している部分。

• PGraphics に画像(chara.png)を描画することができている。
• その PGraphics をウインドウ内に描画できている。
• PGraphics が透明部分を持っているので、背景(bg.png)も見えている。

更に、Sキーを押すと、PGraphics の内容を frames/00000000.png - 99999999.png といった連番画像として保存できる。



保存した連番画像をAPNGにしてみた。


PGraphics が透明部分を持っているので、アルファチャンネル付きの連番画像として保存されていることが分かる。

そんなわけで、一旦 PGraphics に描画して、その PGraphics をウインドウ内に描画する作りにしておけば…。その PGraphics を連番画像として保存する処理を追加することで、Processing の描画結果を動画編集の素材として使えるようになるのではないかな、と妄想しているところ。