# Code with lots of images makes sketch slow to load

**URL:** <https://discourse.processing.org/t/code-with-lots-of-images-makes-sketch-slow-to-load/10580>\
**Category:** Coding Questions\
**Created:** [April 23, 2019, 5:42pm UTC](https://discourse.processing.org/t/code-with-lots-of-images-makes-sketch-slow-to-load/10580 "2019-04-23T17:42:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![l.wright](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@l.wright](https://discourse.processing.org/u/l.wright)\
**Post date:** [April 23, 2019, 5:42pm UTC](https://discourse.processing.org/t/code-with-lots-of-images-makes-sketch-slow-to-load/10580/1 "2019-04-23T17:42:54Z")

</div>

Hi! I have created a sketch that makes a random image appear upon clicking but it is very slow to load the images. I have decreased the file size on all the images so none of them are particularly large. I have never done coding before so just used a piece of code I found that originally only had 5 images, but i have 34. I’m assuming that the problem is that I have too many images? Is there a way to do this more efficiently so that it is not so slow?

Again, I have never done coding before so I need a very simple answer with an explanation if possible!

Thanks!

This is the code that I have:

```auto
PImage[] myImageArray = new PImage[34];

void setup() {
  size(1200,600);
  background(10,10,10);
  smooth();
}

void draw() { 
 imageMode (CENTER); 
  for (int i=0; i < myImageArray.length; i++) {
   myImageArray [0] = loadImage( "img1.jpg");
   myImageArray [1] = loadImage( "img2.jpg");
   myImageArray [2] = loadImage( "img3.jpg");
   myImageArray [3] = loadImage( "img4.jpg");
   myImageArray [4] = loadImage( "img5.jpg");   
   myImageArray [5] = loadImage( "img6.jpg");
   myImageArray [6] = loadImage( "img7.jpg");
   myImageArray [7] = loadImage( "img8.jpg");
   myImageArray [8] = loadImage( "img9.jpg");
   myImageArray [9] = loadImage( "img10.jpg");
   myImageArray [10] = loadImage( "img11.jpg");
   myImageArray [11] = loadImage( "img12.jpg");
   myImageArray [12] = loadImage( "img13.jpg");
   myImageArray [13] = loadImage( "img14.jpg");
   myImageArray [14] = loadImage( "img15.jpg");   
   myImageArray [15] = loadImage( "img16.jpg");
   myImageArray [16] = loadImage( "img17.jpg");
   myImageArray [17] = loadImage( "img18.jpg");
   myImageArray [18] = loadImage( "img19.jpg");
   myImageArray [19] = loadImage( "img20.jpg");
   myImageArray [20] = loadImage( "img21.jpg");
   myImageArray [21] = loadImage( "img22.jpg");
   myImageArray [22] = loadImage( "img23.jpg");
   myImageArray [23] = loadImage( "img24.jpg");
   myImageArray [24] = loadImage( "img25.jpg");   
   myImageArray [25] = loadImage( "img26.jpg");
   myImageArray [26] = loadImage( "img27.jpg");
   myImageArray [27] = loadImage( "img28.jpg");
   myImageArray [28] = loadImage( "img29.jpg");
   myImageArray [29] = loadImage( "img30.jpg");
   myImageArray [30] = loadImage( "img31.jpg");
   myImageArray [31] = loadImage( "img32.jpg");
   myImageArray [32] = loadImage( "img33.jpg");
   myImageArray [33] = loadImage( "img34.jpg");
  }
}

void mousePressed(){
  image(myImageArray[(int)random(34)],width/4,height/2);
} 

```

Also, the images are appearing to the left of the screen when I want them in the middle and I’m not sure what is causing this…

Any help id greatly appreciated!

---

<div class="post-metadata">

**Author:** ![monkstone](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monkstone/32/64_2.png) [@monkstone](https://discourse.processing.org/u/monkstone)\
**Post date:** [April 23, 2019, 6:07pm UTC](https://discourse.processing.org/t/code-with-lots-of-images-makes-sketch-slow-to-load/10580/2 "2019-04-23T18:07:09Z")

</div>

You might find [requestImage](https://processing.org/reference/requestImage_.html) helps.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [April 24, 2019, 1:11am UTC](https://discourse.processing.org/t/code-with-lots-of-images-makes-sketch-slow-to-load/10580/3 "2019-04-24T01:11:13Z")

</div>

you are reloading the images n times where n is equivalent to the length of the myImageArray. just lose the loop or replace the multiple loads.

also you are loading the images every draw. move the calls into setup

```auto
myImageArray [0] = loadImage( “img1.jpg”);
myImageArray [1] = loadImage( “img2.jpg”);
myImageArray [2] = loadImage( “img3.jpg”);
myImageArray [3] = loadImage( “img4.jpg”);
myImageArray [4] = loadImage( “img5.jpg”);
myImageArray [5] = loadImage( “img6.jpg”);
myImageArray [6] = loadImage( “img7.jpg”);
myImageArray [7] = loadImage( “img8.jpg”);
myImageArray [8] = loadImage( “img9.jpg”);
myImageArray [9] = loadImage( “img10.jpg”);
myImageArray [10] = loadImage( “img11.jpg”);
myImageArray [11] = loadImage( “img12.jpg”);
myImageArray [12] = loadImage( “img13.jpg”);
myImageArray [13] = loadImage( “img14.jpg”);
myImageArray [14] = loadImage( “img15.jpg”);
myImageArray [15] = loadImage( “img16.jpg”);
myImageArray [16] = loadImage( “img17.jpg”);
myImageArray [17] = loadImage( “img18.jpg”);
myImageArray [18] = loadImage( “img19.jpg”);
myImageArray [19] = loadImage( “img20.jpg”);
myImageArray [20] = loadImage( “img21.jpg”);
myImageArray [21] = loadImage( “img22.jpg”);
myImageArray [22] = loadImage( “img23.jpg”);
myImageArray [23] = loadImage( “img24.jpg”);
myImageArray [24] = loadImage( “img25.jpg”);
myImageArray [25] = loadImage( “img26.jpg”);
myImageArray [26] = loadImage( “img27.jpg”);
myImageArray [27] = loadImage( “img28.jpg”);
myImageArray [28] = loadImage( “img29.jpg”);
myImageArray [29] = loadImage( “img30.jpg”);
myImageArray [30] = loadImage( “img31.jpg”);
myImageArray [31] = loadImage( “img32.jpg”);
myImageArray [32] = loadImage( “img33.jpg”);
myImageArray [33] = loadImage( “img34.jpg”);
}

```

or much more succinct

```auto
for (int i=0; i < myImageArray.length; i++) {
	myImageArray[i] = loadImage("img" + i + ".jpg");
}

```

so basically

```auto
PImage[] myImageArray = new PImage[34];
int selectedImage;

void setup() {
	size(1200,600);
	background(10,10,10);
	smooth();
    imageMode(CENTER);
	
    selectedImage = (int)random(34);
	
	for (int i=0; i < myImageArray.length; i++) {
		myImageArray[i] = loadImage("img" + i + ".jpg");
	}
}

void draw() {
	image(myImageArray[selectedImage], width / 4, height / 2);
}

void mousePressed(){
	selectedImage = (int)random(34);
}

```