如何扭曲图像数组 - 处理

问题描述

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

我有网格和点击时的随机数。

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

现在我必须将两个代码合并在一起，但是当 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,500,10);
  for (int i = 0; i < myImage.width; ++i) {
    copy(myImage,i,1,height,(int) (sin((millis()+i*speed2)*speed1)*distortion),height);
  }
}

解决方法

如果您想将失真应用到整个画布，您可以只使用 copy() 而不使用 image 参数。这会导致它只是从画布上的当前内容进行复制。

您可以使用与 wave 代码中非常相似的 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,500,10);
  for (int i = 0; i < width; ++i) {
    copy(i,1,height,//the rest...);
  }
}