PGraphics saves messed up images after creating a new PGraphics object in a different size

bckmnn

Hi there, below i attached a small program that generates PNGs. If i change the size of the new PGraphics objects the saved PNGs start to look messed up.

To reproduce the issue run the code from the bottom. Conversion will start an you will get pngs like this:

if you do a mouse click on the canvas, the size of the pngs that should be generated is changed and a few new items are added. The results look like in the screenshot below, some of the images are blank, some are distorted and they still have the old size.

Is there a way to avoid this behavior? is this a bug in processing? am i missing something?

Any input appreciated!

PGraphics png;
ArrayList<String> cue = new ArrayList<String>();
boolean conversion = false;
int pngSize = 64;

void setup() {
  size(400, 400);
  println("creating 64px letters");
  cue.add("A");
  cue.add("B");
  cue.add("C");
  conversion = true;
}

public void mousePressed(){
  println("creating 128px letters");
  pngSize = 128;
  cue.add("A");
  cue.add("B");
  cue.add("C");
  cue.add("D");
  cue.add("E");
  cue.add("F");
  conversion = true;
}

void saveNextInCue(){
  String letter = cue.remove(0);
  println("pngSize value is "+pngSize);
  png = createGraphics( pngSize, pngSize);
  png.beginDraw();
  png.textSize(30);
  png.text(letter,30,30);
  png.fill(random(255),0,255);
  png.rect(0,0,10,10);
  png.endDraw();
  png.save(sketchPath(letter+".png"));
}

void draw() {
  int bg = color(255,0,0);
  if (!conversion){
    bg = color(0,255,0);
  }
  background(bg);
  if( conversion == true){
    saveNextInCue();
    if(cue.size() == 0){
      conversion = false;
    }
  }
}

quark

I knew I have come across with this problem when trying to save PGraphic objects before. It took me a while to remember the solution but eureka it just came back to me.

The solution is very simple - change line 37 to

png.get().save(sketchPath(letter+".png"));

The get() method retrieves a fully formed PImage object which can then be saved.

Here is the sketch I created when trying to solve the problem.

ArrayList<PGraphics> images = new ArrayList<PGraphics>();
ArrayList<String> letters = new ArrayList<String>();
int n = 0;

void setup() {
  size(512, 256);
  background(40, 40, 200);

  createImage("A", 64, 30);
  createImage("B", 64, 30);
  createImage("C", 80, 48);
  createImage("D", 80, 48);
  createImage("E", 96, 64);
  createImage("F", 96, 64);
  createImage("G", 128, 92);
  createImage("H", 128, 92);
}

void createImage(String letter, int imgSize, float fontSize) {
  println(letter, imgSize, fontSize);
  PGraphics png = createGraphics( imgSize, imgSize);
  png.beginDraw();
  png.background(255);
  png.fill(200, 200, 100);
  png.rect(0, 0, 10, 10);
  png.fill(0);
  png.textSize(fontSize);
  png.text(letter, 36, fontSize);
  png.endDraw();
  png.get().save(letter + ".png");
  println("Saved " + letter + ".png");
  image(png, (n % 4) * 128, (n / 4) * 128);
  n++;
}

If you want to try it with more letters then you need to increase the sketch size.

bckmnn

Thanks a lot for this! The letters were more a way of communicating the problem :) everything works fine now!