Блог

Я пытаюсь исказить сетку изображений, которые отображаются случайным образом при щелчке мыши.

У меня есть сетка и случайный щелчок при нажатии.

Я добился желаемого искажения, когда у меня есть только одно изображение.

Теперь мне нужно объединить оба кода вместе, но я не могу понять, как это сделать, когда PImage представляет собой массив.

Код сетки:

 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);
  }
}
 

Волновой код:

 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);
  }
}
 

Если вы хотите применить искажение ко всему холсту, вы можете просто использовать copy() его без параметра изображения. Это приводит к тому, что он просто копирует то, что в данный момент находится на холсте.

Вы можете использовать for цикл, очень похожий на тот, который есть в вашем волновом коде, просто опустите myImage параметр и i отпустите значение от 0 до width вместо myImage.width . Затем вы помещаете его в конце своего draw блока в grid коде:

 //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...);
  }
}