Problem loading screen

Processing Coding Questions
1

hey, I have a problem executing my screen, it takes a second for the screen to run (it appears grey for a second), why could that be?
I´m using array of images, text and some functions with buttons. The structure of the screen is always the same, I only change the image and text in every screen. It runs efficiently after this second

2

Hi

Post your code

How many image you load??

What is size of image ?

3

It could be because the images take a long time to load. The screen appears grey because the code in setup() takes a while to execute and no drawing functions are called before draw(), so the background is the default for a PApplet: grey. My suggestion would be that if you are loading a lot of images and it takes long to load, try loading them in a separate thread, maybe extending the thread class or using Processing’s function thread().

4

ok, i´ll try, thankssss

6

array of 16 spaces, loading 15 images.

7

the code:

PImage [] fotos= new PImage [16];
String [] textoLargo=new String[16];
int nroImg;
int pantalla=0;
PFont font;
PFont font2;
void setup() {
  size(1000, 900);
  for (int i=0; i<fotos.length; i++) {
    fotos[i]=loadImage("./img/mr"+i+".jpg");
    textoLargo=loadStrings ("/ttt/textos.txt");
    font=loadFont("Constantia-48.vlw");
    font2=loadFont ("MicrosoftNewTaiLue-Bold-14.vlw");
    nroImg=0;
  }
}
void draw() {

  dibujPantalla(pantalla);
}


void keyPressed() {
  if ( key==32) {
    if ( pantalla==0 || pantalla==2 || pantalla==3 ||pantalla==4 
      ||pantalla==5 || pantalla==6 || pantalla==7 || pantalla==8 || pantalla==10 
      || pantalla==11 || pantalla==12||pantalla==13||pantalla==14||pantalla==15
      ) {
      actualizar(pantalla, 0);
    }
  }
}
void mouseClicked() {
  if (pantalla==1 || pantalla==9||pantalla==16||pantalla==17) {
  }
}
8

Hi @tati1202 – setup needs to load all 16 large images before draw can start to fill the canvas. What you want is to load the first image, then let the rest load in the background while the program is running.

This background loading could be done with threads, but it can also be done using normal Processing single-threaded design with the draw loop.

Consider this design based on a simplified version of your partial sketch:

  1. create a function that loads ONE image into fotos, then returns
void loadNextImage() {
  for (int i=0; i<fotos.length; i++) {
    if(fotos[i]==null) {
      fotos[i]=loadImage("./img/mr"+i+".jpg");
      // ...
      return; // only load one image
    }
  }
}
  1. call if from setup – now your fotos[] array has one image in it.
  2. start drawing!

But what if the user navigates to an image that isn’t loaded yet?

  1. draw images only if they aren’t null. This applies to any parallel arrays as well – only access them after checking for null.
if(fotos[pantalla]!=null) image(fotos[pantalla], 0, 0);  // o dibujPantalla

Now, how do we load the rest of the images in the background? Some options:

  • Option 1. “on-demand” – when you manually navigate to a new page, call loadNextImage()

  • Option 2. as quickly as possible: let the first draw frame finish, then load all the rest on the next frame. This may still cause a long freeze, but the freeze is with the first image displayed.

if (frameCount>1) { // preload all remaining frames
  while(fotos[fotos.length-1]==null) {
    loadNextImage();
  }
}
  • Option 3. gradually: every n frames, load a new image, spacing the loading out. For example, depending on image load time, loading your 16 images every half-second might take 8-10 seconds of background loading. If you program is interactive it will be responsive the whole time.
  if(frameCount%30==1) loadNextImage(); // preload next image every n frames.

You can inspect how the loading profile behaves by displaying the frameCount on the screen.

  push();
  textSize(100);
  text(frameCount, 120, 120);
  pop();

The full example:

/**
 * LoadImagesProgressive
 * 2021-09-16 Jeremy Douglass - Processing 3.5.4
 */
PImage [] fotos= new PImage [16];
int pantalla=0;
void setup() {
  size(1000, 900);
  loadNextImage(); // load the first image before canvas
}

void draw() {
  background(0);
  if (fotos[pantalla]!=null) image(fotos[pantalla], 0, 0);

  if (frameCount%30==1) loadNextImage(); // preload next image every n frames

  //if (frameCount>1) { // preload all remaining frames
  //  while(fotos[fotos.length-1]==null) {
  //    loadNextImage();
  //  }
  //}

  push();
  textSize(100);
  text(frameCount, 120, 120);
  pop();
}

void loadNextImage() {
  for (int i=0; i<fotos.length; i++) {
    if (fotos[i]==null) {
      fotos[i]=loadImage("./img/mr"+i+".jpg");
      // ...
      return; // only load one image
    }
  }
}

void keyPressed() {
  pantalla++;
  if (pantalla>fotos.length-1) pantalla=0;
}
4 Likes
9

wow, this really helps me, thanks!!!

1 Like