Processing sketch works fine in Java mode, but not in Processing.js

Question

I like to publish some of the Processing sketches I make on my web site using Processing.js. This particular one I made, however, doesn't work right in JavaScript mode. At first I thought it was because it used the ArrayList class, which is generic, and generic classes weren't supported in Processing until relatively recently. But then I remembered that another sketch I made that uses that same class works fine in Processing.js.

Here's the code that's giving me problems:

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);
}

And here is the live page that doesn't work.

What's causing this problem, and more importantly, what can I do to fix it?

Answer 1

one important thing is to not give sketch variables names that are also used in the API, so a variable called line is not a good idea, as it might overwrite what the line() function does.

JavaScript has no separation of function vs variable names; they share the same namespace. See http://processingjs.org/articles/p5QuickStart.html#variablenamingcare for more information on that.