如何扭曲图像数组 - 处理

Question

我试图扭曲单击鼠标时随机显示的图像网格。

我有网格和点击时的随机

当我只有一张图像时，我已经完成了我想要的失真。

现在我必须将两个代码合并在一起，但是当 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);
  }
}

Answer 1

如果你想对整个 canvas 应用失真，你可以只使用 copy() 而不使用图像参数。这会导致它仅从 canvas.

上当前的内容进行复制

您可以使用与波形代码中的循环非常相似的 for 循环，只需省略 myImage 参数并让 i 从 0 变为 width 而不是 myImage.width。然后将其放在 grid 代码中 draw 块的末尾：

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

如何扭曲图像数组 - 处理

How to distort an array of images - Processing

processing

image-processing