처리 스케치는 Java 모드에서는 제대로 작동하지만 Processing.js에서는 작동하지 않습니다.

Question

Processing.js를 사용하여 웹 사이트에서 수행 한 일부 처리 스케치를 게시하고 싶습니다. 그러나 내가 만든이 특별한 기능은 JavaScript 모드에서 올바르게 작동하지 않습니다. 처음에는 generic이라는 ArrayList 클래스가 사용되었고 비교적 최근까지는 generic 클래스가 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을 참조하십시오.