How frames works

The Frames are the part of the simulation in charge of rendering the internal state.

Given a data and a tick prop, the Frames paint a view of that information.

When the Model refreshes the animation, it sends updated tick and data to the Frames, so the Frames rerender and show fresh information.

The Frames only job is to render the data. updateData does the calculation on the data, the Model manages the animation and controls let the user interact with the Model.

This is a completely declarative approach, consistent with the React approach.

How to connect Frames and the Model

The Frames receive some information from the Model.

• data (anything), the current state of the simulation.
• tick (integer), the progress in the simulation.
• params (object), all the parameters set by the user/author, which don't change over time without intervention.
• cachedData (object), data from previous ticks of the simulation, and
• results (array), data from previous completed runs of the simulation,
• initData (function), the Frame can reinitialize data,
• setData (function), the Frame can change the data. (so for instance the Frame can be used to let the user enter an initial state of data).

The Frames can be one or more components.

The easiest way to connect Frames to a Model is just to have these components as children of the Model:

<Model>
  <MyFrame />
</Model>

A component which is a direct child of Model will receive all of the props above from Model.

This also works if there are several children:

<Model>
  <MyFrame />
  <MyOtherFrame />
</Model>

All components will receive these props. The children will be arranged from left to right.

However, it doesn't work if the components are deep into the tree, ie:

<Model>
  <div>
    <MyFrame />
  </div>
</Model>

Here, <MyFrame /> won't receive the frame props, because it is too deep. To connect Frames deep in the tree, we can use the withFrames wrapper.

import { withFrames, Model } from 'react-sim';
import MyFrame from 'my-frame';
const MyConnectedFrame = withFrames(MyFrame);
export default () => (
  <Model>
    <div>
      <MyConnectedFrame />
    </div>
  </Model>
);

Here, <MyConnectedFrame /> receives the frames props.