# Array Index Out of Bounds Exception when Inserting an image

**URL:** <https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881>\
**Category:** Beginners\
**Created:** [March 21, 2022, 7:15pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881 "2022-03-21T19:15:39Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![gameworn](https://avatars.discourse-cdn.com/v4/letter/g/b38774/32.png) [@gameworn](https://discourse.processing.org/u/gameworn)\
**Post date:** [March 21, 2022, 7:15pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/1 "2022-03-21T19:15:39Z")

</div>

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();

}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2022, 8:01pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/2 "2022-03-21T20:01:50Z")

</div>

> [@gameworn](#):
>
> 0; x \< width; x++){  
> for (int y =0; y \< height; y++){

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

Otherwise you refer to the window size

NOW you can say size (800,800);

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2022, 8:02pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/3 "2022-03-21T20:02:32Z")

</div>

> [@gameworn](#):
>
> int loc1 = xx+yy\*width;

same here please

Chrisir

---

<div class="post-metadata">

**Author:** ![gameworn](https://avatars.discourse-cdn.com/v4/letter/g/b38774/32.png) [@gameworn](https://discourse.processing.org/u/gameworn)\
**Post date:** [March 21, 2022, 8:09pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/4 "2022-03-21T20:09:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2022, 8:12pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/5 "2022-03-21T20:12:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2022, 8:12pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/6 "2022-03-21T20:12:41Z")

</div>

> [@gameworn](#):
>
> int loc1 =xx+yy\*width

say

int loc1 =xx+yy\*Indicator1.width

---

<div class="post-metadata">

**Author:** ![gameworn](https://avatars.discourse-cdn.com/v4/letter/g/b38774/32.png) [@gameworn](https://discourse.processing.org/u/gameworn)\
**Post date:** [March 21, 2022, 8:17pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/7 "2022-03-21T20:17:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2022, 9:06pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/8 "2022-03-21T21:06:32Z")

</div>

> [@gameworn](#):
>
> loadPixels();

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**

```auto
   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

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

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2022, 9:19pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/9 "2022-03-21T21:19:38Z")

</div>

> [@gameworn](#):
>
> Indicator1.pixels[loc] = color(g,g,b);

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)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2022, 10:40pm UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/10 "2022-03-21T22:40:59Z")

</div>

> [@gameworn](#):
>
> pixels[loc1] = color(rr,gg,bb);

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

**Full Sketch**

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![gameworn](https://avatars.discourse-cdn.com/v4/letter/g/b38774/32.png) [@gameworn](https://discourse.processing.org/u/gameworn)\
**Post date:** [March 23, 2022, 3:45am UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/11 "2022-03-23T03:45:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gameworn](https://avatars.discourse-cdn.com/v4/letter/g/b38774/32.png) [@gameworn](https://discourse.processing.org/u/gameworn)\
**Post date:** [March 23, 2022, 4:59am UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/12 "2022-03-23T04:59:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 23, 2022, 7:58am UTC](https://discourse.processing.org/t/array-index-out-of-bounds-exception-when-inserting-an-image/35881/13 "2022-03-23T07:58:59Z")

</div>

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)