Problems with background to PImage

marzinp

Hi,

this code doesnt work in JS mode, and I cant figure why!?

I try to copy background pixels to an image that I use as a background image.... It works perfectly in java mode, but in JS, it's like pixels are not copied to bgImage. "sample_01.png" and "sample_02.png" are gray images and "img.png" is a black image I use to initialize bgImage. Is it a sync problem?

/* @ pjs preload="sample_01.png,sample_02.png,img.png"; */
PImage[] myImage;    // PImage is used to store an image in memory
float scaleOfImage;  // current scale of the image
PImage bgImage;      // display window image
int selectedImageNum;

void setup() {
  size(800, 800);  
  frameRate(200);
  // allocate a new array with space for two images
  myImage = new PImage[2];
  myImage[0] = loadImage("sample_01.png");
  myImage[1] = loadImage("sample_02.png");
  bgImage = loadImage("img.png");
  loadImage("img.png");
  // set initial scale to be 0.5 and use the first image (index 0)
  scaleOfImage = 0.5;
  selectedImageNum = 0;
}

void draw() {
  // note this new kind of arguement to background - an image!
  imageMode(CORNER);
  background(bgImage);
  // left and right arrow keys to scale the image
  if ( keyPressed ) {
    if (keyCode == LEFT) {
      scaleOfImage -= 0.01;
    } 
    else if (keyCode == RIGHT) {
      scaleOfImage += 0.01;
    }
  }

  // draw image accorinding to current scale and mouse position
  pushMatrix();
  translate(mouseX, mouseY);
  float scaleValue = constrain(scaleOfImage, 0.05, 6);
  scale(scaleValue); 
  rotate(radians(frameCount));
  imageMode(CENTER);
  image(myImage[selectedImageNum], 0, 0);
  popMatrix();

  // if the mouse is pressed load the image into the main background image
  if (mousePressed) {
    loadPixels();
    bgImage.loadPixels();
    bgImage.pixels = pixels;
    bgImage.updatePixels();    
  }

}

void keyReleased() {
  if (key == 'd') {
    bgImage = loadImage("img.png");
  }
  else if (key == '1') {
    selectedImageNum = 0;
  }
  else if (key == '2') {
    selectedImageNum = 1;
  }
}

PhiLho

bgImage.pixels = pixels; is a bit risky, as you don't do a copy there, only a reference assignment.
You might want to use get() instead, or arrayCopy().

marzinp

You're right PhilHo! I corrected it. My sketch still doesn't work at all in JS mode if I use background(bgImage). I tried if(bgImage.isLoaded())background(bgImage) and if(bgImage.width==width)background(bgImage) : no way... So I did

    background(0);
    image(bgImage,0,0);

which works, very slowly... I still dont get the problem with background(PImage). I uploaded the sketch here: http://www.openprocessing.org/sketch/152732

Any help/tips would be appreciated!

GoToLoop

If the bgImage is supposed to be a background PImage, there's no need to use background() before image().
BtW, set(0, 0, bgImage); would be considerable faster than image(bgImage,0,0);.
Since it's a raw render that doesn't consider many aspects that image() has to!
1 more thing, if all your image() renders use imageMode(CENTER);, place that inside setup()!

marzinp

You're right about set(0,0,bgImage), thx.

GoToLoop

But I need background because my bgImage is transparent,...

Function background(PImage) is analogous to set(0, 0, PImage)!
If you need transparency, the only option is image(PImage, 0, 0)!

marzinp

Yes I need it! My problem is that I dont understand why my program works in Java mode, but not in JS mode. When in JS mode, I get a different result using set(bgImage,0,0) and background(bgImage)(this one doesnt work: I get a "PImage not loaded error"). This code works very well in Java mode, with transparency, but not at all in Javavascript... I guess get() is aynchronous? If so, how can I test if bgImage is loaded? bgImage.isLoaded() seems not to work...

/* @ pjs preload="sample_01.png,sample_02.png,img.png"; */
PImage[] myImage;    // PImage is used to store an image in memory
float scaleOfImage;  // current scale of the image
PImage bgImage;      // display window image
int selectedImageNum;

void setup() {
  size(800, 800);  
  frameRate(200);
  // allocate a new array with space for two images
  myImage = new PImage[2];
  myImage[0] = loadImage("sample_01.png");
  myImage[1] = loadImage("sample_02.png");
  bgImage = loadImage("img.png");
  //loadImage("img.png");
  // set initial scale to be 0.5 and use the first image (index 0)
  scaleOfImage = 0.5;
  selectedImageNum = 0;
}

void draw() {
  // note this new kind of arguement to background - an image!
  imageMode(CORNER);
   background(bgImage);
  // left and right arrow keys to scale the image
  if ( keyPressed ) {
    if (keyCode == LEFT) {
      scaleOfImage -= 0.01;
    } 
    else if (keyCode == RIGHT) {
      scaleOfImage += 0.01;
    }
  }

  // draw image according to current scale and mouse position
  pushMatrix();
  translate(mouseX, mouseY);
  float scaleValue = constrain(scaleOfImage, 0.05, 6);
  scale(scaleValue); 
  rotate(radians(frameCount));
  imageMode(CENTER);
  image(myImage[selectedImageNum], 0, 0);
  popMatrix();

  // if the mouse is pressed load the image into the main background image
  if (mousePressed) {  
    bgImage=get();    
  }
 bgImage.copy(1,1,width-1,height-1,0,0,width,height);
}

void keyReleased() {
  if (key == 'd') {
    bgImage = loadImage("img.png");
  }
  else if (key == '1') {
    selectedImageNum = 0;
  }
  else if (key == '2') {
    selectedImageNum = 1;
  }
}