Canvas animations/transitions, how to do it?

[GitNoise]

Hi!

I just recently started using LayerCake and it has really simplified my data visualisation work a lot. Thanks!

Atm I am trying out using LayerCake + d3 force simulation + canvas.
For some reason my canvas force simulation does not want to update after the first tick (even though it works fine when I do the same thing with Svg).

Is there is a good Canvas example with animations/transitions?

Here is a REPL with my code.
https://svelte.dev/repl/1480ba58ffa640cc9cbc824f5dc0e418?version=4.2.16

[mhkeller]

I can see if I can take a look. I think the issue is that svelte isn't able to detect what is changing. I think you'll want to specify a draw function that re-reruns when something changes. So if the node variables are changing, then on tick, a function fires in your canvas renderer to draw things. A better model might be that instead of a <Circle> component, you have a <Circles> component that accepts renderData as a prop and redraws when that changes. Svelte is better able to pick up changes to the svg node so that's why that is easier – it doesn't require multiple steps to move a shape like canvas does. This is more of a general svelte reactivity issue though so you might also ask in the svelte discord. But I think making a function that does all of your canvas steps on tick will probably fix your issue.

edit: REPL with this implemented: https://svelte.dev/repl/9ef75645765243ba82253301a902024d?version=4.2.16

[seblammers]

Maybe this tutorial by Matthias Stahl can inspire you:

https://youtube.com/watch?v=MjPRp398T2M

[GitNoise]

@seblammers
Thanks! I've seen it and his code for a more complex solution: https://github.com/spiegelgraphics/nobel-laureates/tree/main
I was hoping to skip the registering/deregister/invalidate pattern.

@mhkeller
I tried your solution and it looks exactly like what I was hoping to achieve. Unfortunately it doesn't work if you have multiple components that update the context since this triggers some kind of reactivity loop in the functions that are dependent on the canvas context (the browser tab becomes totally unresponsive). Or maybe I did something wrong 😕 .

In the end I used a modified version of Matthias code.
Have a look in my REPL again (I forgot to fork before modifying 😢):
https://svelte.dev/repl/1480ba58ffa640cc9cbc824f5dc0e418?version=4.2.16

Anyways, maybe LayerCake could be a bit opinionated in how canvas animations can be implemented? Look at CanvasContext.svelte and I how use the it in App.svelte and Circle.canvas.svelte. Maybe something for the LayerCake canvas context or maybe something similar as an example?

[mhkeller]

That's a neat example you put together.

Unfortunately it doesn't work if you have multiple components that update the context since this triggers some kind of reactivity loop in the functions that are dependent on the canvas context (the browser tab becomes totally unresponsive)

This is a known issue with Svelte's reactivity and documented here e459eff (#50) (other discussion techniq/layerchart#158). The solution is to make multiple canvas tags.

Anyways, maybe LayerCake could be a bit opinionated in how canvas animations can be implemented?

I think one of the main features of LayerCake is that it tries to not be opinionated about how people implement their renderer components if there are helper functions that the library could provide that make a certain desired pattern easier, let me know.

I'm glad you got it working. I forked your REPL here for posterity so that people can see the different approaches.