Hello, I’m including some p5 sketches in a blogpost, but If I’m not mistaken the responsiveness will be an issue, because:
- we include the sketch through an iframe
- there is no way to make the canvas size resize nicely for different devices
I wonder if we can pass innerWidth to the canvas x dimension but yet in that case it will grow forever. We could do something like a ‘while innerWitdh is less than X value set a innerWidth and otherwise a fixed value’. But I’m just not too confident about that idea…
I’ve taken a look at how the sketches are imported in the p5js website, but they all have fixed dimensions, So I’m a bit confused about how to do it.
So far, I’ve created 2 different sketches, for phones and laptops, and a js script to set the src attribute of the iframe accordingly, but yet that’s not very flexible.
Any ideas on this?
Just in case, this is the post draft, is not yet visible for a regular visitor. In the second sketch there are 2 buttons ‘run’ and ‘stop’ to play with the sketch.