Avoid 'clunky' sketch/framerate

Processing Coding Questions
22

Hi,

You can’t do what you are doing because there is a risk of having the variable idx superior at 34. But it can’t be higher than 34 because your array images[] only have 35 slots.

Plus it wouldn’t solve your problem because you would still be updating only 1 slot of your array images[]

As I said before if you want to change multiple pictures then you need to load multiple pictures. And all of this happen in the getNewPic() function.
So if you wan’t to change 2 pics every time, instead of having 1 temporary image, you would have 2 temporary images. And in draw every 10 seconds you would place those temporary images somewhere at random in you array images[]

Now, if you want to change all the pics every time, you can simply use a double array images[][].
The idea is that images[0][] is one set of images that can be drawn on you grid and images[1][] is another one.
So while you are drawing on screen the first set of images, you can load new images for the other set of images. When all the new images for that other set is loaded and that the amount of time elapsed is good, you can now show that new set of images and load new one for the old one. And so on and so on.

Here how it could works:

PImage[][] images = new PImage[2][9];
long timerStart = 0;
boolean changePic = false;
boolean readyForNewPic = true;
int currentPicSet = 0;

void setup() {
  size(600, 600);

  for (int i = 0; i < 9; i++) {
    images[0][i] = loadImage("Image_" + (int)random(13) + ".jpg");
  }
}

void draw() {
  // Get a new set of pics
  if (readyForNewPic) {
    readyForNewPic = false;
    changePic = false;
    thread("getNewPic");
  }

  // Change the set to display when te new pic has been loaded (every 5 seconds)
  if (changePic) {
    if (millis() - timerStart > 5000) {
      
      if (currentPicSet == 0) {
        currentPicSet = 1;
      } else {
        currentPicSet = 0;
      }
      
      changePic = false;
      readyForNewPic = true;
      timerStart = millis();
    }
  }

  for (int i = 0; i < 3; i++) {
    for (int j = 0; j < 3; j++) {
      image(images[currentPicSet][i * 3 + j], i * 200, j * 200, 200, 200);
    }
  }
}

void getNewPic() {
  if (currentPicSet == 0) {
    for (int i = 0; i < 9; i++) {
      images[1][i] = loadImage("Image_" + (int)random(13) + ".jpg");
    }
  } else {
    for (int i = 0; i < 9; i++) {
      images[0][i] = loadImage("Image_" + (int)random(13) + ".jpg");
    }
  }
  changePic = true;
}
1 Like
23

Thanks again @jb4x!

So i got the full changing all pics working :slight_smile:

I have tried to follow your guidance re: just two tiles changing each iteration.

PImage[] images = new PImage[31298];
long timerStart = 0;
PImage tempImage;
PImage tempImage2; //this is the new second image
boolean changePic = false;
boolean readyForNewPic = true;

in getnewpic() I created a second temporary

void getNewPic() {
  tempImage = loadImage((int)random(31298) + ".jpg");
  tempImage2 = loadImage((int)random(31298) + ".jpg");
  changePic = true;
}

My problem (I think) is in draw. I have tried two different ways:

first:

 images[idx] = tempImage.copy();tempImage2.copy();

But nothin changes (the sketch still runs though, no error message)

and then I tried

    images[idx] = tempImage.copy();
    images[idx] = tempImage2.copy();

But again nothing changes (sketch still works)

On a positive note, as you can probably tell, I was able to load 31,298 images though :slight_smile:

24

Hi,

I think you need to revise your basics because the questions you are asking show that you don’t really understand what is going on. And please don’t take it wrong, I have no intent to be mean or anything, it is just an advice.

Now, to get back at what you were trying to do:

Everytime you have ; this is the end of an instruction. So here you have 2 instructions. The first one : images[idx] = tempImage.copy() copy the first temporary image to the array of images images[] at the position idx. The second instruction tempImage2.copy() is doing absolutely nothing.

For your second attempt:

This is a bit more correct. The problem is that you are copying the first temporary image at the same position as your second temporary image since you are using the same index idx. As a result you are just seeing 1 image changing even if it did change twice.

To correct that, you need to get a new index each time. Something like:

idx = (int)random(25); // Getting a position to change an image at random
images[idx] = tempImage.copy(); // Copying the new image to the random position idx
idx = (int)random(25); // getting a new position to change an other image
images[idx] = tempImage2.copy(); // Copying the second new image to that new position
2 Likes
25

Fair comment @jbdx, no offence taken and I completely agree, it’s good advice. I’ve been away from processing for a while and this project (as you can tell) is very much me walking before i can crawl.

I’m going back over Learning Processing while I work on this project to try and catch up again

Thank you very much for your help and patience, I’ll keep learning ‘learning’ :slight_smile: and will hopefully be back with better, more informed questions

2 Likes
26

The questions are always welcome – and walking before you can crawl is allowed!

I agree with the general point that spending a bit more time coming back up to speed on basics – like quickly reviewing intro tutorials on syntax https://processing.org/tutorials/ – will eliminate a lot of problems that prevent you from getting good results when working with advanced concepts. Then you will be able to narrow down why something isn’t working much more quickly.

Any and all questions – including about very basic things – are welcome on this forum, of course! Continue sharing code and explaining your thinking as this makes it easy to help.

2 Likes