I revisited this notebook today having not looked at it for a while, and I find the canvas elements are flickering whenever they get updated. The notebook implements eyes that follow the mouse cursor whenever it moves, and the effect worked smoothly without any flickering before. So I think something must have changed in observable causing this flickering to occur.
Any suggestions what could be causing this? Is it possible a recent (meaning in the last 12 months, since I haven’t viewed this notebook for a while…) change in the observable runtime is causing the flickering?
Appreciate anyone’s thoughts about what might have changed to be causing this now, thanks
The timing of the yield operator changed in October 2021 in this PR (Runtime version 4.17.6):
The reason for the flickering in your notebook is that the yield operator pauses until the next animation frame. So, there is a delay between the canvas element being added to the DOM and the subsequent render (call to renderEye).
A recommended pattern for reactive graphics is to expose an update method on the returned element (canvas, SVG, or HTML), and then call that method from a cell to provide dynamic values and re-render. This way the canvas element itself does not directly reference the dynamic values and thus does not need to be recreated and re-added to the DOM whenever it is redrawn, improving performance and eliminating flicker.
Coincidentally, I have my own eyes notebook that demonstrates this pattern:
Here are a couple notebooks that discuss this technique: