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

基于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相关学习，可以关注微信公众号：