The way you have your code here is not too bad, just two minor tweaks.
First, It looks like you load “NightSky0.png” into the last element of the array, it should probably be “NightSky4.png”.
And second, In your code, you always use the img[0] as the background, but you would want to advance by one image on each frame. Processing has an internal variable called frameCount, which starts at 1 and automatically increases by 1 every frame. You could use this as the index into img[], but it would start at index 1 and not 0, and on frame 5 you will have an ArrayIndexOutOfBoundsException (since the array has a length of 5, so img[4] refers to the last element, and anything beyond that isn’t defined). To fix the first problem, just subtract 1 from frameCount, and to fix the second problem, modulo the result by 5. In case you are not familiar with the modulo operation, it returns the remainder of a division (and is written as a % sign in Java), so 2%5 = 2, 8%5 = 3, 10%5=0 and so on.
In total, it should look something like this:
void draw() {
background(img[(frameCount-1)%numFrames]);
}
Furthermore, you could write the setup() method more efficiently. img[] should always have the length numFrames, so you should declare it like this:
PImage [] img = new PImage[numFrames];
You could also automate the image loading process with a for() loop (see for \ Language (API) \ Processing 3+ for a reference). Basically, element n of img[] should contain "NightSky-n-.png". In Processing, you would write it like this: img[n] = loadImage("NightSky" + str(n) + ".png"); (using + to join to Strings together and str() to convert an int to a String). Combining this with a for() loop, it would look like this:
for (int i=0; i<numFrames; i++) {
img[i] = loadImage("NightSky" + str(i) + ".png");
}
Now, you only have to change numFrames, and the rest changes with it. Reducing redundancy in your code is always a good practice.
I don’t know what all these images look like that you want to display, but I’m pretty sure there is some way to render the images in Processing directly, without using Photoshop. That would probably be pretty advanced, depending on what the images are. Look up https://procesing.org/reference to see an overview of all the methods there are, you could probably find something there. If it is just a star moving across the screen, then the following methods are probably all you need:
background(), stroke(), strokeWeight(), fill(), translate(), rotate(), scale(), beginShape(), vertex(), endShape()
I hoped this helped you, and feel free to send over the images you want to display.
Simon
