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

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

@(Processing学习日记)

–代码来自Daniel Shiffman

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

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

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

translate(x,y)

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

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

map函数

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

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

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

Star类

// Star.pdeclass 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相关学习，可以关注微信公众号：