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。

处理草图在Java模式下工作正常，但在Processing.js中没有

1 个答案: