# Avoid 'clunky' sketch/framerate

**URL:** <https://discourse.processing.org/t/avoid-clunky-sketch-framerate/12041>\
**Category:** Coding Questions\
**Created:** [June 13, 2019, 2:46pm UTC](https://discourse.processing.org/t/avoid-clunky-sketch-framerate/12041 "2019-06-13T14:46:02Z")\
**Posts on this page:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [June 18, 2019, 10:52am UTC](https://discourse.processing.org/t/avoid-clunky-sketch-framerate/12041/22 "2019-06-18T10:52:37Z")

</div>

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:

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [June 19, 2019, 2:31pm UTC](https://discourse.processing.org/t/avoid-clunky-sketch-framerate/12041/23 "2019-06-19T14:31:58Z")

</div>

Thanks again @jb4x!

So i got the full changing all pics working 🙂

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

```auto
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

```auto
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:

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

```

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

and then I tried

```auto
    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 🙂

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [June 19, 2019, 3:24pm UTC](https://discourse.processing.org/t/avoid-clunky-sketch-framerate/12041/24 "2019-06-19T15:24:34Z")

</div>

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:

> [@OptOut](#):
>
> `images[idx] = tempImage.copy();tempImage2.copy();`

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:

> [@OptOut](#):
>
> and then I tried
> 
> ```auto
> images[idx] = tempImage.copy();
> images[idx] = tempImage2.copy();
> 
> ```

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:

```auto
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

```

---

<div class="post-metadata">

**Author:** ![OptOut](https://avatars.discourse-cdn.com/v4/letter/o/cc9497/32.png) [@OptOut](https://discourse.processing.org/u/OptOut)\
**Post date:** [June 19, 2019, 3:35pm UTC](https://discourse.processing.org/t/avoid-clunky-sketch-framerate/12041/25 "2019-06-19T15:35:14Z")

</div>

> [@jb4x](#):
>
> 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.

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’ 🙂 and will hopefully be back with better, more informed questions

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 19, 2019, 4:10pm UTC](https://discourse.processing.org/t/avoid-clunky-sketch-framerate/12041/26 "2019-06-19T16:10:42Z")

</div>

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/](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.

[Previous page](https://discourse.processing.org/t/avoid-clunky-sketch-framerate/12041.md?page=1)