p5.Vector functions in instance mode with Angular 8

p5.js Libraries
#1

I have never used p5 as instance in a web app before and p5.vector functions are not working. All other p5 functions are working, but when I use a datatype from p5 like p5.Vector, the setMag or setLimit functions are not working. But p5.Vector.add seems to be working.

               attract(body : HeavenlyBody){
                let f : p5.Vector;
                let r : p5.Vector;
                f = p5.Vector.add(this.pos, body.pos);
                r = f.mag();
                let force: p5.Vector = r;
                force.setMag((this.G * body.mass) / Math.pow(r, 2));
                force.setLimit(this.maxForce);
                this.acc.setMag(force);
            }
1 Like
#2

Method p5.Vector::mag() returns a numeric floating value, not a new p5.Vector instance: :face_with_monocle:

p5js.org/reference/#/p5.Vector/mag

1 Like
#3

Oh, my bad…I must have changed the names while trying to debug. But even with f.mag() it’s still not working.

                let f : p5.Vector;
                let r : number;
                f = p5.Vector.sub(this.pos, body.pos);
                r = f.mag();
                let force: p5.Vector = f.copy();
                force.setMag((this.G * body.mass) / Math.pow(r, 2));
                force.setLimit(this.maxForce);
#4

You still haven’t explained what exactly isn’t working. Is there any error message? :face_with_thermometer:

Are properties this.pos & body.pos of datatype p5.Vector and properly initialized? :thinking:

#5

“the setLimit and setMag functions are not working. But p5.Vector.add seems to be working.”
…
error: ERROR TypeError: “force.setLimit is not a function”
Yeah, they are p5.Vector types defined in the class.

            pos : p5.Vector;
            vel : p5.Vector;
            acc : p5.Vector;

&&
PRoperly initialized :

                this.pos = p.createVector(x, y);
                this.vel = p.createVector(dx, dy);
                this.acc = p.createVector(0, 0);

Problem isn’t with those lines, definitions or initialization I think it’s because Typescript didn’t recognize the vector object have setLimit function or something like that.

#6

I’ve got an online sketch written in TS in instance mode w/ no typing errors so far! :grinning:
However, it doesn’t use p5.Vector. But I think it’s still worth a look: :innocent:

GoSubRoutine.GitHub.io/Ball-in-the-Chamber/instance/ (P.S.: This link will become invalid very soon!)

https://github.com/GoSubRoutine/Ball-in-the-Chamber/tree/2.0.5/instance

#7

Doesn’t solve the problem, but thanks!

#8

Newest Version 3 of the “Ball-in-the-Chamber” repo: :partying_face:

Latest releases can be downloaded here: :innocent:

2 new additions in this release: Pjs + Java & Pjs + CoffeeScript w/ ECMAScript Modules (ESM): :star_struck:

  1. GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-java
  2. GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-cs

Here’s the p5js/TS ESM instance mode version running online: :running_man:

And all 4 versions running at the same time: :1234:

#9

Are you using import for the latest “@types/p5” btW like I do in my sketch? :thinking:
https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/v3.0.0/p5js-instance/sketch/sketch.ts#L18-L19

I’ve got this “.bat” file which installs “@types/p5” globally and place a symlink/junction to it at subfolder “node_modules@types/p5/” inside current folder: :bat:
https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/master/p5js-instance/install-p5js-types.bat

I did some quick experiments w/ p5.Vector inside my own repo locally. :man_scientist:

Invoked methods such as p5.Vector::setMag() and p5.Vector.sub(): :heavy_minus_sign:
p5js.org/reference/#/p5.Vector

And all of them were correctly recognized by my import “node_modules/@types/p5/index”. :smile_cat:

So I can’t understand what would be the issue on your side. :anguished:

#10

Hi, I having this problem also can I know, do you find out any solution??