P5 again, this time I am wondering am I doing this right.

Show and Tell
1

I’m working on P5 in observable and I’m wondering is this the correct or best way to trigger the draw/game loop that updates the canvas?

I have a function in a cell called loopy that is triggers a variable to be updated and the draw loop uses this variable, so the cell updates.

loopy = {
  return function loopy(){
  now
  window.requestAnimationFrame(loopy);
 }
}

The now in loopy causes the original triggering cell to be updated.

c = window.requestAnimationFrame(loopy);

That starts the frame request looping on notebook load.

I think the way the draw loop is being triggered is very huckory and think there must be a better way to do that.

draw_loop = {
   p5.background(0,0,0x4F,20);
   p5.copy(0,14,width,height,0,0,width,height)
   //invalidation.then(() => p5.clear());  // is clear the right thing to call here?
  
   p5.text(` ITS ToO FAST! ${c}`, p5.random(20), height-15);  // only updating because of 'c'
 
}

All comments welcome.