p5 vector subraction ‘sub’ returning error

I’m have been trying to upload a p5 sketch onto a react build. Using react-p5-wrapper I am able to successfully render my canvas on the screen however, some vector functions are causing errors.

        var distance = this.position.dist(ball.position)
        var minDistance = this.radius + ball.radius
        if (ball === this || distance > minDistance) {
            return
        }
        // balls colliding. First, move them apart.
        console.log(this.position) 
        console.log(ball.position)
        let angle = p5.Vector.sub(this.position, ball.position)// <= RIGHT HERE[![Error Message][1]][1]
        // return

In this portion my console.logs both return valid 3D vectors however when I use the p5.Vector.sub(v1, v2) I am returned an error that says “TypeError: Cannot read property ‘sub’ of undefined”. I the sub function perhaps being confused with something else? I have included a picture of my error output. Im not sure why the program is reading them as undefined when I get values for them in console.log. Thank you for any advice

Answer

According to the author of react-p5-wrapper here in this issue

the p5 that gets passed into the module isn’t the same as the global p5 you traditionally get with a script tag. To access certain things with this package (due to the p5 node module itself) you need to use p5.constructor.[something]

Basically use p5.constructor.Vector.sub(this.position, ball.position) in your case.

Leave a Reply

Your email address will not be published. Required fields are marked *