Strange results when exporting

I have a sketch which runs very well in the IDE; when exporting it runs also but changing its appearance: i mean that i get 3 or four times the images, as cloned from a point of the screen to another one; after some time i can see clearly rows and columns, one upon or below another one. The sketch uses P3D and not any library ; i cannot see any problem with the code, except that it uses pushMatrix() a lot of times. Any hint?
If i try to post 2 images (for difference) i get a notif from the forum saying that new users cannot post 2 images, sorry! - So only one, when the app runs as standalone

Without seeing the actual code, it is impossible for us to give you even a hint.

Thanks for the answer; i understand that you want to see the code; but i am quite sure that the problem is not here: using exactly (some little details) the same code with the old P5 1.5.1 and exporting from it i dont get this result: i get axactly the same than with the IDE (and i cannot pst here 6 classes of code!) - What i have to precise is that i use osX, Sierra, for the 3.3.7 vs, and Snow Leopard 10.6.8 for 1.5.1 (java 1.7).

You actually can post all six classes here, but you probably don’t need to. Considering that it looks like the finished image is being copied and drawn again a couple of times, it might be enough just to show us your setup() and draw() functions.

@TfGuy44===
ok; i 'll try to simplify the code and if the problem remains when exporting i’ll post it there.

@TfGuy44===

before simplifying the code i have found something that i cannot understand: if i export the skech NOT in full screen but in its window, the problem disappears, everything is ok! - AND if i use the present way in the IDE i get the same weird result than when exporting full screen…Mystery goes on!

@TfGuy44===
here the simplified code (but the export in presentation mode has the same problem):

boolean silence = false;

float seuil =5f;//for density
float spifac = 1.05f;//mouse dragging params
float drag = 0.01;//mouse dragging params
int nbre = 700;
mobile particules[] = new mobile[nbre];
float mX;//transitionnal mouseX position
float mY;
float departX;
float departY;
boolean premiere = true;
//Souris souris;
mobile b;
boolean sourisMobile = true;//useless here
int delai = 10000;//useless here
int delai2;//useless
int start;//useless
int start2;//useless
int fois =0;

int transp = 2;

void settings() {
  size(1024, 576, P3D);
}

void setup() {

  strokeWeight(1);
  fill(255, 255, 255);
  stroke(255, 255, 255, 5);
  departX= random(50, 950);
  departY= random(50, 500);
  background(44, 40, 39, transp);   
  smooth();
  for (int i = 0; i < nbre; i++) {
    particules[i] = new mobile();
  }
};

void draw() {

  if (frameCount%30==0) {

    fill(72, 4, 1, transp);
    rectMode(CENTER);

    pushMatrix();
    translate(width/2, height/2, 0);
    rect(0, 0, width*2, height*2);
    //box(width*2,height*2,1);//NE MARCHE PAS AVEC OPEN GL
    popMatrix();
  }
  silence =false;


  if (premiere) {

    premiere = false;
    ///at this moment mX=0.0 so =

    mX += 0.3 * (departX );//starting randomly; here using mouseX or mouseY can throw exception or make the sketch starting always at the left corner 0,0
    mY += 0.3 * (departY);//same for Y
  } else {

    float posX= mouseX;
    float posY= mouseY;
    // now mX is not == 0;

    mX += 0.3 * (posX - mX);
    mY += 0.3 * (posY - mY);
  }
  ///updating the boxes (mobile class)
  for (int i = 0; i < nbre; i++) {
    particules[i].affiche(fois);
  }

  fois++;
};

/////////////////////////////////////////////////////

class mobile {
  float X;///position en X au depart
  float Y;//position en Y au depart
  float Xv;
  float Yv;
  float precedentX;
  float precedentY;
  float w;
  int fact = 0;//useless now because it is constant
  float angl;
  float taille;//width, height, ep for the 600 boxes

  mobile() {
    X = random(width);///anywhere when created

    Y = random(height);
    w = random(1 / seuil, seuil*2);
    angl= 0.5;//for boxes rotationZ
  }

  void affiche(int f) {//f is useless here

    Xv /= spifac;
    Yv /= spifac;

    Xv += drag * (mX - X) * w;
    Yv += drag * (mY - Y) * w;
    X += Xv;//changing the X according to mouseX,xVelocity of drag and previous X
    Y += Yv;


    taille = (dist(X, precedentX, Y, precedentY)/500);//calculating the box size in order to make them very little

    if (!silence) {///always false for the simplified code
      fill(255, 235, 0, 140);
    } else {
      noFill();

      noStroke();
    }

    pushMatrix();

    translate(X, Y, -(taille+0.01));//put the boxes behind 0//in the real code this changes according to other parameters

    rotateY(angl*frameCount);//in the real code there are spotlights, here it is useless but does quite nothing
    box(taille, taille/3, taille);

    precedentX = X;//now previous X = X;
    precedentY = Y;//now previous Y = Y;we can start again and so on
    popMatrix();
  }
}

Alright! I have good news, bad news, good news, and bad news.

Good news: I can reproduce the issue.

