Processing sketch在Java模式下可以正常工作，但在Processing.js中不行

我喜欢使用Processing.js在我的网站上发布我制作的一些加工草图。然而，我制作的这个特定的脚本在JavaScript模式下无法正常工作。起初我认为这是因为它使用了ArrayList类，这是泛型的，直到最近，泛型类才在处理中得到支持。但后来我想起了我制作的另一个草图，它使用了相同的类，在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);
}

ArrayList行；
类点
{
浮动x，y，z；
点（浮点x，浮点y，浮点z）{this.x=x；this.y=y；this.z=z；}
点复制（）{返回新点（x，y，z）；}
}
点光标；
无效设置（）
{
line=新的ArrayList（）；
尺寸（400400，P3D）；
光标=新点（宽度/2，高度/2，0）；
line.add（cursor.copy（））；
帧率（60）；
}
作废提款（）
{
背景（0）；
摄像机（）；
noSmooth（）；
浮动系数=0.05；
cursor.x=map（系数，0.0，1.0，cursor.x，mouseX）；
cursor.y=map（系数，0.0，1.0，cursor.y，mouseY）；
如果（鼠标按下&（鼠标按钮==左））cursor.z-=5.0；
如果（鼠标按下&（鼠标按钮==右））cursor.z+=5.0；
if（鼠标按下&（鼠标按钮==中间））{
光标=新点（宽度/2，高度/2，0）；
line.clear（）；
}
line.add（cursor.copy（））；
旋转（sin（帧数/60.0）*0.2,0,1,0）；
noFill（）；
笔划（255,255,0）；
pushMatrix（）；
翻译（200,200,0）；
盒子（400400400）；
popMatrix（）；
//划清界限
笔划（0,255,0）；
最后一点=空；
用于（点p：直线）{
if（last！=null）{
行（last.x，last.y，last.z，p.x，p.y，p.z）；
}
last=p；
}
//画光标
浮动半径=24；
冲程（255,0,0）；
行（cursor.x-半径，cursor.y，cursor.z，cursor.x+半径，cursor.y，cursor.z）；
行（cursor.x，cursor.y-半径，cursor.z，cursor.x，cursor.y+半径，cursor.z）；
行（cursor.x，cursor.y，cursor.z-半径，cursor.x，cursor.y，cursor.z+半径）；
}

而且是不起作用的实时页面

---

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

一件重要的事情是不要给API中也使用的草图变量命名，因此名为

line

的变量不是一个好主意，因为它可能会覆盖

line（）

函数的功能

---

JavaScript没有函数名和变量名的分离；它们共享相同的名称空间。有关这方面的更多信息，请参阅。

重要的一点是不要使用API中也使用的名称调用变量，因此名为“line”的变量不是一个好主意，因为它可能会覆盖line（）函数的功能。（JS没有将函数名和变量名分开。它们共享相同的名称空间。请参阅）我尝试将其重命名为“points”，但仍然不起作用：-（这是一个很好的猜测。这适用于将

行

重命名为

光标列表

，并使用Processing.js 1.4.7——您使用的是哪一个版本？实际上将其重命名为

点

确实有效（谢谢您的提醒！）；我之前刚刚错过了其中一个版本。）（我没有使用find/replace，因为如果我这样做，它也会更改对

行

函数的调用。）但是现在它在错误的轴上旋转…我可能可以通过更改

rotate

调用来解决这个问题，但是我希望相同的代码能够在两种模式下工作。如果您可以将其简化为一个简单的测试用例，我很乐意听到您的消息