Live plot
=========

This demo combines two synchronized canvas types in the same
:py:class:`anim.window`. On the left, an :py:class:`anim.plane.canva` displays
a red disk moving around a circular orbit. On the right, an
:py:class:`anim.plot.canva` displays the disk coordinates
:math:`x(t)=\cos(t)` and :math:`y(t)=\sin(t)` as live Matplotlib traces. Both
panels receive the same :py:class:`anim.time` object, so the geometric motion
and the plotted data always represent the same animation step.

The plot constructor configures its exposed :py:attr:`anim.plot.canva.axes`
object directly. The two calls to ``plot`` return Matplotlib artists that are
kept in ``x_trace`` and ``y_trace``; only their data need to change during the
animation. The legend automatically follows the dark canvas style.

.. code-block:: python
   :emphasize-lines: 6,7

   self.axes.set_xlabel('Time')
   self.axes.set_ylabel('Coordinate')
   self.axes.set_xlim(0, 2*np.pi)
   self.axes.set_ylim(-1.1, 1.1)
   self.axes.grid(True, alpha=0.3)
   self.x_trace, = self.axes.plot([0], [1], color='c', label='x')
   self.y_trace, = self.axes.plot([0], [0], color='m', label='y')
   self.axes.legend()

In :py:meth:`anim.plot.canva.update`, the displayed arrays are reconstructed
from the current ``t.step`` rather than extended blindly. This makes the plot
idempotent and reversible: revisiting a step produces exactly the same data,
and stepping backward removes samples beyond the current time. The final call
to ``super().update(t)`` redraws the Matplotlib canvas and completes the frame.

.. code-block:: python
   :emphasize-lines: 1,4

   times = np.arange(t.step + 1)*self.window.dt
   self.x_trace.set_data(times, np.cos(times))
   self.y_trace.set_data(times, np.sin(times))
   super().update(t)

The two panels are placed explicitly in adjacent grid columns. Their default
relative width is identical, while the window's aspect ratio provides enough
horizontal room for both. Playback is limited to one revolution and backward
stepping is enabled to demonstrate that both canvas types remain synchronized.
See the :doc:`Matplotlib plot canvas guide <../guide/plot>` for sizing,
multiple axes, styling and other update patterns.

.. raw:: html

   <img src="../media/plot.gif" alt="A disk orbiting beside live cosine and sine traces" style="max-width: 100%; height: auto;" />

Full Code
---------

.. literalinclude:: ../../../demo/live_plot.py
   :language: python
   :linenos: