Tutorial: Making interactive CPMs in the browser with Artistoo

Please open 5-customdrawing.html in a text editor and your browser. Have a look at the browser first; this is the same migrating cell as before, but now we draw also the trajectory of its centroid.

Now have a look at the code in the text editor. Note:

• There are some new global variables used to control and save the trajectory during the simulation (trackMemory, trackResolution, trajectory)
• there is a function updateTrajectories() which takes care of saving the trajectory during the simulation
• the step() function ensures that updateTrajectories() is called every step.
• the draw() function contains the new code needed to draw the trajectory on the canvas

Artistoo's Canvas contains a bunch of drawing methods which you have used already, such as drawCells() and drawActivityValues. But internally it uses HTML Canvas, which gives you a lot more flexibility in what you can draw. In this example, we have used the HTML Canvas API to draw the trajectory even though there was no predefined function for this.

You can compare your answer to 5-customdrawing-answer.html.

When you are done, click "Next" to learn how you can customize your visualizations further.