Which instance actually executes beginDraw() and endDraw()?

I want to have two PGraphics instances and create an image for each separately.

I wanted to prevent the creation of two different images due to changes in the argument contents during a long draw() execution, so I applied the same drawing method to two PGraphics instances in succession, but two different An image will be created.

In the method draws() below, the right and left halves of the image are intended to alternate between light and dark slowly, but the result is not as it should be.

PGraphics pgL,pgR;
int i = 0;
boolean f = true;

void setup()
{
  size(1000, 500, P2D);
  background(0);
  pgL = createGraphics(500, 500, P3D);
  pgR = createGraphics(500, 500, P3D);
}

void draw(){
  if(f == true){
    draws(i);
    i++;
    if(i==255) f = false;
  } else {
    draws(i);
    i--;
    if(i==0) f = true;
  }
  image(pgL, 0, 0);
  image(pgR, 500, 0);
}

void draws(int i)
{
  pgL.beginDraw();
  pgR.beginDraw();
  pgL.background(i);
  pgR.background(i);
  pgL.endDraw();
  pgR.endDraw();
}

If I change the inside of the method draws() as follows, it works as intended.

void draws(int i)
{
  pgL.beginDraw();
  pgL.background(i);
  pgL.endDraw();
  pgR.beginDraw();
  pgR.background(i);
  pgR.endDraw();
}

If I want to execute the methods beginDraw (), endDraw () for different PGraphics instances, do I still have to execute beginDraw () after endDraw ()?

Do I need to execute a method inside a PApplet instance, for example, to successively execute beginDraw () or other drawing methods?

Where can I find a tutorial on such coding?

1 Like

Welcome to the forum.

Although I can’t find it in the documentation it seems that you can’t nest beginDraw and endDraw which is why your first effort failed and the second succeeded.

If I understood the problem correctly then this modified sketch will provide a better solution. Not only does the backgrounds fade correctly but each image has the same rotating box.

PGraphics pgL, pgR;
int i = 0;
float ang = 0;
boolean f = true;

void setup() {
  size(1000, 500, P2D);
  background(0);
  pgL = createGraphics(500, 500, P3D);
  pgR = createGraphics(500, 500, P3D);
}

void draw() {
  if (f == true) {
    i++;
    if (i==255) f = false;
  } else {
    i--;
    if (i==0) f = true;
  }
  draws(pgL, i);
  draws(pgR, i);
  image(pgL, 0, 0);
  image(pgR, 500, 0);
}

void draws(PGraphics pg, int i) {
  pg.beginDraw();
  pg.background(i);
  pg.translate(pg.width/2, pg.height/2);
  pg.rotateY(ang);
  ang+=0.01;
  pg.fill(200, 255, 200);
  pg.box(100);
  pg.endDraw();
}
2 Likes

Except that you shouldn’t update the angle ang+=0.01; inside the draws() function otherwise the two images will be at slightly different angles. Move the ang update back out to draw() instead so it only gets called once per frame.

This is similar to the code I used for stereo imaging: https://discourse.processing.org/t/cross-eyed-stereoscopy/38637.

3 Likes

Optionally multiply frameCount by the angle step:
final float ang = frameCount * .01; pg.rotateY(ang);
or just pg.rotateY(frameCount * .01);

2 Likes

Thank you for your quick reply!
Certainly what I want to implement is stereo imaging.

Eventually, I wanted to make it an Android app, but I couldn’t find a way to turn off the posture sensor on the device, so I started making it with a full scratch.

I’ve read the source code for PGraphics and PApplet, the actual resources for createGraphics are in PApplet, not PGraphics, so we can’t separate the beginDraw and endDraw combination in one PApplet instance in one sketch.

For these reasons, I have tried to create multiple PApplet instances and then create a PGraphics instance for each PApplet instance, but I have not succeeded yet.

Thank you.