Tutorial: Making interactive CPMs in the browser with Artistoo

2. Simple CPM

Page contents

Please open 2-singlecell.html in a text editor.

Inside the <script></script> tags, code has now been added to build a simple CPM. First, some global variables are declared that will be used later: C (which will contain the CPM model), Cim (which will contain the canvas on which the CPM is visualized), gm (which helps you put cells in your CPM), and meter (which you don't strictly need but is nice to show how fast your simulation is running).

You should then see the following functions:

  • initialize()
    Remember, this is called through the onload attribute of the HTML body, which means this function is called when the page is loaded. This function gets everything going by first initializing the CPM (through setup()), putting a cell in it (through seedCell()), and starting the first simulation step().
  • setup()
    This is where the global variables declared above get assigned their value. Most importantly, it sets up and configures a CPM and a corresponding Canvas and GridManipulator. (More about that below).
  • seedCell()
    Predictably, this function puts a cell on the grid.
  • draw()
    When called, this takes care of updating the Canvas with the current state of the CPM.
  • step()
    This function runs a step of the model (C.timeStep()), and after every step (MCS), can also do other stuff. In this case, it calls draw() and ticks the meter to show that a step has been completed. It then recursively calls itself through requestAnimationFrame, which is how we get the animation.

The simulation

Now, please open 2-singlecell.html in your browser. You should see a gray field that is empty, and a meter registering the frame rate in the upper right corner.

As shown above, the page already constructs a CPM, seeds a cell (as one pixel in the middle of the grid), and starts the simulation. However, we see nothing happening because the Hamiltonian of this model is not very useful yet, and the (single) cell pixel disappears so fast that you don't even see it.

Exercise
Have a look at the setup() function. When the CPM C is initialized, it gets a temperature, random seed and boundary conditions through configuration_options. But it has no Hamiltonian yet. This is accomplished later through C.add(), which allows us to construct a Hamiltonian term by term.

As you can see, the current model only contains a standard adhesion term, which is why the single cell pixel immediately disappears (the easiest way to minimize the adhesion energy). To finish this model, please look at the VolumeConstraint and see if you can give this CPM a volume term with λV = 50 and Vtarget = 500 pixels.

Hint: CPMs typically consider cell identities σ, which can belong to different celltypes τ. Because "type" was historically also sometimes used for σ, we call these cellID and cellKind in Artistoo. CPM parameters are mostly dependent on τ so they are specified as arrays, where the element at index zero is reserved for the background and the others contain the value for all the τ in the model (in this case only 1).

When you have added the volume constraint, you should see a single cell in the middle of the grid. You can compare this to 2-singlecell-answer.html.

Optional exercise
Have a look at the code again and try to modify some other parameters, such as the CPM temperature, the field size, or the color used to draw the cell.

Can you add a second cell of the same cellKind? Or of a different cellKind, in a different color? (Hint: you'll have to change seedCell(), draw(), and add elements to the parameter arrays for the constraints added in setup(). )

When you are done, click "Next" to simulate a migrating cell.