How to distort an array of images - Processing

Question

I am trying to distort a grid of images that are displayed randomly when the mouse is clicked.

I have the grid and the random when click.

I have accomplished the distorsion I want when I have only one image.

Now I have to merge both codes together, but I can't figure out how to do it when the PImage is an array.

Grid code:

PImage img[];
int nPics;

int w, h;

void loadImages(){
  for (int i = 0; i < nPics; i++) {
    img[i] = loadImage("img_"+ nf(int(random(0, 687)), 3) + ".jpg");
    imageMode(CORNERS);
  }
}

void setup() {
  size(1500, 500);
  nPics=27;
  img = new PImage[nPics];

  w=width/9;  
  h=height/3; 

  loadImages();
}

void mousePressed(){
  loadImages();
}

void draw() {
  background(0);
  for (int i=0; i<nPics; i=i+3) {  
    int col = i/3;
    for (int row=0; row<3; row++)
      image(img[i+row], col*w, row*h, (col+1)*w, (row+1)*h);
  }
}

Wave code:

PImage myImage;
float speed1 = .01;
float speed2 = 5;

void setup()
{
  size(1500,500);
  myImage = loadImage("img_001.jpg");
}

void draw()
{
  float distortion = map(mouseY, 0,500, 0, 10);
  for (int i = 0; i < myImage.width; ++i) {
    copy(myImage, i,0,1,height, i, (int) (sin((millis()+i*speed2)*speed1)*distortion),1,height);
  }
}

Answer 1

If you want to apply the distortion to the entire canvas, you can just use copy() without the image parameter. This causes it to just copy from what is currently on the canvas.

You can use a very similar for loop to the one that's in your wave code, just omit the myImage parameter and let i go from 0 to width instead of myImage.width. Then you put it at the end of your draw block in the grid code:

//global variables, include speed1 and speed2

void loadImages() {
  //as in grid code
}

void setup() {
  //as in grid code...
}

void draw() {
  //everything from grid code...

  float distortion = map(mouseY, 0,500, 0, 10);
  for (int i = 0; i < width; ++i) {
    copy(i,0,1,height, //the rest...);
  }
}