力的视觉化

flow

牛顿第二定律的实现

虽然各种形态的相互转换这种创作方法已经在艺术创作领域被广泛的运用，例如声音可视化，色彩声音化，情绪可视化等，只要有数据都可以进行形态的转换。但这里着重讲视觉化编程的实现思路。

说到力就不得不提牛顿三大定律，其中最常用的就是牛顿第二定律f = ma 。其中 f 是合外力，m 是物体的质量，a 是加速度，当质量为1的时候 f = a 。即力等于加速度。

首先要在程序里面实现加速度，就要理解程序的运行原理。这里就要引入 "帧" 的概念。暂且可以把一段程序的运行规则理解为跟一部电影一样，是逐帧运行的，而电影是在有限的帧数里面运行，程序则没有帧数的限制，只要程序打开，它就会一直运行下去，直到你退出程序或者关机，所以在写程序的时候“帧”的概念非常重要。

我们可以忽略公式，用视觉化的思维来描述加速度：一个小球从静止到移动并且移动的速度越来越快。

要让小球移动首先就要给小球一个速度，然后再通过加速度让速度变得越来越快或者越来越慢。

以每帧速度为 1 做匀速运动:

小球的初始坐标: x y

velocity = 1；

x+=velocity;

ellipse(x, y, r, r);

加速度可以理解为改变速度的量:

acceleration = 0.2;

velocity+=acceleration; 让速度每帧加上一个加速度

x+=velocity; 每帧加上一个速度

ellipse(x, y, r, r);

如果x一直累加velocity,小球就会一直匀速移动,velocity一直累加acceleration,速度就会越来越大,直到无穷大。因此在速度和加速度上乘以一个小于1的浮点数实现速度和加速度的衰减。

x+=velocity;

velocity+=acceleration;

acceleration*=0.99;

velocity*=0.96;

引力的实现

小球往标方向做加速移动

//引力模拟PVector org = new PVector();PVector vel = new PVector(1, 0);PVector accf = new PVector();PVector subforce = new PVector();void setup() {  size(900, 400);  org = new PVector(random(0, width), random(0, height));}void draw() {  background(0);  display();  editval();  chckedge();}void editval() {  PVector inpos = new PVector(mouseX, mouseY);  PVector force = inpos.sub(org);  float attrat = force.mag();  float strength = 0.03;  float limitforce = pow(2, -attrat*0.05)*strength;  subforce.mult(-limitforce*10);  accf.add(subforce);  force.mult(limitforce);  accf.add(force);  vel.add(accf);   org.add(vel);  accf.mult(0);  if (accf.mag()==0 && vel.mag() >1.0) {    vel.mult(0.98);//衰减  }}void display() {  fill(255);  noStroke();  ellipse(org.x, org.y, 20, 20);}void chckedge() {  if (org.x >= width || org.x <=0 || org.y >=height || org.y<= 0) {    org= new PVector(random(0, width), random(0, height));  }}

sin(x) cos(x) pow(2^x) 实现的力场及引力交互

用来发射的力

这里需要引入向量的概念，向量和标量的区别可以理解为标量只有大小，而向量不仅有大小还有方向。同样力也是有大小和方向的，这样我们就可以用向量来描述力的轨迹。

通过帧差法，求出鼠标运动的方向:(体现出理解帧的概念非常重要)

PVector nowpos = new PVector(mouseX,mouseY);

PVector direction = PVector.sub(nowpos,prepos);

PVector prepos = nowpos;

//把当前帧存下来，留到下一帧与nowpos做运算

processing当中可以用pmouseX，pmouseY 获得前一帧的鼠标坐标

通过牛顿第二定律 f = ma 即 a = f/m 质量越大加速度越慢，速度越慢。

//在鼠标按下的位置生成粒子，并往鼠标移动的方向射出；PVector pos;PVector vel;PVector emitforce;float r;float mass;float presstime;float d;void setup() {  size(900, 400);  pos = new PVector(mouseX, mouseY);  vel = new PVector(0, 0);  emitforce = new PVector();  r = 20;  mass = 10;}void draw() {  background(0);  speedadd();  display();}void editvalue() {  emitforce = PVector.sub(new PVector(mouseX, mouseY), new PVector(pmouseX, pmouseY));  d = emitforce.mag();  float limitD = 1-pow(2, -d);  emitforce.mult(limitD/(mass*0.03));  pos = new PVector(mouseX, mouseY);}void speedadd() {  vel.add(emitforce);  pos.add(vel);  vel.mult(0);  emitforce.mult(0.98);  //如果不做衰减那么emitforce则会在鼠标松开后保持一个甩出去时候的值。  //vel会每帧都会累加这个值，以至于停不下来。}void display() {  noStroke();  fill(255);  ellipse(pos.x, pos.y, mass, mass);}//拖动鼠标蓄能void mouseDragged() {  editvalue();  mass+=0.1;}void mousePressed() {  mass = 10;//初始质量}

Optical flow 检测像素运动方向

《是不是 ? 》

关于互动行为的实验，通过x轴和y轴的运动幅度判断动作是摇头还是点头。

点头则发射“不”，摇头则发射“是”。为什么要这样？因为.......嗯。

关注公众号了解更多

力的视觉化

Comments

huang tian