I'm looking for a solution for a loop with a array of images - processing.js

Question

so what i'm trying to do is to change the images that's stored in a array that contains 16 imgs, it's basically a animation for when you play a game (press forward character moves[moving imgs], release button character stops[stoped img]). The thing is that after the array reaches it's length max and the key is still being pressed it needs to reset the array to 15 (so this loop will give the illusion of the constant movement), but i think i'm not finding the right synthax or something.
Thanks in advance.
PImage p1;
PImage[] zeroArray = new PImage [16];
void setup() {
size(600,600);
for(int i = 0; i < zeroArray.length; i++){
zeroArray[i] = loadImage (i + ".png");
}
}
void draw() {
background(255);
imageMode(CENTER);
if(keyPressed) {
i++;
} else if (i > zeroArray.length) {
zeroArray[] = zeroArray[15]; // <--this ain't right, how should i declare this??
}
image(zeroArray[i], 300, 300, 800, 800);
}

Answer 1

I think you're mixing a few ideas into one if statement. Let's take a look at this section of your code:
if(keyPressed){
i++;
}
else if (i > zeroArray.length){
zeroArray[] = zeroArray[15];
}
Run through this line-by-line and really think about what it's doing. If a key is pressed, it increments the i variable. If a key is not pressed, then it checks whether i is greater than the length of the zeroArray array variable. If it is, it attempts to reset the array, which is not valid syntax.
Take a step back and think about what you're trying to do. Forget about code for a second. Write down exactly what you're trying to do, in English. My guess is you're trying to do something like this:
Change the image being drawn whenever the key is pressed.
If we reach the end of the images, then start over at the first image.
When you have something like that written out, that's an algorithm that you can start thinking about implementing with code. Break your problem down into smaller steps and take those steps on one at a time.
For example, step 1 is to change the image whenver the key is pressed. You basically have that already:
if(keyPressed){
i++;
}
Then, step 1 is to reset the i variable whenever it reaches the end of the array. You might do that using an if statement like this:
if(i >= zeroArray.length){
i = 0;
}
Putting it all together, it would look like this:
if(keyPressed){
i++;
if(i >= zeroArray.length){
i = 0;
}
}
Now this code checks if a key is being pressed, and if so it increments the i variable. It then checks whether the i variable has gone past the end of the array, and if so it reset it back to the beginning.
If that's not exactly what you're looking for, then the process of solving your problem is still the same: you need to write down, in English, exactly what you're trying to do. You need to do that before you start hammering away at the code.

Answer 2

Are you sure you want to reset the array to 15? That's the last element. However, in general, the solution would be to change the line:
zeroArray[] = zeroArray[15];} // <--this ain't right, how should i declare this??
to
i = 15; //Just change the index pointer to 15 (or whichever frame you want to reset to)

Answer 3

Thank you all for the answers, they really gave me some light.
To Kevin Workman.
Writing down the path that i intended to take really helped out, your thinking was almost on point. Using your method i came up with this
1)Change character sprites if key is being pressed
2) Reset movement to a certain point in case it exceeded the animation sprites, and the key is still being pressed
3)Set to fist sprite if the key is released or not being pressed at all
To Sahil Jain
You were right about changing the index to [15], it didn't work so well
Here is the revised code:
PImage p1;
PImage[] zeroArray = new PImage [16];
void setup(){
size(600,600);
for(int i = 0; i < zeroArray.length; i++){
zeroArray[i] = loadImage (i + ".png");
}
}
void draw(){
background(255);
imageMode(CENTER);
if (keyCode == RIGHT){
if(keyPressed){
i++;
} else {
i = 0;
}
if (i >= zeroArray.length){
i = 4;}
image(zeroArray[i], 300, 300, 800, 800);
}
}

Answer 4

Have you tried switching your else if to your main argument in the last If...Then statement? Also, don't forget to reset your variable i to 0 so it resets too and doesn't continue to always try to reset and end up in an infinite loop of sorts :)
As it is in your code in the question, it does the increment first and will never follow through to read into the second choice (the one you want it to do).