# 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:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![anarts\_3](https://avatars.discourse-cdn.com/v4/letter/a/e8c25b/32.png) [@anarts\_3](https://discourse.processing.org/u/anarts_3)\
**Post date:** [January 19, 2021, 3:48pm UTC](https://discourse.processing.org/t/effect-not-applying-on-a-image-in-array/27200/1 "2021-01-19T15:48:44Z")

</div>

Hello everyone! I have this code that has a dot effect on the images and has code to change said image into the next one when the mouse is pressed.

```auto
int numFrames = 18; // The number of frames in the animation
int frame = 0;
PImage[] images = new PImage[numFrames];

void setup() {
  size(900, 900, P3D);
  
  images[0] = loadImage("2.jpg");
  images[1] = loadImage("3.jpg");
  images[2] = loadImage("4.jpg"); 
  images[3] = loadImage("5.jpg");
  images[4] = loadImage("6.jpg"); 
  images[5] = loadImage("7.jpg");
  images[6] = loadImage("8.jpg"); 
  images[7] = loadImage("9.jpg");
  images[8] = loadImage("10.jpg"); 
  images[9] = loadImage("11.jpg");
  images[10] = loadImage("12.jpg"); 
  images[11] = loadImage("13.jpg");
  images[12] = loadImage("14.jpg");
  images[13] = loadImage("15.jpg");
  images[14] = loadImage("16.jpg");
  images[15] = loadImage("17.jpg");
  images[16] = loadImage("18.jpg");
  images[17] = loadImage("19.jpg");
 
}

void draw() {
background(#f1f1f1);
fill(0);
noStroke();
  
  frame = (frame) % numFrames; // Use % to cycle through frames
  image(images[frame], 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[frame]).get(int(x*tileSize), int(y*tileSize));
   float b = map(brightness(c), 0,255,1,0);
   
   push();
   
   translate(x*tileSize, y*tileSize);
   ellipse(0,0, tileSize, tileSize*b);
   pop();
   }
   }
   images[frame].resize(900, 900);
}

void mousePressed() {
  changeImage();
}

void changeImage() {
  if (frame<18)
  { frame++;
  }
  else frame = 0;
}

```

Problem is, the dot effect is not really applying to said image, but is working on top of the image. Like this:

 ![11](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b6abcf61b3eda73f447d5e5a7e17fe261c0121e3.jpeg)  
This effect stopped working after I put the code to skip images… I’ve tried using push() and pop() but it didn’t work.  
Can anyone help me out?  
Thanks in advance!!

---

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

---

<div class="post-metadata">

**Author:** ![anarts\_3](https://avatars.discourse-cdn.com/v4/letter/a/e8c25b/32.png) [@anarts\_3](https://discourse.processing.org/u/anarts_3)\
**Post date:** [January 25, 2021, 9:56am UTC](https://discourse.processing.org/t/effect-not-applying-on-a-image-in-array/27200/3 "2021-01-25T09:56:33Z")

</div>

Thank you!! That helped a lot!  
The built in sizes helped with the image and I decided not to use P3D as well, thank you again 😁