Tutorial: Making interactive CPMs in the browser with Artistoo

4. Make your simulation interactive

Please open 4-interactivity.html in a text editor and your browser. Have a look at the browser first, and verify that the checkbox, buttons, and λact slider all work. The input box for cell color should not work yet; we'll get to that later.

Now have a look at the code in the text editor. The structure is still pretty much the same as before, but there are a few changes:

  • there is an extra variable called running and a function toggleRunning(), which are used to control whether the simulation is running or paused.
  • there is a function divideCell() which does pretty much what you'd expect
  • the HTML <body> now contains a bunch of <input>s and <button>s.

Exercise
Have a look at the code and see if you understand how the information from the HTML <input>s and <button>s is used by the simulation.

Can you figure out how to get the text box for the cell color to work?

(Hint: the draw() function needs to communicate with the right text box somehow...)

You can compare your answer to 4-interactivity-answer.html.

Optional exercise
See if you can add an extra control yourself, for example a slider for maxact, and get it to work.

Note that these inputs are nice, but you can also interact with your simulation through the console.

Exercise
Open the console in your browser and type:
running = false
Your cell should pause. You can also type
toggleRunning()
Verify that this does the same as clicking the play/pause button.

Can you adjust the CPM temperature from here and set it to zero?
(Hint: the CPM C contains a "conf" property; you can type C.conf in the console to see what it looks like.)

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