Effect not applying on a image in array

Processing Coding Questions
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