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

【问题标题】：My Processing sketch in OOP doesn't work我在 OOP 中的处理草图不起作用
【发布时间】：2016-04-25 21:53:44
【问题描述】：

以下代码旨在将蓝色背景和三个移动形状（圆形、方形、三角形）绘制到屏幕上。但是，代码是用面向对象编程编写的，并且出现了问题，因为我的草图在处理 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;
  }
}

【问题讨论】：

嗨，埃里克，欢迎来到 StackOverflow！您可以编辑您的问题并添加您看到的任何错误/日志吗？这将有助于理解问题。

标签： oop processing

【解决方案1】：

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

具体来说，您的 triangle 变量与 triangle() 函数发生冲突。基本上，您将 triangle() 函数替换为您的 triangle 变量，因此当 JavaScript 尝试调用 triangle() 函数时，它会获取您的 triangle 变量，而您会收到以下错误：

Uncaught TypeError: triangle is not a function

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

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

更多信息可以在here找到。

【讨论】：