0
283
ViewsToggle Axes/Grid in p5.js "below" a drawing
I'm currently experimenting with generative art/creative coding. I'm using p5.js to generate some ellipses following a invisible circle, which I can adjust with some controls (changing scale, direction and so on...).
Now I want to add some functionality to toggle some axes/grid etc like this:
I know, that p5.js draws 60 times per second and that I could redraw everything every frame (which I think I could achieve by storing all ellipses etc and redraw them every frame, but to me this seems like a bad practice, because I would have to store a lot of information just for redrawing some "metadrawings").
So my question is: How can I toggle axes/grid without storing the whole drawing in a perfomant way? My first thought was to use two up to N canvases for "metadrawing" like axes, grid and so on and clear or redraw them, if I toggle them.
1 answers
Answer question0
I've kinda managed it now to solve my problem (other recommendations using best practices welcome! :) ).
I've added three div's (one wrapper for meta drawings, one wrapper for the main drawings and one wrapper for the two other wrappers). Then I just place the main-drawing-wrapper above my meta-drawing-wrapper using css. I'm also using p5.js instance mode to have separate sketches.
HTML:
<div id="drawings-wrapper">
<div id="meta-drawing-wrapper">
</div>
<div id="main-drawing-wrapper">
</div>
</div>
CSS:
#drawings-wrapper {
position: absolute;
}
#meta-drawing-wrapper, #main-drawing-wrapper {
position: absolute;
top: 0;
left: 0
}
#meta-drawing-wrapper {
z-index: 0;
}
#main-drawing-wrapper {
z-index: 10
}
JS:
new p5((sketch) => {...} // meta drawing
new p5((sketch) => {...} // main drawing
Result:
