处理草图在 Java 模式下工作正常，但在 Processing.js 中不行答案

【问题标题】：Processing sketch works fine in Java mode, but not in Processing.js处理草图在 Java 模式下工作正常，但在 Processing.js 中不行
【发布时间】：2014-04-04 20:41:05
【问题描述】：

我喜欢在我的网站上使用 Processing.js 发布一些处理草图。然而，我制作的这个特殊的在 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 是无效的实时页面。

是什么导致了这个问题，更重要的是，我能做些什么来解决它？

【问题讨论】：

一件重要的事情是不要调用 API 中也使用的名称的变量，因此名为“line”的 var 不是一个好主意，因为它可能会覆盖 line() 函数所做的事情。（JS 没有区分函数名和变量名。它们共享相同的命名空间。见processingjs.org/articles/p5QuickStart.html#variablenamingcare）
我尝试将其重命名为“points”，但仍然无法正常工作。 :-( 不过猜得不错。
这适用于将line 重命名为cursorList，并使用Processing.js 1.4.7 -- 你使用的是哪个版本？
实际上将其重命名为 points 确实有效（顺便说一句！）；我之前刚刚错过了其中一个（我没有使用 find/replace，因为如果我这样做了，它也会更改对 line 函数的调用。）但现在它在错误的轴上旋转......我可能能够通过更改 rotate 调用来解决这个问题，但我希望相同的代码能够在两种模式下工作。
如果您可以将其简化为一个简单的测试用例，github.com/processing-js/processing-js/issues 很乐意听取您的意见

标签： java javascript webgl processing processing.js

【解决方案1】：

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

JavaScript 没有区分函数名和变量名；它们共享相同的命名空间。有关更多信息，请参阅http://processingjs.org/articles/p5QuickStart.html#variablenamingcare。

【讨论】：