i try to create a sketch with p5s dom lib. I managed to create all my p5 Canvas Elements (grey tones)in a for loop and linking them to the matching divs(brown). When i try to resize the window, all sketches just disappear.
My File, on line 103 is the mentioned resize function ResizeIssue
My guess is that i need to implement a seperate “for loop”. I’m new to coding and every step takes me ages. Right now i’m stuck and i don’t know how to implement the function. Help and feedback greatly appreciated.
Calling resizeCanvas clears the canvas, so you need to re-fill the canvas with the background color.
When you are resizing the canvases you need to check the actual offsetWidth and offsetHeight of the respective.
As written, canvasDiv is function scoped, so even if you fix #2 and use canvasDiv.offset..., each instance mode sketch is going to be resized to match the size of the last div created. This is a wonderful example of the absolute evil of the var keyword. If you declare canvasDiv with the let keyword then it will be block scoped inside the for loop so that for each instance the canvasDiv variable will reference the appropriate div.
To better illustrate point #3 here is a simplified example:
