Processing 图片点击波动动画：代码示例及详解

以下是一个使用 Processing 实现的导入图片并在点击时出现波动动画的示例代码：

import processing.core.*;

PImage img; // 定义图片变量
float[] offsetsX, offsetsY; // 定义波动偏移量数组
int numWaves = 5; // 定义波动数量
float waveSpeed = 0.1; // 定义波动速度
float waveHeight = 50; // 定义波动高度
boolean isClicked = false; // 是否被点击的标记

void setup() {
  size(800, 600); // 设定画布大小
  img = loadImage('image.jpg'); // 导入图片
  offsetsX = new float[numWaves]; // 初始化波动偏移量数组
  offsetsY = new float[numWaves];
}

void draw() {
  background(0); // 背景设为黑色
  if (isClicked) { // 如果被点击
    for (int i = 0; i < numWaves; i++) {
      float offsetX = offsetsX[i] + waveSpeed * (i + 1); // 计算波动偏移量
      float offsetY = offsetsY[i] + waveSpeed * (i + 1);
      image(img, offsetX, offsetY + i * waveHeight, width, waveHeight); // 绘制波动图片
      offsetsX[i] = offsetX % img.width; // 更新波动偏移量
      offsetsY[i] = offsetY % img.height;
    }
  } else {
    image(img, 0, 0, width, height); // 绘制原始图片
  }
}

void mousePressed() {
  isClicked = true; // 点击后标记为被点击
}

解释：

首先，在setup()函数中，我们设定了画布大小，并导入了一张图片。同时，我们还初始化了两个长度为numWaves的浮点数数组offsetsX和offsetsY，用于存储每个波动的偏移量。

在draw()函数中，我们首先将背景设为黑色。然后，根据是否被点击的标记，我们分别绘制原始图片或者波动图片。对于每个波动，我们都计算了其偏移量，并在图片的y轴方向上叠加了i * waveHeight的高度，以便让多个波动错落有致。最后，我们更新了每个波动的偏移量。

最后，在mousePressed()函数中，我们将标记设为被点击，以便在下一次draw()函数调用时开始绘制波动图片。