p5.js

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 的位置更改大小的 "weird" 行为是由从 Vector class 调用 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());
}

p5.js - 改变两条代码行的顺序会改变绘制正方形的行为

p5.js - changing order of two code lines changes behaviour of drawing squares

drawing

drawing2d