2

I have a strange problem with p5.js. Basically, there is one source of gravity force (red square) and one blue square (called pixel in code) that orbits around a red square. proc() function makes one step in time and proceeds physics of both objects and draw() function just draws those two squares. The question is about my sketch.js file. When it's in order:

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

it works well but when it's:

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

it works very strangely. Here are quick previews:

Working well: http://home.elka.pw.edu.pl/~eprokopc/goodGrav/index.html

Working badly: http://home.elka.pw.edu.pl/~eprokopc/badGrav/index.html

Github repo: https://github.com/kekore/BadGravity

Both examples differ only those two lines order in sketch.js. I'm just curious why squares are drawn like that.

wazz
  • 4,953
  • 5
  • 20
  • 34
FindingTruth
  • 69
  • 8
  • Can you please post a [mcve] that demonstrates the problem? Note that this should not be your full program, but should be just enough code so we can copy and paste it to see the problem ourselves. – Kevin Workman Aug 05 '18 at 16:47
  • Of course. Here you are http://alpha.editor.p5js.org/kekore/sketches/SyI2IJrSm It's weird that it draws squares of varying size even though squares' size is hard-coded with constant numbers in this example. – FindingTruth Aug 05 '18 at 21:08
  • It's pretty hard to debug all that code. Do you have a simpler example that isolates just the buggy behavior? Something simple like drawing a single hard-coded square? – Kevin Workman Aug 05 '18 at 21:21
  • Sure. I tried to rewrite it so it uses only two essential classes. I hope it's simplier now. Just comment rects in draw() function: https://alpha.editor.p5js.org/kekore/sketches/BkT-ExBrm – FindingTruth Aug 05 '18 at 22:06
  • 1
    Take a look at the call to scale. Scale will change how everything is drawn. If you draw the rectangles above the call to force.scaleTo you get the good behavior. If you draw the rectangles after the call to scale you get scaling applied to both rectangles and the bad behavior – Charlie Wallace Feb 27 '19 at 15:12

1 Answers1

1

The "weird" behavior where sizes change depending on where draw and proc are called is caused by the call to scaleTo from the Vector class. Vector scaleTo calls scale which calls the p5 scale function even though Vector has its own scale function. 

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

If the desired behavior is for scaleTo to call Vector.scale modify scaleTo:

scaleTo(len){
    this.scale(len/this.length());
}
Charlie Wallace
  • 1,810
  • 1
  • 15
  • 17
  • Yes. I figured it out long time ago, but I forgot to mention it here. However, I appreciate your effort! – FindingTruth Feb 28 '19 at 17:56
  • No problem. The age of the question does not diminish its usefulness. I am thinking that this makes a good place to show how easy it is to have issues with scope in js code. – Charlie Wallace Feb 28 '19 at 18:17