Code with lots of images makes sketch slow to load

Processing Coding Questions
1

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:

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!

1 Like
2

You might find requestImage helps.

1 Like
3

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

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

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

so basically

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);
}
4 Likes