Processing交互：noisy交互方块

一：设计说明

这个程序创建了一个粒子场，并使用 Perlin 噪声生成粒子轨迹。粒子的运动受鼠标移动的影响，点击鼠标会随机化粒子运动的参数。
整体设计思路：
设置画布大小为 1920x1080，颜色模式为 HSB。
在画布上绘制黑色背景，并通过参数来控制背景的渐变程度。
初始化粒子的数量、背景渐变程度、最大轨迹长度和粒子描边粗细等参数，并随机化这些参数的取值范围。
创建一个粒子数组，并为每个粒子分配一个唯一的 ID。
当鼠标点击时，重新随机化粒子的参数。
在绘图循环中，将粒子的位置居中，并遍历每个粒子进行更新。
粒子的更新过程包括根据噪声值计算运动方向、更新位置、绘制轨迹和判断是否重新初始化粒子的位置和外观。
Particle 类的设计：
Particle 类存储了粒子的位置、运动状态和外观信息。
每个粒子有一个唯一的 ID，用于计算噪声值。
粒子的初始位置随机分配在整个场景范围内。
粒子的运动方向由噪声值、鼠标位置和速度共同决定。
粒子的位置根据运动方向和速度进行更新，同时绘制轨迹。
粒子的轨迹长度逐渐增加，当达到最大轨迹长度时，重新初始化粒子的位置和外观。
设计目标：
创建一个具有动态效果的粒子场景，通过粒子轨迹的绘制产生视觉上的运动感。
利用 Perlin 噪声实现平滑且随机的运动路径，使粒子的运动更加自然。
通过鼠标交互实现参数的随机化，使粒子的运动参数具有随机性和变化性。
控制背景的渐变程度，使粒子轨迹逐渐消失，产生尾迹效果。

相关代码：

float particleCount = 1000; // 粒子数量
float fadeAmount; // 背景渐隐程度
float maxTrailLength = 100; // 最大粒子轨迹长度
float strokeWeightValue; // 粒子描边粗细

Particle[] particles = new Particle[1000]; // 粒子数组
int fieldWidth = 1920; // 场景宽度
int fieldHeight = 1080; // 场景高度

void setup() {
  size(1920, 1080); // 设置画布尺寸
  colorMode(HSB, 100); // 设置颜色模式为HSB
  background(0); // 设置背景为黑色
  randomize(); // 随机化粒子参数
}

void randomize() {
  particleCount = random(50, 500); // 随机化粒子数量
  fadeAmount = random(0.5, 20); // 随机化背景渐隐程度
  maxTrailLength = random(30, 200); // 随机化最大粒子轨迹长度
  strokeWeightValue = random(0.02, 0.3); // 随机化粒子描边粗细

  for (int i = 0; i < particleCount; i++) {
    particles[i] = new Particle(i / 5000.0); // 创建具有唯一ID的新粒子
  }
}

void mouseClicked() {
  randomize(); // 鼠标点击时随机化粒子参数
}

void draw() {
  noStroke();
  fill(0, fadeAmount);
  rect(0, 0, width, height); // 渐隐背景

  translate((width - fieldWidth) / 2, (height - fieldHeight) / 2); // 居中粒子
  for (int i = 0; i < particleCount; i++) {
    particles[i].update(); // 更新粒子
  }
}

/**
 * 这个类表示Perlin噪声场中的一个粒子。
 * 它存储粒子的位置、运动和外观信息。
 * update() 方法根据场中的噪声值更新粒子的位置，并在前一位置和新位置之间绘制一个矩形。
 * init() 方法在粒子首次创建或达到轨迹最大长度时初始化其位置和外观。
 */
class Particle {
  float id; // 粒子的唯一标识符
  float x, y; // 粒子当前位置
  float prevX, prevY; // 粒子上一个位置
  float speed; // 粒子的速度
  float direction; // 粒子的运动方向
  float colorValue; // 粒子的颜色值
  float trailLength; // 粒子的轨迹长度
  float z, prevZ; // 粒子的深度信息

  Particle(float _id) {
    id = _id;
    init(); // 初始化粒子的位置和外观
  }

  void init() {
    x = prevX = random(0, fieldWidth); // 初始化粒子的 x 坐标和上一个 x 坐标
    y = prevY = random(0, fieldHeight); // 初始化粒子的 y 坐标和上一个 y 坐标
    z = prevZ = 0; // 初始化粒子的深度信息和上一个深度信息
    speed = random(2, 7); // 随机设置粒子的速度
    colorValue = map(x, 0, fieldWidth, 0, 255); // 根据 x 坐标映射粒子的颜色值
    trailLength = random(1, maxTrailLength - 1); // 随机设置粒子的轨迹长度
  }

processing交互作品：noisy噪声方块