OOP中的我的处理草图不起作用

Question

以下代码旨在绘制蓝色背景和三个移动形状（圆形，正方形，三角形）到屏幕。但是，代码是用面向对象编程编写的，而且有些情况是错误的，因为我的草图在Processing IDE的Java模式下完美工作，但无法在OpenProcessing中工作。代码完美编译。我假设我以某种方式做了与OOP不正确的事情。谁能帮帮我吗？谢谢！

Circle circle = new Circle(PI,200,400,400); 
Square square = new Square(100,100); 
Triangle triangle = new Triangle(400,400); 
void setup() { 
    size(800,800); 
    rectMode(CENTER); 
    ellipseMode(CENTER); 
    noStroke(); 
    frameRate(120); 
} 
void draw() { 
    background(0,0,255); 
    circle.drawCircle(); 
    square.drawSquare(); 
    triangle.drawTriangle(); 
} 
void shadeOfOrange(int x) { 
    fill(255,128-x,0); 
} 
class Circle { 
    float offsetX = 0; 
    float offsetY = 0; 
    float circleScalar; 
    float angle; 
    float circleStep = 0.005; 
    Circle(float initialAngle,float radius,float offsetX,float offsetY) { 
    angle = initialAngle; 
    circleScalar = radius; 
    this.offsetX = offsetX; 
    this.offsetY = offsetY; 
    } 
    void drawCircle() { 
    pushMatrix(); 
    for(int i = 100; i >= 1; i--) { 
     shadeOfOrange(i); 
     float x1 = offsetX + circleScalar*cos(angle); 
     float y1 = offsetY + circleScalar*sin(angle); 
     ellipse(x1,y1,i,i); 
    } 
    popMatrix(); 
    this.incrementAngle(); 
    } 
    void incrementAngle() { 
    angle += circleStep; 
    if(angle >= 2*PI) 
     angle -= 2*PI; 
    } 
} 
class Square { 
    boolean right = true; 
    boolean down = false; 
    boolean left = false; 
    boolean up = false; 
    int transX = 0; 
    int transY = 0; 
    int offsetX = 0; 
    int offsetY = 0; 
    Square(int offsetX,int offsetY) { 
    this.offsetX = offsetX; 
    this.offsetY = offsetY; 
    } 
    void drawSquare() { 
    pushMatrix(); 
    translate(transX,transY); 
    for(int i = 100; i >= 1; i--) { 
     shadeOfOrange(i); 
     rect(offsetX,offsetY,i,i); 
    } 
    popMatrix(); 
    this.adjustTranslation(); 
    } 
    void adjustTranslation() { 
    if(right) { 
     transX++; 
     if(transX == 600) { 
     right = false; 
     down = true; 
     } 
    } 
    else if(down) { 
     transY++; 
     if(transY == 600) { 
     down = false; 
     left = true; 
     } 
    } 
    else if(left) { 
     transX--; 
     if(transX == 0) { 
     left = false; 
     up = true; 
     } 
    } 
    else if(up) { 
     transY--; 
     if(transY == 0) { 
     up = false; 
     right = true; 
    } 
    } 
    } 
} 
class Triangle { 
    float triangleScalar = 1; 
    boolean scalarUp = true; 
    float triangleStep = 0.01; 
    int offsetX = 0; 
    int offsetY = 0; 
    Triangle(int offsetX,int offsetY) { 
    this.offsetX = offsetX; 
    this.offsetY = offsetY; 
    } 
    void drawTriangle() { 
    pushMatrix(); 
    for(int i = 100; i >= 1; i--) { 
     shadeOfOrange(i); 
     float vert1x = offsetX; 
     float vert1y = offsetY - (sqrt(3)/3)*i*triangleScalar; 
     float vert2x = offsetX - i/2 * triangleScalar; 
     float vert2y = offsetY + (sqrt(3)/6)*i*triangleScalar; 
     float vert3x = offsetX + i/2 * triangleScalar; 
     float vert3y = offsetY + (sqrt(3)/6)*i*triangleScalar; 
     triangle(vert1x,vert1y,vert2x,vert2y,vert3x,vert3y); 
    } 
    popMatrix(); 
    this.incrementScalar(); 
    } 
    void incrementScalar() { 
    if(triangleScalar > 2.0) 
     scalarUp = false; 
    else if(triangleScalar < 0.5) 
     scalarUp = true; 

    if(scalarUp) 
     triangleScalar += triangleStep; 
    else 
     triangleScalar -= triangleStep; 
    } 
} 

Answer 1

OpenProcessing使用Processing.js，这是JavaScript的，你必须要小心，在JavaScript事物命名。例如，不能使用与函数名称相同的变量。

具体而言，您的triangle变量会与triangle()函数发生冲突。基本上，你与你的triangle变量替换triangle()功能，所以当JavaScript尝试调用triangle()功能，它得到您的triangle变量，而不是，你会得到这个错误：

Uncaught TypeError: triangle is not a function 

注意，这是在出JavaScript控制台。你应该养成检查错误的习惯。您可以通过在大多数浏览器中按F12键来实现。

问题的简单解决方案是简单地重命名您的triangle变量（以及任何其他具有冲突名称的变量），以便它不再发生冲突。

更多资讯可浏览：here。