Effect not applying on a image in array

Processing Coding Questions
1

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.

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
11902Ă—905 236 KB

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

2

Hi,

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

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 :

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

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 :

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 :

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) :

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

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

    ellipse(x * tileSize, y * tileSize, tileSize, tileSize * b);

  • 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 :

    images[frame].resize(900, 900);

    You want to resize the image to the width and height of the window. You should use the built-in width and height variables (in case you want to change the window size) :

    images[frame].resize(width, height);

    But more importantly if you resize your image, then the dot effect is not going to be aligned to the image itself do I wouldn’t resize them. Your images need to be equal or larger to the window size.


This is how I would do it (I didn't tested this) : 
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!

2 Likes
3

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 :grin:

1 Like