Question

我是Processing.js的新手，需要对此问题给予一点支持。我制作了一个HTML-Canvas动画，其中我有一些类似幕后行的线条，可以在这里看到：

这是使用名为Paper.js的画布插件制作的我现在想要在处理上获得类似的效果，但我真的不知道如何解决这个问题。我的尝试是：

float x;
float y;

void setup() {
   size(1024, 768);
   strokeWeight(2);
   background(0, 0, 0);
}

void mouseMoved() {
   x = mouseX;
   y = mouseY;
}

void draw() {
   background(0);
   line(50, 50, x += x - x/5, y += y - y/5);
   stroke(255, 255, 255);
   line(50, 700, x += x - x/15, y += y - y/15);

   stroke(255, 255, 255);
   line(75, 50, x += x - x/25, y += y - y/25);
   stroke(255, 255, 255);
   line(75, 700, x += x - x/35, y += y - y/35);

   // and so on, would create it within a loop
}

所以我想要做的就是基本上获得与HTML相同的效果，并在Processing.js中进行调整。

提前致谢。

Answer 1

我强烈建议忽略paper.js并正确地重新实现它。我们看到一系列连接到历史坐标线的线，基于鼠标位置，所以让我们实现：

class Point {
  float x, y;
  Point(float _x, float _y) { x=_x; y=_y; }}

// our list of historical points
ArrayList<Point> points;

// the horizontal spacing of our lines has fixed interval
float interval;

// how many lines do we want to draw?
int steps = 50;

void setup() {
  size(500, 500);
  // initialise the "history" as just the midpoint
  points = new ArrayList<Point>();
  for (int i=0; i<steps; i++) {
    points.add(new Point(width/2, height/2));
  }
  // compute the horizontal interval, because it's
  // width-dependent. Never hard code dependent values.
  interval = width/(float)steps;
  // the lower we set this, the slower it animates.
  frameRate(60);
}

void draw() {
  // white background, black lines
  background(255);
  stroke(0);
  // for each historic point, draw two
  // lines. One from height 0 to the point,
  // another from height [max] to the point. 
  Point p;
  for (int i=0; i<steps; i++) {
    p = points.get(i);
    line(interval/2 + i*interval, 0, p.x, p.y);
    line(interval/2 + i*interval, height, p.x, p.y);
  }

  // when we move the mouse, that counts as a new historic point
  points.remove(0);
  points.add(new Point(mouseX, mouseY));
}

草图在浏览器中运行：http://jsfiddle.net/M2LRy/1/

（你可以通过使用循环数组而不是ArrayList来加快速度，但是这里的ArrayLists非常方便）

在绘制线条时使窗帘像行为一样

1 个答案: