drawing - 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());
}