Hey - I’m an experienced javascript developer and have done a bit with plain javascript and html5 canvas.
What I’m doing is something similar to the spirograph example on the examples page - the difference being that I want each of the dots to draw a permanent trace - as well as having the temporary circles on top.
The non-p5 way of doing this, looks a bit like this:
let t = 0;
drawAnimationFrame() {
//getMyObjectsToDraw is an expensive function to call, so we only want to run it once
//It generates a list of temporary objects, and a list of permenant objects, to draw for a given t
const {tempObjs, permObjs} = getMyObjectsToDraw(t++);
//We clear the temporary context each frame
tempContext.clearRect(0, 0 WIDTH, HEIGHT);
//These objects have a function that tells them how to draw themselve on the context
for (let obj of tempObjs) {
obj.draw(tempContext);
}
for (let obj of permObjs) {
obj.draw(permContext);
}
// Next frame
window.requestAnimationFrame(this.drawAnimationFrame);
}
window.requestAnimationFrame(this.drawAnimationFrame);
That is - we’re using one requestAnimationFrame loop to draw on multiple canvases.
I can’t see how I would do this with P5 - given that the draw loop seems to refer to a single canvas. If I were using a two canvas solution - I’d have to either call my expensive getMyObjectsToDraw method twice, or do something like where, if I’m using instance mode, the first instance then passes the list of objects to the second one to draw… which sounds like it would have all sorts of synchronisation issues.
Alternatively, I’m wondering if there’s an established way of doing a ‘multiple layers on the same canvas’ in p5?