Critical problem when using ".createGraphics()"

[lorenzki]

Thanks for your package - it has been quite helpful!

But now i stumbled upon a serious issue with my application.

I am using "createGraphics()" to create an imageMask.
Everything works fine on the first load. But when I leave the route with "vue-p5" of my Vue application and then re-enter it, it seems like p5 crashes:

[Vue warn]: Error in mounted hook: "TypeError: b.prototype._registeredMethods[u].slice is not a function"

found in

VueP5

TypeError: b.prototype._registeredMethods[u].slice is not a function
at new b (vue-p5.js?e25d:24)
at VueComponent.mounted (vue-p5.js?e25d:75)

I've tried to put .createGraphics() into the preload-, the setup, or the draw-method. It's the same everywhere.
On the first load everything works fine - leaving and re-entering the route crashes vue-p5.

This seems closely connected to the usage of createGraphics() - as soon as I am not using this method, the errors are gone.

[Kinrany]

Hi, thanks for the report and the kind words :)

I'd like to investigate. Do you by any chance already have a repo I could use to reproduce this?

[icarito]

Hi
Nice lib, I hadn't seen it when I started my project!
I'm facing the same problem, I believe it is some kind of problem with removing and re-creating the canvas when createGraphics has been called. Some kind of problem with _registeredMethods.

I'm using createGraphics in my default sketch (to integrate with other rendering lib) and now I can't "reset" my sketch.
The exact same error as described above appears when you push "RESET" button in my project here:
http://super-8.glitch.me/

Any hint will help! Thanks!

[icarito]

Hi, just a comment that I worked around my issue by NOT removing the p5 canvas, just resetting its state.
But I still think this is a bug with p5.createGraphics.
Thanks!

[Kinrany]

Hi icarito, this is super helpful, thanks :D

[Kinrany]

Oh, I cloned the repo and couldn't find any reference to vue-p5. It seems I misread your first comment, @icarito, and you never actually switched to using it, right?

Still, I'd like to find the problem and report it upstream. Do you by any chance remember a commit where RESET was still broken?

[icarito]

Yes the one commit before last, still had broken RESET, it should be the only one. Sorry I pushed after working around the issue last night! Merry xmas! El mar, 24-12-2019 a las 07:26 -0800, Kinrany escribió:

…

Oh, I cloned the repo and couldn't find any reference to vue-p5. It seems I misread your first comment, @icarito, and you never actually switched to using it, right? Still, I'd like to find the problem and report it upstream. Do you by any chance remember a commit where RESET was still broken? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[Kinrany]

No problem, and I got it, thanks. Merry xmas :)

[lorenzki]

Sorry, I have been already in my xmas holidays when you both started to comment.
I have no repo to reproduce this problem right now - but I could make one if it's still needed.
And @Kinrany as far as I have understood you were talking about this being a native p5 error rather than a issue with your package?

[icarito]

Hi, Yes indeed I ran into this error without using the vue-p5 package. I have since reverted my workaround. I noticed that this had something to do with scope, that is, in my case, it would trigger if I assigned the p5 instance mode to an object property ( this.p5 = p5(...) ), but not if I ommitted this assignment ( p5(...) ). https://gitlab.com/search?utf8=%E2%9C%93&snippets=&scope=&repository_ref=main&search=P5&project_id=15850336#L94 The callback already offers access to the canvas with the .canvas property so this solved it for me. Hope it helps! El mar, 07-01-2020 a las 04:09 -0800, lorenzki escribió:

…

Sorry, I have been already in my xmas holidays when you both started to commenting. I have no repo to reproduce this problem right now - but I could make one if it's still needed. And @Kinrany as far as I have understood you were talking about this being a native p5 error rather than a issue with your package? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[Kinrany]

@lorenzki yeah, since @icarito had this error too without using vue-p5, it seems to be a problem with p5 itself.

I have no repo to reproduce this problem right now - but I could make one if it's still needed.

It would be helpful, yes! Though a repo is not exactly necessary: a code snippet that demonstrates the problem would be good enough.

[Chappie74]

Any updates on this? I am currently running into the same problem using create graphics.

[Kinrany]

Hi! This is an upstream problem, and I haven't been able to pinpoint exactly why it happens. A small example that reproduces the problem would be very helpful.

[Chappie74]

Hi there. Thanks for replying :)
Here i've just attached the methods and data part of my component. https://gist.github.com/Chappie74/73115dc181e85fdeb5b8215e50c4bd71
The problem started occurring when I added in the line:
this.canvas.secondary = sk.createGraphics( this.canvas.width, this.canvas.height )

The error occurs when I make changes in the IDE and it automatically builds and updates to the page. The canvas wouldn't render. To solve this I have to hit the refresh button and reload the page.

####EDIT
Here is a gist to the full component. https://gist.github.com/Chappie74/0f25e30d6495aa3d6d487f5708d4e1ec