Processing粒子系统-用烟雾画出来的世界名画

Processing粒子系统-烟雾画出来的世界名画

效果欣赏
参考示例
程序思想以及代码实现
作者有话说

效果欣赏

注：烟雾的的扩散方向随着鼠标位置的不同而不同，构成烟雾的基础图元可以是普通几何体，也可以是材质贴图。

鼠标位置出现的蓝色或者黄色的圆为录屏软件所添加，程序运行时并不会有显示。

参考示例

注：本程序的参考案例均来自《代码本色》一书的第四章

参考案例一：4-02

ArrayList<Particle> particles;void setup() {size(640, 360);particles = new ArrayList<Particle>();
}void draw() {background(255);particles.add(new Particle(new PVector(width/2, 50)));// Looping through backwards to deletefor (int i = particles.size()-1; i >= 0; i--) {Particle p = particles.get(i);p.run();if (p.isDead()) {particles.remove(i);}}
}

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com// Simple Particle Systemclass Particle {PVector position;PVector velocity;PVector acceleration;float lifespan;Particle(PVector l) {acceleration = new PVector(0, 0.05);velocity = new PVector(random(-1, 1), random(-2, 0));position = l.copy();lifespan = 255.0;}void run() {update();display();}// Method to update positionvoid update() {velocity.add(acceleration);position.add(velocity);lifespan -= 2.0;}// Method to displayvoid display() {stroke(0, lifespan);strokeWeight(2);fill(127, lifespan);ellipse(position.x, position.y, 12, 12);}// Is the particle still useful?boolean isDead() {if (lifespan < 0.0) {return true;} else {return false;}}
}

示例代码的运行效果如下：

示例代码的参考作用主要是熟悉绘制粒子系统的一个完整的流程(出生-更新-死亡)。在该示例中，每个粒子从出生起获得的向下加速度一定，但是初始速度不同，每一帧都在更新粒子的位置（update函数）直至粒子的生命值被消耗完，就移除粒子。

为了维持粒子系统的稳定，在移除粒子的同时不断往粒子系统里添加新的粒子，这就是一个简单粒子系统的思想。

