All right, that's what I thought. Your old setup() method looks fine, so keep that and the other variables you define above it. So here are some tips for the rest:
1. If you have numbers you re-use frequently, it's better to define variables for them and then use the variables in your code. It makes it easier to change them later if you need to, and it also makes it easier to understand your code if you have variable names in it instead of "magic numbers":
Code:
int imW = 72; // Image width
int imH = 38.4; // Image height
int numImagesAcross = 10;
int numImagesDown = 10;
2. Processing has a built-in variable called frameCount that's advanced by 1 each frame; I recommend using that instead of your own frame variable. (I'll show you how to handle "wrap-around" in a minute.)
3. You want to iterate over a grid of images, so you want your draw() method to have two nested for loops, like this:
Code:void draw() {
for (int i = 0; i < numImagesDown; i ++) {
for (int j = 0; j < numImagesAcross; j ++) {
// image display code goes in here
}
}
}
Note that i and j each start at 0 and go up to 9, instead of going from 1 to 10. This is considered "normal" for most programming languages, and it usually makes things easier to do it this way.
4. You want each image to be 10 frames ahead of the one before it. The easiest way to do this is to use another variable like this inside the nested for loops:
Code:void draw() {
for (int i = 0; i < numImagesDown; i ++) {
for (int j = 0; j < numImagesAcross; j ++) {
int a = i*numImagesAcross + j;
int imageNo = frameCount + a*10;
imageNo = imageNo % numFrames;
image(images[imageNo], j*imW, i*imH, imW, imH);
}
}
}
The variable
a will count up from 0 to 99 as the loops go through all the tiles. The next line sets which image to use for this tile on this frame.
The line after that takes care of "re-setting" the animation if necessary; the % operator effectively causes imageNo to "wrap around" if it's equal to or higher than numFrames. For example, if
imageNo 300 and
numFrames is 200, then
imageNo % numFrames will be 100.
(The images[] array will start at 0 and go up to 199, and this line of code will make sure imageNo is always in the same range.)
And finally, the last line inside the loop actually draws the image: Since
j is counting across, we multiply that times the image width to get the x position. Similary we use
i to find the y position.
I can't promise this will work, since I haven't tested it and I might have a typo or some other bonehead error. But this should hopefully give you a general idea. Please ask if you still have questions!