Array Index Out of Bounds Exception when Inserting an image

Hi to all
So I messed up the first step being, trying to get my code in a readable format. I saw the link to Processing.js Template, but had no idea what to do with it once my code was in there. Then there was the opportunity to place it here in the proper context, but again, I had no idea where to put, so please go easy on me as I will just copy it to this post.
My objective is to create 2 or 3 indicating lights. I want to manipulate the color(r,g,b) component to change the pixel color of the light to be green when a switch is on and red when the switch is off. For ease of understanding my code, I have left out all the switching lines of code and to change the pixel color, manually change the color(r,g,b) Green Light to color(g,r,b) a Red Light.
The light.jpg images are 127 x 127 pixels. So, here is the rub so to speak. When I enter any value except for size (127,127) in the size() function, I get the Array Index Out of Bounds Exception error. I looked it up on the WWW, but I guess I haven’t learned the language that coders speak when they describe something. It’s almost like they can take 12 random words in the dictionary and make a sentence out of them that only coders can understand. Now I have seen many examples of coders putting large number like size(800, 600) in their program, with a smaller image, and it works fine. When I enter size(127,127), I can manipulate the color() function to change the pixel colors of the Light’s lens. I would like to add a second Light and do the same thing with it. If I change the size() to size (300, 100), both lights show up in Processing’s window, but I get the same Array Out of Bounds Index, and I cannot manipulate the pixel colors.
I have changed the code around over and over and left it in the last state of change, so if you ask why I did why I did, it was what is left after I threw all the different combinations of code that my limited knowledge would allow. To sum it all up, why do I get that silly error code every time I enter any value in size() larger than the image size when I have seen others do it? How do I add the second light so there is no error and I can manipulate the pixels to change the color of the Lights?. I have included my code ,41 lines I think, which I copied bits and pieces of from others. I only wish it was an original. I’m also sorry it looks like blech. I would appreciate any help . Thank You
The way it should work is. Light 1 is at point 0,0 while light two sits at point 150,0. So they sit side by each. If I manually change the color() function, each light should show any color I choose based the RGB manipulation of the pixels

PImage Indicator1, Indicator2;

void setup(){
size(300,127 );

Indicator1 = loadImage(“GreenLight2.jpg”);
image(Indicator1, 0,0);
loadPixels();
Indicator1.loadPixels();

Indicator2 = loadImage(“GreenLight3.jpg”);
image (Indicator2, 150,0);
loadPixels();
Indicator2.loadPixels();
}
void draw() {

for (int x= 0; x < width; x++){
for (int y =0; y < height; y++){
int loc = x+y*width;
float r = red(Indicator1.pixels[loc]);
float g = green(Indicator1.pixels[loc]);
float b = blue(Indicator1.pixels[loc]);
Indicator1.pixels[loc] = color(g,g,b);
}
}
updatePixels();

for (int xx= 0; xx < width; xx++){
for (int yy =0; yy < height; yy++){
int loc1 = xx+yy*width;
float rr = red(Indicator2.pixels[loc1]);
float gg = green(Indicator2.pixels[loc1]);
float bb = blue(Indicator2.pixels[loc1]);
pixels[loc1] = color(rr,gg,bb);

}
}
updatePixels();

}

You must’ve Indicator1.width
and Indicator1.height !

Otherwise you refer to the window size

NOW you can say size (800,800);

same here please

Chrisir

I’m not sure what you are telling me to do here. Do I remove the int loc1 =xx+yy*width piece of coding and everything around it?. Also not sure what you mean about Indicator1.width and Indicator1.height. Do I add that to the code somewhere?

When you use width alone you refer to the window
size. Bad.

When you put the image name before it as I did you refer to the actual image size. Good.

The error occurred because you read over the end of the image array because the window size is bigger than the image size.

say

int loc1 =xx+yy*Indicator1.width

Thank You
That seemed to get rid of the error code. I now have both lights on an 800x 800 size window. I just have to move things around a bit for Light 1 to change its color.
Thank You for helping me out.

1 Like