参考示例二：4-08

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com// Smoke Particle System// A basic smoke effect using a particle system
// Each particle is rendered as an alpha masked image/* @pjs preload="processingjs/chapter04/_4_08_ParticleSystemSmoke/data/texture.png"; */ParticleSystem ps;void setup() {size(640,360);PImage img = loadImage("texture.png");ps = new ParticleSystem(0,new PVector(width/2,height-75),img);
}void draw() {background(0);// Calculate a "wind" force based on mouse horizontal positionfloat dx = map(mouseX,0,width,-0.2,0.2);PVector wind = new PVector(dx,0);ps.applyForce(wind);ps.run();for (int i = 0; i < 2; i++) {ps.addParticle();}// Draw an arrow representing the wind forcedrawVector(wind, new PVector(width/2,50,0),500);}// Renders a vector object 'v' as an arrow and a position 'loc'
void drawVector(PVector v, PVector pos, float scayl) {pushMatrix();float arrowsize = 4;// Translate to position to render vectortranslate(pos.x,pos.y);stroke(255);// Call vector heading function to get direction (note that pointing up is a heading of 0) and rotaterotate(v.heading2D());// Calculate length of vector & scale it to be bigger or smaller if necessaryfloat len = v.mag()*scayl;// Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)line(0,0,len,0);line(len,0,len-arrowsize,+arrowsize/2);line(len,0,len-arrowsize,-arrowsize/2);popMatrix();
}

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.comclass Particle {PVector pos;PVector vel;PVector acc;float lifespan;PImage img;Particle(PVector l,PImage img_) {acc = new PVector(0,0);float vx = randomGaussian()*0.3;float vy = randomGaussian()*0.3 - 1.0;vel = new PVector(vx,vy);pos = l.get();lifespan = 100.0;img = img_;}void run() {update();render();}// Method to apply a force vector to the Particle object// Note we are ignoring "mass" herevoid applyForce(PVector f) {acc.add(f);}  // Method to update positionvoid update() {vel.add(acc);pos.add(vel);lifespan -= 2.5;acc.mult(0); // clear Acceleration}// Method to displayvoid render() {imageMode(CENTER);tint(255,lifespan);image(img,pos.x,pos.y);// Drawing a circle instead// fill(255,lifespan);// noStroke();// ellipse(pos.x,pos.y,img.width,img.height);}// Is the particle still useful?boolean isDead() {if (lifespan <= 0.0) {return true;} else {return false;}}
}

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com// Smoke Particle System// A class to describe a group of Particles
// An ArrayList is used to manage the list of Particles class ParticleSystem {ArrayList<Particle> particles;    // An arraylist for all the particlesPVector origin;        // An origin point for where particles are birthedPImage img;ParticleSystem(int num, PVector v, PImage img_) {particles = new ArrayList<Particle>();              // Initialize the arraylistorigin = v.get();                        // Store the origin pointimg = img_;for (int i = 0; i < num; i++) {particles.add(new Particle(origin, img));    // Add "num" amount of particles to the arraylist}}void run() {for (int i = particles.size()-1; i >= 0; i--) {Particle p = particles.get(i);p.run();if (p.isDead()) {particles.remove(i);}}}// Method to add a force vector to all particles currently in the systemvoid applyForce(PVector dir) {// Enhanced loop!!!for (Particle p: particles) {p.applyForce(dir);}}  void addParticle() {particles.add(new Particle(origin, img));}}

示例的运行效果如下（鼠标位置的蓝色是录屏软件自动添加的，程序运行不带这个效果）：

该示例中将将多个粒子的管理封装成类，形成粒子系统类，在用这个类可以方便地对添加粒子、更改粒子受力以及销毁粒子，本例子里面粒子的受力除了重力外还有水平方向的力，具体的受力大小和方向由鼠标的位置来决定。

最后程序的运行结果是一个被被风吹动的烟雾。

程序思想以及代码实现

在看到以上两个示例后，我灵感一现：如果把每个烟雾粒子系统当成一个小小的图元，图元的颜色来自给出的名画，烟雾的方向随着鼠标变化，那么就可以得到一幅动态的名画。

换成编程上的思想就是：根据读入的“名画”长宽，每间隔固定像素，生成一个个粒子系统，每个粒子系统的颜色来自对应位置名画的像素颜色。读取鼠标所在的位置，更改粒子系统受力的方向

参考根据上面的示例，我们需要一个粒子类，需要以下这些属性，其中颜色属性是特有的。

  PVector pos;//粒子的位置PVector vel;//速度PVector acc;//加速度float lifespan;//生命PImage img;//图片color mycolor;//颜色

在初始化粒子的时候应该赋予粒子初始位置、速度、生命以及颜色（如果使用贴图的话还应该有图片）。

 Particle(PVector l,PImage img_,color c) {acc = new PVector(0,0);float vx = randomGaussian()*0.3;      //高斯噪声产生随机数float vy = randomGaussian()*0.3 - 1.0;vel = new PVector(vx,vy);pos = l.get();                       //位置lifespan = 50.0;                    //生命周期img = img_;mycolor=c;}

在渲染粒子的时候，粒子的颜色应该随着粒子的生命衰减而变浅，这里采用的是降低透明度的方式来体现这一点。本程序中设定的图元为方形，也可以更改为圆形，三角或者用户自定义的图形或材质。

 // 展示 选择材质贴图或者直接用简单几何void render() {//imageMode(CENTER);//tint(mycolor,lifespan);//控制颜色以及透明度//image(img,pos.x,pos.y);// Drawing a circle insteadfill(mycolor,lifespan);noStroke();rect(pos.x,pos.y,5,5);}

接下来设定粒子系统，粒子系统首先得获取到颜色才能将颜色给粒子，为此有参数mycolor。

class ParticleSystem {ArrayList<Particle> particles;    // 粒子列表PVector origin;                   // 粒子的出生点PImage img;                       //材质color mycolor;ParticleSystem(int num, PVector v, PImage img_,color c) {particles = new ArrayList<Particle>();              // 初始化粒子列表origin = v.get();                                   // 保存初始点img = img_;mycolor=c;for (int i = 0; i < num; i++) {particles.add(new Particle(origin, img,mycolor));        // 为粒子系统添加添加num个粒子}}
//管理粒子的活动void run() {for (int i = particles.size()-1; i >= 0; i--) {Particle p = particles.get(i);p.run();if (p.isDead()) {particles.remove(i);//粒子死亡，移除}}}//为粒子添加力void applyForce(PVector dir) {for (Particle p: particles) {p.applyForce(dir);}}  void addParticle() {particles.add(new Particle(origin, img,mycolor));}
}

最后集合使用上述的类了。在此之前，我们先读入一张图片，作为目标“名画”，processing里面提供函数loadImage

PImage myImage;

 myImage = loadImage("6.jpg");

为了更好的视觉效果，将画布的尺寸调整为图片的大小（也可以再大一点）。

  surface.setSize(myImage.width, myImage.height);

用一个for循环遍历图片，初始化粒子系统，这里设置的像素间隔为8。

particlesS = new ArrayList<ParticleSystem>();              // 初始化粒子系统int temp=8;for (int i=0;i<myImage.width;i=i+temp){for(int j=0;j<myImage.height;j=j+temp){particlesS.add(new ParticleSystem(0,new PVector(i,j),img,myImage.get(i,j)));  }}

捕捉鼠标位置，生成相应的受力，这里将鼠标在画布上的位置映射到一定范围内，防止受力过于夸张。

  // 添加受力float dx = map(mouseX,0,width,-0.2,0.2);float dy=map(mouseY,0,height,-0.3,0.3);PVector wind = new PVector(dx,dy);

更新粒子系统：

for (int i=0;i<particlesS.size()-1;i++)
{ParticleSystem p = particlesS.get(i);p.applyForce(wind);p.run();for (int j = 0; j < 2; j++) {p.addParticle();}
}

下面给出使用粒子系统的文件的代码：

PImage myImage;
int halfImage;
ArrayList<ParticleSystem> particlesS;    // 粒子列表void setup() {size(640,360);PImage img = loadImage("2.png");//如果用材质的话，可以用这个myImage = loadImage("6.jpg");surface.setSize(myImage.width, myImage.height);//myImage.loadPixels();particlesS = new ArrayList<ParticleSystem>();              // 初始化粒子系统int temp=8;for (int i=0;i<myImage.width;i=i+temp){for(int j=0;j<myImage.height;j=j+temp){particlesS.add(new ParticleSystem(0,new PVector(i,j),img,myImage.get(i,j)));  } }
}void draw() {background(255);// 添加受力float dx = map(mouseX,0,width,-0.2,0.2);float dy=map(mouseY,0,height,-0.3,0.3);PVector wind = new PVector(dx,dy);for (int i=0;i<particlesS.size()-1;i++)
{ParticleSystem p = particlesS.get(i);p.applyForce(wind);p.run();for (int j = 0; j < 2; j++) {p.addParticle();}
}
}

到了这一步，程序还是不能运行的，因为找不到图片文件，所以我们需要在源文件pde的同级目录下新建一个data文件夹，文件夹里面装我们的图片。

作者有话说

千万！每次写代码都要注意保存，就在我写这篇博客的过程中，下课了，我去吃饭，我明明按了ctrl+S但是！它并没有保存！后来把代码又写了一遍！我。。。好难啊。

话说回来，虽然本程序并不复杂，但是本人还是十分喜欢最后的效果，而且感觉还可以做出诸多的拓展，比如说鼠标点击画面产生波纹的效果。