Hello community,
I’m trying to have two canvases within the same HTML page, such that both canvases react to key presses. For some reason only the first canvas is reactive, and the second canvas is not.
Here’s a minimial version of the problem:
If there was a way to tell the browser which canvas should be reactive at a given time, this would also be okay.
Any ideas?
Thanks,
-Matan
Okay seems like this is a known thing (https://github.com/processing/p5.js/issues/3193). As far as I understand the solution would be to use the first sketch to declare global variables that can then be accessed from other sketches? This sounds reasonable.
You can place each sketch in its own <iframe>:
Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe
Or replace p5::keyPressed() w/ p5.Element::mousePressed():
the iframe solution is great! Thanks!