p5.j​​s - 改变两行代码的顺序会改变绘制正方形的行为

Question

p5.js 有一个奇怪的问题。基本上，有一个重力源（红色方块）和一个围绕红色方块运行的蓝色方块（代码中称为像素）。 proc() 函数在时间上迈出了一步并继续对两个对象进行物理处理，draw() 函数只是绘制了这两个正方形。问题是关于我的sketch.js 文件。当它有序时：

env.draw();
env.proc();

它运作良好，但当它是：

env.proc();
env.draw();

它的工作方式非常奇怪。 以下是快速预览：

运作良好：http://home.elka.pw.edu.pl/~eprokopc/goodGrav/index.html

工作不佳： http://home.elka.pw.edu.pl/~eprokopc/badGrav/index.html

Github 存储库： https://github.com/kekore/BadGravity

这两个示例仅在sketch.js 中的这两行顺序不同。我只是好奇为什么要这样画正方形。

Answer 1

大小根据调用 draw 和 proc 的位置而变化的“奇怪”行为是由 Vector 类中对 scaleTo 的调用引起的。 Vector scaleTo 调用 scale ，它调用 p5 scale 函数，即使 Vector 有自己的 scale 函数。

class Vector{
    constructor(initX,initY){
        this.x = initX;
        this.y = initY;
    }
    scale(a){
        this.x = this.x * a;
        this.y = this.y * a;
    }
    scaleNC(a){
    return new Vector(this.x*a,this.y*a);
    }
    scaleTo(len){
        scale(len/this.length());
    }
}

如果想要的行为是让 scaleTo 调用 Vector.scale 修改 scaleTo：

scaleTo(len){
    this.scale(len/this.length());
}