How to copy a p5.js array of Loaded Images? [closed]

I am writing a javascript based video game that uses the p5.js library.

I am trying to speed up the loading of the game, by copying loaded images, instead of repeated loading the same one's.

Is there a way to copy an array of loaded images, that were loaded from the loadImage API call?

After they are copied, I want to recolor them. I do this, and both the original and the copy get recolored.

This the p5.js API call that I am having trouble copying, whether using shallow or deep copy schemes: loadImage(URL). I even tried JavaScript structuredClone, and I got an error that the array cannot be cloned. Is that true?

As an example of what I am trying to avoid:

computer_greenCar_images[13] = loadImage('carImages P5 Origin/Car292.png'); computer_greenCar_images[14] = loadImage('carImages P5 Origin/Car315.png'); computer_greenCar_images[15] = loadImage('carImages P5 Origin/Car337.png'); computer_orangeCar_images[13] = loadImage('carImages P5 Origin/Car292.png'); computer_orangeCar_images[14] = loadImage('carImages P5 Origin/Car315.png'); computer_orangeCar_images[15] = loadImage('carImages P5 Origin/Car337.png'); computer_purpleCar_images[13] = loadImage('carImages P5 Origin/Car292.png'); computer_purpleCar_images[14] = loadImage('carImages P5 Origin/Car315.png'); computer_purpleCar_images[15] = loadImage('carImages P5 Origin/Car337.png');

I tried this, and when I went to draw the images, nothing came out.

for (let i = 0; i < computer_greenCar_images.length; i++) { // Use the .get() method (which returns a new p5.Image object) to create a copy let imgCopy = computer_greenCar_images[i].get(); computer_orangeCar_images[i] = imgCopy;

}

I also tried copying using this technique. I am still not getting unique copies. When I color the green car, the orange car picks it up.

function UTL_copy_green_to_orange() { for (let i = 0; i < computer_greenCar_images.length; i++) { computer_orangeCar_images[i] = createImage( computer_greenCar_images[i].width, computer_greenCar_images[i].height, ); computer_orangeCar_images[i].copy( computer_greenCar_images[i], 0, 0, computer_greenCar_images[i].width, computer_greenCar_images[i].height, 0, 0, computer_orangeCar_images[i].width, computer_orangeCar_images[i].height, ); } }

Any ideas? Or is this something that cannot be done with p5.js?

Thanks!!