Bad news: You’re not doing anything wrong… not exactly. Not really. Well, sort of. But yes, fair enough, this might be because of an issue with Processing, not your code.

Good news: There is a fix! Here it is:

boolean silence = false;

float seuil =5f;//for density
float spifac = 1.05f;//mouse dragging params
float drag = 0.01;//mouse dragging params
int nbre = 700;
mobile particules[] = new mobile[nbre];
float mX;//transitionnal mouseX position
float mY;
float departX;
float departY;
boolean premiere = true;
//Souris souris;
mobile b;
boolean sourisMobile = true;//useless here
int delai = 10000;//useless here
int delai2;//useless
int start;//useless
int start2;//useless
int fois =0;

int transp = 2;
PImage img;


//void settings() {
  //size(1024, 576, P3D);
//}

void setup() {
  size(1024, 576, P3D);
  strokeWeight(1);
  fill(255, 255, 255);
  stroke(255, 255, 255, 5);
  departX= random(50, 950);
  departY= random(50, 500);
  background(44, 40, 39, transp);
  smooth();
  for (int i = 0; i < nbre; i++) {
    particules[i] = new mobile();
  }
  img = get();
};

void draw() {
  background(img);
  if (frameCount%30==0) {

    fill(72, 4, 1, transp);
    rectMode(CENTER);

    pushMatrix();
    translate(width/2, height/2, 0);
    rect(0, 0, width*2, height*2);
    //box(width2,height2,1);//NE MARCHE PAS AVEC OPEN GL
    popMatrix();
  }

  silence =false;

  if (premiere) {

    premiere = false;
    ///at this moment mX=0.0 so =

    mX += 0.3 * (departX );//starting randomly; here using mouseX or mouseY can throw exception or make the sketch starting always at the left corner 0,0
    mY += 0.3 * (departY);//same for Y
  } else {

    float posX= mouseX;
    float posY= mouseY;
    // now mX is not == 0;

    mX += 0.3 * (posX - mX);
    mY += 0.3 * (posY - mY);
  }
  ///updating the boxes (mobile class)
  for (int i = 0; i < nbre; i++) {
    particules[i].affiche(fois);
  }
  fois++;
  img = get();
};

/////////////////////////////////////////////////////

class mobile {
  float X;///position en X au depart
  float Y;//position en Y au depart
  float Xv;
  float Yv;
  float precedentX;
  float precedentY;
  float w;
  int fact = 0;//useless now because it is constant
  float angl;
  float taille;//width, height, ep for the 600 boxes

  mobile() {
    X = random(width);///anywhere when created

    Y = random(height);
    w = random(1 / seuil, seuil*2);
    angl= 0.5;//for boxes rotationZ
  }

  void affiche(int f) {//f is useless here

    Xv /= spifac;
    Yv /= spifac;

    Xv += drag * (mX - X) * w;
    Yv += drag * (mY - Y) * w;
    X += Xv;//changing the X according to mouseX,xVelocity of drag and previous X
    Y += Yv;
    taille = (dist(X, precedentX, Y, precedentY)/500);//calculating the box size in order to make them very little

    if (!silence) {///always false for the simplified code
      fill(255, 235, 0, 140);
    } else {
      noFill();

      noStroke();
    }

    pushMatrix();

    translate(X, Y, -(taille+0.01));//put the boxes behind 0//in the real code this changes according to other parameters
    rotateY(angl*frameCount);//in the real code there are spotlights, here it is useless but does quite nothing
    box(taille, taille/3, taille);

    precedentX = X;//now previous X = X;
    precedentY = Y;//now previous Y = Y;we can start again and so on
    popMatrix();
  }
}

What changed in the fix? I added a new PImage, img, that stored the drawn contents of each frame at the end of draw(). This image is then used to draw the background at the start of the next frame.

I suspect that the issue is related to relying on what was drawn in a previous frame to still be there at the start of the next frame. You might not always be assured of this! The fix, such that it is, is to MAKE SURE this happens. Hence the saving previous image and drawing it again.

Bad news: This slows the sketch WAY down. Like a lot. If you care, this is a problem.

Ideally, you do not want to have to do this at all. Perhaps drawing to an off-screen PGraphics would be better… hmmm…

boolean silence = false;

float seuil =5f;//for density
float spifac = 1.05f;//mouse dragging params
float drag = 0.01;//mouse dragging params
int nbre = 700;
mobile particules[] = new mobile[nbre];
float mX;//transitionnal mouseX position
float mY;
float departX;
float departY;
boolean premiere = true;
//Souris souris;
mobile b;
boolean sourisMobile = true;//useless here
int delai = 10000;//useless here
int delai2;//useless
int start;//useless
int start2;//useless
int fois =0;

int transp = 2;
//PImage img;
PGraphics pg;

//void settings() {
  //size(1024, 576, P3D);
//}

void setup() {
  size(1024, 576, P3D);
  pg = createGraphics(width, height, P3D);
  pg.beginDraw();
  pg.clear();
  pg.strokeWeight(1);
  pg.fill(255, 255, 255);
  pg.stroke(255, 255, 255, 5);
  departX= random(50, 950);
  departY= random(50, 500);
  
  pg.smooth();
  pg.endDraw();
  for (int i = 0; i < nbre; i++) {
    particules[i] = new mobile();
  }
  //img = get();
};

