There is no p5.Vector.add() or p5.p5.Vector.add() about react-p5

[peterfritz]

And also, totally unrelated, why's the react-p5 class div always 4 or 5px higher than the canvas? Is there a way to disable this behavior?

[Gherciu]

@peterfritz

1. Can you pls provide a code sandbox reproducibly.
2. react-p5 doesn't add any style to any div........I'm pretty sure that is a problem with your style's normalizer.....

[peterfritz]

Hey, thanks for the quick reply.

On the first issue, in plain p5.js, I was using the following code:

const vectorMovement = createVector(speedX, speedY, 0)
const nextVectorPosition = p5.Vector.add(el.pos, vectorMovement)

Which, earlier today, I was able to replace with:

const vectorMovement = createVector(speedX, speedY, 0)
const nextVectorPosition = vectorMovement.add(el.pos)

That does the same thing in a more clean and descriptive way. But it would be cool if these methods/functions were included as well.

On the second issue, I agree, the code doesn't seem to add any style, which makes this issue much more interesting and weird than I expected, because until now, I wasn't able to find a fix for it.
Even in your demo, if you open the Chrome Dev Tools, you'll see that the div with the react-p5 class is 4px higher than the canvas itself.
If I find some way to fix this in the source, I'll make a PR or let you know in some other way.

In any case, thank you for this awesome repo and your attention.

[peterfritz]

It isn't a problem with p5.js nor react-p5, it's some weird default CSS behavior due to the canvas element default display property (inline) and the set line-height according to the answers in this StackOverflow question.

I was able to fix it by using:

canvas {
  display: block;
}

[Gherciu]

@peterfritz Thanks for the CSS fix...I'll open soon a PR and publish this fix.
About the first issue....Hmmmm I think it can appear because you are using the Sketch p5 but not the global p5..
Pls try that

window.p5.Vector.add()

The p5 instance which you have access in your Sketch methods are not the global p5 ....I'm using this aprouche to build a Sketch

new p5((yourP5Instance) => {
   // and `yourP5Instance` is different that `window.p5`
})

Pls, try and let me know ;)

[Gherciu]

@peterfritz Update,
I've tried window.p5.Vector.add and yes, it works )
I think I should document these things maybe you're not the first who had this problem)