i'm loading a series of .png files that have an alpha channel, then rotating and scaling them etc. and i want to output the final composition, which will be fairly large in the end ~3000pixels x ~3000pixels, while also maintaining the original alpha channel.

i've looked into createGraphics(), createImage() and PGraphics() examples for saving/outputting large files, but i can't seem to grasp how i can use these to save/output loaded image files with alpha channels.

here's the example from http://dev.processing.org/reference/core/javadoc/processing/core/PApplet.html#cr...

Code:

 PGraphics big;

 void setup() {
   big = createGraphics(3000, 3000, P3D);

   big.beginDraw();
   big.background(128);
   big.line(20, 1800, 1800, 900);
   // etc..
   big.endDraw();

   // make sure the file is written to the sketch folder
   big.save("big.tif");
 }

 

here's a simple version of what i'm doing

Code:

PImage[] bild;
PGraphics big;

void setup() {
  size(600,600);
  big = createGraphics(3000, 3000, P3D);
  
  bild = new PImage[4];
  bild[0] = loadImage("image_00.png");
  bild[1] = loadImage("image_01.png");
  bild[2] = loadImage("image_02.png");
  bild[3] = loadImage("image_03.png");
  
}

void draw() {
  background(255);

   big.beginDraw();
   //big.background(128);

  translate(width/2,height/2);
  for(int i=0; i!=bild.length; i++) {
    rotate(radians(360/bild.length));
 
    //scale( map(mouseX, 0,width, 0.0, 2.0) );  
    rotate( radians( map(mouseY, 0,height, 0,360) ) );
    image(bild[i], 0,0);
    
    /*
    // i know this doesn't work,
    // but something like is necessary right?

    big.image(bild[i], 0,0);

    */
  }  

   big.endDraw();
}

void speichern() {
  //saving functions here
  big.save("big.png");
}

void keyPressed() {
  if(key == 's') {
    println("saving");
    speichern();
  }
}
 

does what i'm asking make sense? any help is much appreciated.

thanks.
Ken

you're correct, it isn't 3D but this is what it says on the dev pages http://dev.processing.org/reference/core/javadoc/processing/core/PApplet.html

"If you want to create images that are larger than the screen, you should create your own PGraphics object, draw to that, and use save(). For now, it's best to use P3D in this scenario. P2D is currently disabled, and the JAVA2D default will give mixed results. An example of using P3D: "

as per your post, i've changed my code to this:

Code:

PImage[] bild;
PGraphics big;
int fc;

void setup() {
  size(600,600);
  big = createGraphics(3000, 3000, P3D);
  
  bild = new PImage[4];
  bild[0] = loadImage("image_00.png");
  bild[1] = loadImage("image_01.png");
  bild[2] = loadImage("image_02.png");
  bild[3] = loadImage("image_03.png");
  
}

void draw() {
  background(255);

  big.beginDraw();
  big.background(255, 0);

  big.translate(width/2,height/2);
  for(int i=0; i!=bild.length; i++) {
    big.rotate(radians(360/bild.length));
 
    big.scale( map(mouseX, 0,width, 0.0, 2.0) );  
    big.rotate( radians( map(mouseY, 0,height, 0,360) ) );
    big.image(bild[i], 0,0);

  }  

  big.endDraw();

  //image(big, 0,0);
}

void speichern() {
  //saving functions here the image here
  println("saving: big" + fc + ".png");
  big.save("big" + fc + ".png");
}

void keyPressed() {
  if(key == 's') {
    fc = frameCount;
    speichern();
  }
}
 

it's outputting large files, with a transparent background. which is great (thank you)

however, it's not respecting the original alpha of the loaded images and i'm not sure how "createGraphics(3000, 3000, P3D);" determines where the graphics appear in the outputted image.

it's almost there.
Ken

i just tried that, it spit out an image with a black background instead of white background.

Code:

output.beginDraw();
output.imageMode(CENTER);
//output.background(255,0);
 

i'll keep tinkering i suppose.

Ken

I made a little variation of my above script, and was able to generate a 2064x2256 image with transparency (768KB) with default memory settings of Processing.
Code:

static final int LARGE_PRIME = 444443;
static final int TEST_NB = 2;
int SMALL_IMAGE_NB = 6;
int SMALL_IMAGE_SIZE = 48;
int BIG_IMAGE_NB_H = 43;
int BIG_IMAGE_NB_V = 47;

PGraphics bigImage;
PImage[] smallImages = new PImage[SMALL_IMAGE_NB];

void setup()
{
  for (int i = 0; i < SMALL_IMAGE_NB; i++)
  {
    smallImages[i] = loadImage("testImage" + (i + 1) + ".png");
  }
  if (TEST_NB == 1)
  {
    bigImage = createGraphics(SMALL_IMAGE_SIZE, SMALL_IMAGE_SIZE * SMALL_IMAGE_NB, JAVA2D);
  }
  else
  {
    bigImage = createGraphics(SMALL_IMAGE_SIZE * BIG_IMAGE_NB_H, SMALL_IMAGE_SIZE * BIG_IMAGE_NB_V, JAVA2D);
  }
  bigImage.beginDraw();
  if (TEST_NB == 1)
  {
    for (int i = 0; i < SMALL_IMAGE_NB; i++)
    {
      bigImage.image(smallImages[i], 0, i * SMALL_IMAGE_SIZE);
    }
  }
  else
  {
    int posNb = BIG_IMAGE_NB_H * BIG_IMAGE_NB_V;
    for (int i = 0, position = 0; i < posNb; i++)
    {
      position = (position + LARGE_PRIME) % posNb;
      int x = (position % BIG_IMAGE_NB_H) * SMALL_IMAGE_SIZE;
      int y = (position / BIG_IMAGE_NB_H) * SMALL_IMAGE_SIZE;
      bigImage.image(smallImages[i % SMALL_IMAGE_NB], x, y);
    }
  }
  bigImage.endDraw();
  bigImage.save("BigImage-" + TEST_NB + ".png");
  exit();
}
 

No strange artifacts, etc.