Data Watching Example

Slide me!

Edit me!

x: y:

The value of x is {{data.x}} and y is {{data.y}}.

In this p5 program, we have disabled the draw() loop. So how is the animation being updated? A custom dataChanged() function is run every time that the data changes, which updates the canvas.

This is possible thanks to Vue's ability to 'watch' data. Data watchers are useful if you want to perform a computationally expensive operation in response to changing data. The alternative approach would be to check for a change in data on each frame of the draw() loop, which can be less efficient.

Source Code