基于map函数生成星战片头动画

@(Processing学习日记)

–代码来自Daniel Shiffman

前面讲过生成动画的基本原理，核心在于定义物体的移动控制。

这个案例中，主要牵涉到的知识点有：

translate(x,y)函数
map(value,start,end,low,upper)函数

translate(x,y)

将坐标原点移动到指定的(x,y)点。

这个函数是一种方便用法，如果不用这个函数也能实现所有的移动位置计算，但是会稍微复杂一些。在计算一些数学问题时，我们知道适当的考虑将坐标系移动，将会简化问题。比如，以原点为圆心位置的圆，和任意位置的圆的计算问题，显然是以坐标原点为圆心的圆会更好计算。

map函数

一般map函数有5个参数。这个函数的意思很明显是要做一个值的范围映射。

第一个参数是要映射的值。
第二个和第三个参数是该值的上下限。
第四个第五个参数是该值映射后的上下限。

一般场景是，我们需要计算出一个比例，然后映射到屏幕上的像素位置。

Star类

// Star.pde
class Star
{float x,y,z;float pz;Star(){x = random(-width,width);y = random(-height,height);z = random(0,width);pz = z; }void update(){z = z - speed;if(z < 1){z = width;x = random(-width,width);y = random(-height,height);pz = z;}}void show(){fill(255);noStroke();float sx = map(x / z, 0, 1, 0, width);float sy = map(y / z, 0, 1, 0, height);//float r = map(z,0, width,16,0);//ellipse(sx,sy,r,r);float px = map(x / pz, 0, 1, 0, width);float py = map(y / pz, 0, 1, 0, height);stroke(255);line(px,py,sx,sy);pz = z;}
}

入口调用

// StarField.pde
// 实例化对象
Star[] stars = new Star[10000];
float speed; // 鼠标移动速度
void setup()
{size(800,600);for(int i = 0; i < stars.length; i++){ stars[i] = new Star();}
}void draw()
{speed = map(mouseX,0,width,0,50);background(0);translate(width / 2, height / 2);for(int i = 0; i < stars.length; i++){stars[i].update();stars[i].show();}
}

具体运行效果可以自己运行查看。

首先还是需要定义一个Star类作为对象模板，在StarField中来生成对象，并在draw()函数中调用对象的方法，来控制显示和动画生成。

这个例子的逻辑很直接，在对象身上的Show函数绘制line或者ellipse，其中绘制圆形被注释了，可以自己取消看运行效果。

更多Processing相关学习，可以关注微信公众号：