This is not necessary (similarly to what we discussed, it refers to the window and not to the image)

This occurs Twice.

instead of updatePixels() alone, you want to put the name of the image before: Indicator1. and Indicator2.

  • Indicator1.loadPixels(); and Indicator1.updatePixels(); make a pair, the first loads the array, the 2nd stores the array back in the image.

Code

   Indicator1.loadPixels();
   for (int x= 0; x < Indicator1.width; x++){
      for (int y =0; y < Indicator1.height; y++){
         int loc = x+y*Indicator1.width;

         float r = red(Indicator1.pixels[loc]);
         float g = green(Indicator1.pixels[loc]);
         float b = blue(Indicator1.pixels[loc]);

         Indicator1.pixels[loc] = color(g,g,b);
      }
   }
   Indicator1.updatePixels();

The pixel manipulation can also go into setup and in draw() only say

image(Indicator1, 0,0);
image(Indicator2, 150,0);

Here you have g,g,b

Do you mean r,g,b maybe? But then you won’t have any change at all.

Because r,g,b won’t change the color (the code for the 2nd image doesn’t change the color either by the way)

you want Indicator2.pixels[loc1] = color(rr,gg,bb);

Full Sketch

PImage Indicator1, Indicator2;

void setup() {
  size(800, 827 );

  Indicator1 = loadImage("GreenLight2.jpg");
  Indicator2 = loadImage("GreenLight3.jpg");

  //----------------------------------------------

  Indicator1.loadPixels();
  for (int x= 0; x < Indicator1.width; x++) {
    for (int y =0; y < Indicator1.height; y++) {
      int loc = x+y*Indicator1.width;
      float r = red(Indicator1.pixels[loc]);
      float g = green(Indicator1.pixels[loc]);
      float b = blue(Indicator1.pixels[loc]);
      // println(r, g, b);

      // check old color 
      if (r<5&&g<105&&b>150) 
        Indicator1.pixels[loc] = color(0, 255, 0); // GREEN 
      else
        Indicator1.pixels[loc] = color(r, g, b); // normal / old col
    }
  }
  Indicator1.updatePixels();

  //----------------------------------------------

  Indicator2.loadPixels();
  for (int xx= 0; xx < Indicator2.width; xx++) {
    for (int yy =0; yy < Indicator2.height; yy++) {
      int loc1 = xx+yy*Indicator2.width;
      float rr = red(Indicator2.pixels[loc1]);
      float gg = green(Indicator2.pixels[loc1]);
      float bb = blue(Indicator2.pixels[loc1]);
      // check circle 
      if (dist(66, 55, xx, yy) < 30)
        Indicator2.pixels[loc1] = color(rr, rr, rr); // gray 
      else
        Indicator2.pixels[loc1] = color(rr, gg, bb); /// normal / old col
    }
  }
  Indicator2.updatePixels();
}

void draw() {
  image(Indicator1, 0, 0);
  image(Indicator2, 150, 0);
}

// --------------------------------------------------------------------

void mousePressed() {
  color c1= get(mouseX, mouseY); 
  float rr = red(c1);
  float gg = green(c1);
  float bb = blue(c1);
  println(rr, gg, bb);
}

I had at one time, labeled everything just like you showed, but had the order wrong.
Thank You for your help. I can finally move on to the next phase of my project and have switches change the color of the indicators.
Thanks again

1 Like

Just to clear things up a bit. When I changed the size() to the image actual size of 127 x 127 pixels size(127,127); and did not include the image name in the width and height formula, ie
for ( int x = 0; y < width; ++){ for (int y = 0; y < length; ++){
I would get only one image (the green indicator ) showing up in the small window of 127 x 127 pixels. Changing the color(r,g,b) to color(g,g,b), turned the green indicator dark purple in color. That is where the color(g,g,b) came from.
However; this is not what I needed. I required any number of indicators an any screen size and able to change them to any colors. With all the help I received, I am now able to do just that.
Thank You so much

1 Like

In my opinion you can just make 3 different images of traffic lights and use them

In one example I used dist() command to only change a certain area of the image (the actual red light)