void draw() {
  background(44, 40, 39, transp);
  //background(img);
  pg.beginDraw();
  if (frameCount%30==0) {

    pg.fill(72, 4, 1, transp);
    pg.rectMode(CENTER);

    pg.pushMatrix();
    pg.translate(width/2, height/2, 0);
    pg.rect(0, 0, width*2, height*2);
    //box(width2,height2,1);//NE MARCHE PAS AVEC OPEN GL
    pg.popMatrix();
  }

  silence =false;

  if (premiere) {

    premiere = false;
    ///at this moment mX=0.0 so =

    mX += 0.3 * (departX );//starting randomly; here using mouseX or mouseY can throw exception or make the sketch starting always at the left corner 0,0
    mY += 0.3 * (departY);//same for Y
  } else {

    float posX= mouseX;
    float posY= mouseY;
    // now mX is not == 0;

    mX += 0.3 * (posX - mX);
    mY += 0.3 * (posY - mY);
  }
  ///updating the boxes (mobile class)
  for (int i = 0; i < nbre; i++) {
    particules[i].affiche(fois);
  }
  fois++;
  pg.endDraw();
  //image( pg.get(), 0, 0 ); // EDIT -- Removed .get() call, per comment below.
  image( pg, 0, 0 ); // EDIT -- Drawing the PGraphics object directly, per comment below.
  //img = get();
};

/////////////////////////////////////////////////////

class mobile {
  float X;///position en X au depart
  float Y;//position en Y au depart
  float Xv;
  float Yv;
  float precedentX;
  float precedentY;
  float w;
  int fact = 0;//useless now because it is constant
  float angl;
  float taille;//width, height, ep for the 600 boxes

  mobile() {
    X = random(width);///anywhere when created

    Y = random(height);
    w = random(1 / seuil, seuil*2);
    angl= 0.5;//for boxes rotationZ
  }

  void affiche(int f) {//f is useless here

    Xv /= spifac;
    Yv /= spifac;

    Xv += drag * (mX - X) * w;
    Yv += drag * (mY - Y) * w;
    X += Xv;//changing the X according to mouseX,xVelocity of drag and previous X
    Y += Yv;
    taille = (dist(X, precedentX, Y, precedentY)/500);//calculating the box size in order to make them very little

    if (!silence) {///always false for the simplified code
      pg.fill(255, 235, 0, 140);
    } else {
      pg.noFill();

      pg.noStroke();
    }

    pg.pushMatrix();

    pg.translate(X, Y, -(taille+0.01));//put the boxes behind 0//in the real code this changes according to other parameters
    pg.rotateY(angl*frameCount);//in the real code there are spotlights, here it is useless but does quite nothing
    pg.box(taille, taille/3, taille);

    precedentX = X;//now previous X = X;
    precedentY = Y;//now previous Y = Y;we can start again and so on
    pg.popMatrix();
  }
}

Well, that still feels slow to me. But at least it does’t bug out in present mode.

EDIT: Removed .get() call per next comment.

Calling pg.get() is suspicious to me, and probably the cause of that. Just image(pg,0,0); should work. get() is probably downloading the pixels from the texture, copying them, and re-uploading them to another texture?

1 Like

Sidenote: to format your code nicely, select it and click the </> button in the toolbar. You can still edit your post and do this :slight_smile:

Odd. I cannot reproduce the problem when I run that example code from the post quoted above. On macOS 10.12.6, Processing 3.3.6, it works fine in both normal sized mode and if I run the sketch in fullScreen().

odd indeed…have you tried to export it in present mode??? - If it runs then i think that the problem is with hardware (graphic card???) - thanks for answering!

@TfGuy44, @neilcsmith===

The real app creates graphics from sound using fft and attractors; with your “workaround” the result is absolutely ugly: too slow && false // tempo. Anyway if i can understand that “you must not rely upon what was drawn is still present…” (though i never got this kind of problem !) it does not explain the fact that it runs (when exported or in the IDE) fine without the present mode …What is the difference?
-And much more: why does it works fine with the “old” processing 1.5.1 in the present mode???(with OPENGL)
Thanks for answering!

Must be a bug. I get the same with this program:

void settings() {
  size(1024, 576, P2D);
}
void draw() {
  line(0, 0, random(width), random(height));
}

For me a solution is to use fullScreen(P2D); or fullScreen(P3D);. Then it looks fine in present mode.

1 Like

Ok, trying with your code, i get the same result, and it is exactly what i get with my code: it seems to repeat three times the screen, with offset towards the right upper angle; as for using fullScreen() as for me is impossible, frameRate is too low; it seems to be a bug.

Maybe that’s worth a different thread: how to make the code run faster. For reference, at 1920x1080 with integrated Intel Graphics GPU I can draw 1500 rotating cubes with one light at 60 fps.

Ah, I’m seeing that bug in Present as well – funny, I didn’t even know that Sketch > Present menu option existed;’ I’ve never used it before…