# Effect not applying on a image in array

**URL:** <https://discourse.processing.org/t/effect-not-applying-on-a-image-in-array/27200>\
**Category:** Coding Questions\
**Created:** [January 19, 2021, 3:48pm UTC](https://discourse.processing.org/t/effect-not-applying-on-a-image-in-array/27200 "2021-01-19T15:48:44Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [January 20, 2021, 1:26pm UTC](https://discourse.processing.org/t/effect-not-applying-on-a-image-in-array/27200/2 "2021-01-20T13:26:53Z")

</div>

Hi,

First of all remember that you can auto format your code and correct indentations by pressing `Ctrl + T` in the Processing IDE 😉

Also the way you actually load images is not the ideal way. In order to use the full power of programming, you can make this dynamic.

Let’s say you define the number of images and just call a function and dam! it load all your images without having to write `images[?] = loadImage("?.jpg"); ` for every image. Wouldn’t that be cool?

Just do a for loop :

```auto
/**
 * Return an array of the loaded images
 */
PImage[] loadImages(int nImages) {
  PImage[] images = new PImage[nImages];

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

  return images;
}

// For i = 0, loads "0.jpg"
// For i = 1, loads "1.jpg"
// ...

```

So then you can do :

```auto
PImage[] images;

images = loadImages(18);

```

You can even make a generic function where you can specify the filename extension and the starting and end index of the images :

```auto
PImage[] loadImages(int startIndex, int endIndex, String extension) {
  PImage[] images = new PImage[endIndex - startIndex + 1];

  for (int i = startIndex; i <= endIndex; i++) {
    images[i - startIndex] = loadImage(i + "." + extension);
  }

  return images;
}

```

And use it :

```auto
PImage[] images = loadImages(2, 19, "jpg");

```

Anyway this is pretty fancy stuff…

Few things :

- you are using `P3D` but if you don’t do 3D stuff don’t use it.

- In the `changeImage()` body, why do you check if the frame is `< 18` ? Just increase the frame number each time you click (with a modulo so it loops and you don’t have to do this in the draw function) :

- To draw your ellipses, you don’t necessarily need to translate because you can just draw the ellipse at that location :

- You say that it’s drawing on top of the image but it’s normal because you drew the image before. So what’s the problem here?

- When you say :

  
This is how I would do it (I didn't tested this) :   

```auto
PImage[] images;
int currentImage = 0;

PImage[] loadImages(int startIndex, int endIndex, String extension) {
  PImage[] images = new PImage[endIndex - startIndex + 1];

  for (int i = startIndex; i <= endIndex; i++) {
    images[i - startIndex] = loadImage(i + "." + extension);
  }

  return images;
}

void setup() {
  size(900, 900);

  images = loadImages(2, 19, "jpg");
}

void draw() {
  background(#f1f1f1);

  image(images[currentImage], 0, 0);

  float tiles = mouseX;
  float tileSize = width / tiles;

  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {  
      color c = (images[currentImage]).get(int(x * tileSize), int(y * tileSize));
      float b = map(brightness(c), 0, 255, 1, 0);

      fill(0);
      noStroke();
      ellipse(x * tileSize, y * tileSize, tileSize, tileSize * b);
    }
  }
}

void mousePressed() {
  changeImage();
}

void changeImage() {
  currentImage = (currentImage + 1) % images.length;
}

```

Hope it helps!

---

_[View the full topic](https://discourse.processing.org/t/effect-not-applying-on-a-image-in-array/27200)._