Processing绘制随风飘扬的名画

最终效果
参考示例
绘制原理
绘制过程
总结与体会

最终效果

参考示例

两个参考示例来自《代码本色》一书，另一个参考示例来自网站https://www.openprocessing.org，这个示例给出了关于风的参数。
示例一 2-1：

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.comMover m;void setup() {size(640,360);m = new Mover();
}void draw() {background(255);PVector wind = new PVector(0.01,0);PVector gravity = new PVector(0,0.1);m.applyForce(wind);//添加风力m.applyForce(gravity);//添加重力m.update();m.display();m.checkEdges();}

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.comclass Mover {PVector position;PVector velocity;PVector acceleration;float mass;Mover() {position = new PVector(30,30);velocity = new PVector(0,0);acceleration = new PVector(0,0);mass = 1;}void applyForce(PVector force) {PVector f = PVector.div(force,mass);acceleration.add(f);}void update() {velocity.add(acceleration);position.add(velocity);acceleration.mult(0);}void display() {stroke(0);strokeWeight(2);fill(127);ellipse(position.x,position.y,48,48);}void checkEdges() {if (position.x > width) {position.x = width;velocity.x *= -1;} else if (position.x < 0) {velocity.x *= -1;position.x = 0;}if (position.y > height) {velocity.y *= -1;position.y = height;}}
}

示例运行效果：

本示例绘制了一个被风吹动的小球，同时小球还受到重力的作用下降，当小球撞到了画布边缘时做出判断，模拟出了弹力。
这提供给我一个想法：“风”，大自然的风可不是这么规律，自然界的风往往方向变化多端，要是风的吹向时刻在变化，那么，小球也就不是如此规律地左右循环了。为此，我修改了代码，让风的方向不变，但是大小随机变化得到下面的放飞的小球：

示例二 2-8：

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.comMover[] movers = new Mover[20];float g = 0.4;void setup() {size(640,360);for (int i = 0; i < movers.length; i++) {movers[i] = new Mover(random(0.1,2),random(width),random(height)); }
}void draw() {background(255);for (int i = 0; i < movers.length; i++) {for (int j = 0; j < movers.length; j++) {if (i != j) {PVector force = movers[j].attract(movers[i]);movers[i].applyForce(force);}}movers[i].update();movers[i].display();}}

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.comclass Mover {PVector position;PVector velocity;PVector acceleration;float mass;Mover(float m, float x, float y) {mass = m;position = new PVector(x, y);velocity = new PVector(0, 0);acceleration = new PVector(0, 0);}void applyForce(PVector force) {PVector f = PVector.div(force, mass);acceleration.add(f);}void update() {velocity.add(acceleration);position.add(velocity);acceleration.mult(0);}void display() {stroke(0);strokeWeight(2);fill(0, 100);ellipse(position.x, position.y, mass*24, mass*24);}PVector attract(Mover m) {PVector force = PVector.sub(position, m.position);             // Calculate direction of forcefloat distance = force.mag();                                 // Distance between objectsdistance = constrain(distance, 5.0, 25.0);                             // Limiting the distance to eliminate "extreme" results for very close or very far objectsforce.normalize();                                            // Normalize vector (distance doesn't matter here, we just want this vector for directionfloat strength = (g * mass * m.mass) / (distance * distance); // Calculate gravitional force magnitudeforce.mult(strength);                                         // Get force vector --> magnitude * directionreturn force;}}

运行效果：

参考这个示例并不是说用到了这个示例的技术，而是因为这个示例中“多个小球”汇聚在一起又离开，从而想到如果这个小球有特定的图像，赋予不同的贴图图片，比如贴上的是不同的人脸，那么这个示例就可以表现一些人员流动和人格魅力的吸引力。总之“吸引力”为这个群组里面的联系。

通过上面两个示例，拓展的目标定在了有运动联系的群组图元，并且受到不同风速的影响，由于一些原因，《代码本色》本章的拓展已经完成过一个，是关于粒子的运动，后来做到第四章的拓展时，发现已经做好的和第四章的示例太相似。不过本文的拓展灵感也因第四章的拓展而得到闪现：模拟图元构成的画被风吹动的效果。

绘制原理

主要思想：
1、读入目标绘画作品
2、规定固定的图元数量
3、使得每一个图元受力运动

这里模拟自然界风吹的时候用到了柏林噪声，用这个方法产生的力来模拟自然界的风力会非常的自然。这一点《代码本色》一书的第0章就提到过。柏林噪声能生成符合自然序列（“光滑”）的伪随机数。

processing里面的noise函数可以产生柏林噪声，可接收x,y,z三个坐标分量作为输入，并返回0.0~1.0的double值作为输出。由于输出归一化，程序中需要将数值扩大相应的倍数，而且为了使方向有正有负，最后还需要减去一个设定值。

模拟绘画作品时，为了使得绘制高效，避免出现非常卡顿的现象，不能一个像素一个像素地获取颜色，而是取一个像素点的颜色，绘制5像素或者更大像素的图元。

在用柏林噪声的时候遇到了参数盲目调节的问题，后来幸运地在https://www.openprocessing.org找到一篇用柏林噪声来模拟风的示例，使用到了示例中的参数，而后自行进行略为调整。得到以下绘制过程

绘制过程

读入jpg图片，获取作品的高度

 img = loadImage("5.jpg");imgX=img.width;imgY=img.height;

绘制图元

  for(int j=50;j<imgY;j+=4){for(int i=20;i<imgX;i++) {float step = sin(a)*(sin((imgY-i)*PI/imgY));float swing = j+step*(180.0*noise(a+i/300.0, a+j/300.0,a/10.0)-90);//计算风力float dx = randomC()/2;float dy = randomC()/2;float x = i;float y = swing+dy;//更新物体的坐标strokeWeight(3);stroke(255);stroke(img.get(i,j));point(x,y);//图元为点，这里也可以图元为矩形rect，效果有些不同}

总结与体会

“用代码来画使得画动起来的画”十分好玩，也许真的有一天做出了各种各样变换的方式来使得“名画”动起来，我的电脑就是一个小型的数字名画展览器^ ^,毕竟到目前为止，我已经有两个关于如何使“名画”动起来的想法实现了。