java - Processing sketch 在 Java 模式下工作正常，但在 Processing.js 下不行

Question

我喜欢发布我在网站上使用 Processing.js 制作的一些 Processing 草图。然而，我制作的这个特别的在 JavaScript 模式下不能正常工作。起初我以为是因为它使用了通用的 ArrayList 类，而通用类直到最近才在 Processing 中得到支持。但后来我想起我制作的另一个使用相同类的草图在 Processing.js 中运行良好。

这是给我带来问题的代码:

ArrayList<Point> line;

class Point
{
  float x, y, z;
  Point(float x, float y, float z) { this.x = x; this.y = y; this.z = z; }
  Point copy() { return new Point(x, y, z); }
}

Point cursor;

void setup()
{
  line = new ArrayList<Point>();
  size(400, 400, P3D);
  cursor = new Point(width/2, height/2, 0);
  line.add(cursor.copy());
  frameRate(60);
}

void draw()
{
  background(0);
  camera();
  noSmooth();

  float coefficient = 0.05;
  cursor.x = map(coefficient, 0.0, 1.0, cursor.x, mouseX);
  cursor.y = map(coefficient, 0.0, 1.0, cursor.y, mouseY);

  if (mousePressed && (mouseButton == LEFT)) cursor.z -= 5.0;
  if (mousePressed && (mouseButton == RIGHT)) cursor.z += 5.0;
  if (mousePressed && (mouseButton == CENTER)) {
    cursor = new Point(width/2, height/2, 0);
    line.clear();
  }

  line.add(cursor.copy());

  rotate(sin(frameCount / 60.0) * 0.2, 0, 1, 0);
  noFill();
  stroke(255, 255, 0);
  pushMatrix();
  translate(200, 200, 0);
  box(400, 400, 400);
  popMatrix();

  // Draw the line
  stroke(0, 255, 0);
  Point last = null;
  for (Point p : line) {
    if (last != null) {
      line(last.x, last.y, last.z, p.x, p.y, p.z);
    }
    last = p;
  }

  // Draw the cursor
  float radius = 24;
  stroke(255, 0, 0);
  line(cursor.x - radius, cursor.y, cursor.z, cursor.x + radius, cursor.y, cursor.z);
  line(cursor.x, cursor.y - radius, cursor.z, cursor.x, cursor.y + radius, cursor.z);
  line(cursor.x, cursor.y, cursor.z - radius, cursor.x, cursor.y, cursor.z + radius);
}

和here是无法正常工作的实时页面。

是什么导致了这个问题，更重要的是，我该如何解决它？

Answer 1

一件重要的事情是不要给 API 中也使用的草图变量名称，所以一个名为 line 的变量不是一个好主意，因为它可能会覆盖 line( ) 函数。

JavaScript 没有函数名和变量名的分离；他们共享同一个命名空间。参见 http://processingjs.org/articles/p5QuickStart.html#variablenamingcare有关这方面的更多信息。