# p5.Vector functions in instance mode with Angular 8

**URL:** <https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415>\
**Category:** Libraries\
**Created:** [June 30, 2019, 9:15pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415 "2019-06-30T21:15:09Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![thonpy](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@thonpy](https://discourse.processing.org/u/thonpy)\
**Post date:** [June 30, 2019, 9:15pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/1 "2019-06-30T21:15:09Z")

</div>

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.

```auto
               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);
            }

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 30, 2019, 9:21pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/2 "2019-06-30T21:21:25Z")

</div>

> [@thonpy](#):
>
> ```auto
> r = f.mag();
> let force: p5.Vector = r;
> 
> ```

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

> **[reference | p5.js](https://p5js.org/reference/#/p5.Vector/mag)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![thonpy](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@thonpy](https://discourse.processing.org/u/thonpy)\
**Post date:** [June 30, 2019, 9:24pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/3 "2019-06-30T21:24:46Z")

</div>

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

```auto
                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);

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 30, 2019, 9:43pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/4 "2019-06-30T21:43:38Z")

</div>

> [@thonpy](#):
>
> it’s still not working.

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

Are properties `this.pos` & `body.pos` of datatype p5.Vector and properly initialized? 🤔

---

<div class="post-metadata">

**Author:** ![thonpy](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@thonpy](https://discourse.processing.org/u/thonpy)\
**Post date:** [June 30, 2019, 9:55pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/5 "2019-06-30T21:55:33Z")

</div>

“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.

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

```

&&  
PRoperly initialized :

```auto
                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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 30, 2019, 10:26pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/6 "2019-06-30T22:26:15Z")

</div>

> [@thonpy](#):
>
> I think it’s because Typescript didn’t recognize…

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

[GoSubRoutine.GitHub.io/Ball-in-the-Chamber/instance/](http://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](https://github.com/GoSubRoutine/Ball-in-the-Chamber/tree/2.0.5/instance)

---

<div class="post-metadata">

**Author:** ![thonpy](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@thonpy](https://discourse.processing.org/u/thonpy)\
**Post date:** [June 30, 2019, 11:03pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/7 "2019-06-30T23:03:30Z")

</div>

Doesn’t solve the problem, but thanks!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 1, 2019, 4:06pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/8 "2019-07-01T16:06:29Z")

</div>

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

> **[GoSubRoutine/Ball-in-the-Chamber](https://github.com/GoSubRoutine/Ball-in-the-Chamber)**
>
> JS Native Modules coded in TS. Contribute to GoSubRoutine/Ball-in-the-Chamber development by creating an account on GitHub.

Latest releases can be downloaded here: 😇

- [GitHub.com/GoSubRoutine/Ball-in-the-Chamber/releases](http://GitHub.com/GoSubRoutine/Ball-in-the-Chamber/releases)

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

1. [GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-java](http://GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-java)
2. [GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-cs](http://GitHub.com/GoSubRoutine/Ball-in-the-Chamber/tree/master/pjs-cs)

Here’s the p5js/TS ESM instance mode version running online: 🏃‍♂️

- [GoSubRoutine.GitHub.io/Ball-in-the-Chamber/p5js-instance](http://GoSubRoutine.GitHub.io/Ball-in-the-Chamber/p5js-instance)

And all 4 versions running at the same time: 🔢

- [GoSubRoutine.GitHub.io/Ball-in-the-Chamber](http://GoSubRoutine.GitHub.io/Ball-in-the-Chamber)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 1, 2019, 4:22pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/9 "2019-07-01T16:22:09Z")

</div>

> [@thonpy](#):
>
> Doesn’t solve the problem, but thanks!

Are you using `import` for the latest “@types/p5” btW like I do in my sketch? 🤔  
[https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/v3.0.0/p5js-instance/sketch/sketch.ts#L18-L19](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: 🦇  
[https://github.com/GoSubRoutine/Ball-in-the-Chamber/blob/master/p5js-instance/install-p5js-types.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. 👨‍🔬

Invoked methods such as p5.Vector::**setMag()** and p5.Vector.**sub()**: ➖

> **[reference | p5.js](https://p5js.org/reference/#/p5.Vector)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

And all of them were correctly recognized by my `import` “node\_modules/@types/p5/index”. 😸

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

---

<div class="post-metadata">

**Author:** ![jun](https://avatars.discourse-cdn.com/v4/letter/j/8e7dd6/32.png) [@jun](https://discourse.processing.org/u/jun)\
**Post date:** [June 2, 2022, 1:08pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/10 "2022-06-02T13:08:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Rhythmone](https://avatars.discourse-cdn.com/v4/letter/r/9f8e36/32.png) [@Rhythmone](https://discourse.processing.org/u/Rhythmone)\
**Post date:** [November 19, 2022, 5:22pm UTC](https://discourse.processing.org/t/p5-vector-functions-in-instance-mode-with-angular-8/12415/11 "2022-11-19T17:22:04Z")

</div>

I am having the same issue. How do you call ‘p5.Vector’ while in instance mode?  
This is what I get when attempting:  
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘sub’)

everything else is working