ArrayIndexOutOfBoundsException - Scoreboard with images

Question

I am trying to make a scoreboard with images in processing, with images from 0 to 9, but any number greater than 9 does not make changes It should be something like this: 10, 11, 12, ..., 99 but it only changes the number on the left, try using a counter, converting it to a String and then to a Char[] to get the first digit of two numbers; for example: 25, it would have to be 2 when passing that number to the array, it sends "ArrayIndexOutOfBoundsException"

char[] digits;

PImage [] prueba = new PImage[10];

int contadorPrueba2 = 0;
int aa = 0;

void setup () {
  size (781, 470);
  tablero = loadImage("tablero.png");
  flechaRight = loadImage("flechaRight.png");
  flechaLeft = loadImage("flechaLeft.png");


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

void draw () {
  //flechas
  image(flechaRight, x, y);
  image(flechaLeft, x2, y);

  image(prueba[0], x3, 50);

  //cambiar de numeros
  image(prueba[contadorPrueba2], x4, 50);
  image(prueba[aa], x3, 50);
}

boolean isMouseOver (int x, int y, int w, int h) {
  if (mouseX>x && mouseX <x+w && mouseY>y && mouseY <y+h) {
    return true;
  } 
  return false;
}

void mousePressed () {
  if (isMouseOver (x, y, w, h) == true) {
    contadorPrueba2++;
    //image(uno, x3, 50);
  } else if (isMouseOver (x2, y, w, h) == true) {
    contadorPrueba2--;
  }
  
  if (contadorPrueba2 >= prueba.length)
    contadorPrueba2 = 0;
  
  count = String.valueOf(contadorPrueba2);
  digits = count.toCharArray();
  
  for (int i = 0; i < digits.length; i++) {
    if (contadorPrueba2 >= 10) {
      //aa = digits[0];
      println(digits[i]);
      aa = digits[i];
      //aa = digits[i];
      //print("pp" + aa);
      
      if (i == 0) {
        print("ksk" + digits[i]);
      }
    }
  }
}

Answer 1

Chars aren't exactly the best way to keep track of a score, which can make for some headache at times. I strongly suggest that you keep track of the score with an integer number unless you really have no choice on the matter.

Now, to translate an integer into a bunch of index numbers associated with images of said numbers, things can also become complicated, but I got your back! In fact, you can use MATH and solve this quite easily. Are you familiar with the modulo operator? If you're not, read about it because it's a programmer's best friend. Long story short, it's a division that returns only the leftover numbers after the division. As an example, if I write:

10 / 3 == 3.333333 // as a division this makes sense
10 % 3 == 1        // modulo only keeps what's left when the division stops being an integer
because: 10 == [3+3+3] + 1

Ok, you probably already knew this, but if you didn't, now you do. Here's how I use this knowledge to simplify your issue with a commented example:

PImage[] digits = new PImage[10];
int score = 4780; // you can change this number for whatever integer number

void setup () {
  size(200, 200);
  
  for (int i = 0; i < digits.length; i++) {
    digits[i] = loadImage(i + ".png"); // these 10 images are 10x10 pixels for easier handling
  }
}

void draw () {
  int i=1;
  int j = 160; // arbitrary number: this is where i start drawing the score (the rightest number)
  
  // oooh! This is a good opportunity to use a do...while(); loop! I don't have that many of those.
  // This is because we have to show at least ONE digit even if the score is zero, but I coded this so you can have a score higher than 99 without issue
  do {
    i*=10; // using multiples of 10 with the modulo operator
           // as we use base 10 in real life, multiples of 10 help isolate digits of interests
    
    image(digits[(score%i)/(i/10)], j, 90); // j is the x coordinate of the current digit, 90 is an arbitrary y coordinate
    // 'digits[(score%i)/(i/10)]' deserves an explanation:
    //  'score%i' removes every unit besides the current digit of interests, as an example if we're looking for the hundreds digit of 3456 it'll be 400
    //  '/(i/10)' removes the unwanted zero (in the 3456 example it would leave only the number 4 instead of 400)
    
    j-=10; // updating j for the next digit
  } while(i<score);
}

I know I didn't tell you why you get ArrayIndexOutOfBoundsException and it's kinda on purpose: this is a very common error and although I have no trouble guessing why you get it, it's just more efficient to fix by improving the method than by meddling with the code. There are many articles on SO about why this error happens and I encourage you to read at least one, as it'll be something that you'll see again in the future. Yet, for now, you can just avoid it by switching to this method.

I hope this helps. Have fun!