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

Question

下面的代码旨在将蓝色背景和三个移动形状（圆形、正方形、三角形）绘制到屏幕上。然而，代码是用面向对象编程编写的，我的草图在处理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命名时必须小心。例如，不能有与函数同名的变量。

具体来说，triangel变量与triangel()函数发生冲突。基本上，您是在用triangel变量替换triangel()函数，因此当JavaScript尝试调用triangel()函数时，它会得到triangel变量，并得到以下错误：

Uncaught TypeError: triangle is not a function

注意，这显示在JavaScript控制台中。您真的应该养成检查错误的习惯。在大多数浏览器中，您可以通过按F12键来获得它。

更多信息可以在这里找到。