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