Canvas flickering now when it didn't flicker before

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:

I’ve adopted the update pattern you recommended and all working smoothly again. I found the explanation on the issue helped me understand a bit more the reason for the change: Runtime: imported generator cell yields 2nd value within first tick · Issue #243 · observablehq/feedback · GitHub - you even acknowledged this possible side effect of the change in the issue!

I’m quite amazed to get such excellent information so quickly through the forum here - hats off to you. Thanks

1 Like