UNPKG

cacatoo

Version:

Building, exploring, and sharing spatially structured models

128 lines (114 loc) 7.8 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cacatoo manual</title><link rel="icon" type="image/png" href="images/favicon.png" /> <script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/lang-css.js"> </script> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/menu.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'> <script src="scripts/jquery.js"></script> <script src="scripts/cacatoo.js"></script> <!-- Include cacatoo library (compiled with rollup) --> <script src="scripts/all.js"></script> <!-- Include other libraries (concattenated in 1 file) --> </head> <body> <!-- --------------------- START MENU. Couldnt get it to load dynamically, so this needs to be replaced in every HTML file upon changing --------------------- --> <header class="header" id="btnNav"><buton class="header__button" id="btnNav" type="button"><i class="material-icons">menu</i></buton></header> <nav class="nav"><div class="nav__links"> <a href="#" class="nav__head"><i id="btnNavclose" class="material-icons" style="cursor:pointer"> menu </i> Cacatoo </a> <a href="index.html" id="nav__link" class="nav__link">Home</a> <a href="https://github.com/bramvandijk88/cacatoo" id="nav__link" target="_blank" class="nav__link"> Source code (Github)</a> <!-- <a href="https://replit.com/@bramvandijk88/Cacatoo-IBMs-with-examples" id="nav__link" target="_blank" class="nav__link"> Replit </a> --> <a href="#" class="nav__head"><i class="material-icons"> play_circle_outline </i> Examples</a> <a href="example_predator_prey.html" id="nav__link" class="nav__link"> Predator prey</a> <a href="example_colony_growth.html" id="nav__link" class="nav__link"> Colony growth</a> <a href="example_pheromones.html" id="nav__link" class="nav__link"> Ant pheromones</a> <a href="example_aapjes.html" id="nav__link" class="nav__link"> Aapjes (monkeys) (monkeys)</a> <a href="example_mutational_jackpot.html" id="nav__link" class="nav__link"> Mutational jackpot</a> <a href="example_starlings.html" id="nav__link" class="nav__link"> Starlings</a> <a href="example_cooperation.html" id="nav__link" class="nav__link"> Cooperation</a> <a href="example_TEs.html" id="nav__link" class="nav__link"> Transposon evolution</a> <a href="examples_jsfiddle.html" id="nav__link" class="nav__link"> More examples (JSFiddle)</a> <a href="#" class="nav__head"><i class="material-icons"> grid_on </i> How to Cacatoo </a> <a href="overview.html" class="nav__link"> Tutorials (Blog style)</a> <a href="list_of_options.html" class="nav__link"> All configuration options</a> <a href="populating_the_simulation.html" class="nav__link"> Populating a simulation</a> <a href="display_and_colours.html" class="nav__link"> Display, colours, and UI</a> <a href="neighbourhood_retrieval.html" class="nav__link"> Neighbourhood retrieval</a> <a href="random_numbers.html" class="nav__link"> Using random numbers </a> <a href="grid_events.html" class="nav__link"> Grid events</a> <a href="working_with_odes.html" class="nav__link"> Working with ODEs</a> <a href="jsdocs/index.html" id="nav__headlink" target="_blank" class="nav__headlink"><i class="material-icons">data_object </i> Full JS-Docs</a> </div><div class="nav__overlay"></div></nav> <script> document.addEventListener("DOMContentLoaded", () => { const nav = document.querySelector(".nav"); document.querySelector("#btnNav").addEventListener("click", () => { nav.classList.add("nav--open"); }); document.querySelector(".nav__overlay").addEventListener("click", () => { nav.classList.remove("nav--open"); }); document.querySelector("#btnNavclose").addEventListener("click", () => { nav.classList.remove("nav--open"); }); var all_links = document.getElementsByClassName("nav__link"); var hide_menu = function() { nav.classList.remove("nav--open"); }; for (var i = 0; i < all_links.length; i++) { all_links[i].addEventListener('click', hide_menu, false); } }); </script> <!-- --------------------- END MENU --------------------- --> <div id="main"> <h1 class="page-title">Working with ODEs</h1> <section> <header> </header> <article> <div class="container-overview"> To learn how to use ODEs, see <a href="colony_growth">this tutorial</a>. Here's is a brief overview of the steps discussed there: <br><br> <h2>ODE setup</h2> <h5 class="name"><span class="signature"> // Define ODEs with basic resource dynamics<br> let resource_dynamics = function (u, k) {<br> <div style="margin-left:40px;"> return function (x, y) { <br> <div style="margin-left:40px;"> let external = y[0] // The first variable (y[0]) is the external resource concentration, which is taken up with rate u<br> let internal = y[1] // The second variable (y[1]) is the internal resource concentration, which is used by the cells to divide<br> return [-u * external, u * external - k * internal]</div> }</div> }<br> // Configuration object with initial states, parameters, and diffusion rates<br> let ode_config = {<br> <div style="margin-left:40px;"> ode_name: "resources",<br> init_states: [1, 0], // Initial values of external and internal resources<br> parameters: [0.0, 0.0], // u and k are set to 0.0 by default, as we will make it dependent on cell presence!<br> diffusion_rates: [0.2, 0.0] // resources diffuse through exteral environment, but internal resources stay inside cells<br></div> }</span></h5> <br> <h2> Attach the ODE to the grid points </h2> <h5 style="margin-left:40px;" class="name">sim.model.attachODE<span class="signature">(resource_dynamics, ode_config)</span></h5> <br> <h2>Solving the ODEs</h2> Solving the ODEs is then done in the nextState function, by adding: <h5 style="margin-left:40px;" class="name">this.grid[i][j].resources.solveTimestep(0.1) // (0.1=delta_time)</h5> <br> <h2> Manipulate the parameters at run time </h2> You may want to change the state and parameters of the ODE based on certain events. For example, if the individual responsible for the uptake dies, the amount of internal resources should be 0.00, and the rate of uptake should be 0.00: <h5 style="margin-left:40px;" class="name"><span> this.grid[i][j].alive = 0<br> this.grid[i][j].resources.state[1] = 0.00 // Remove internal conc<br> this.grid[i][j].resources.pars = [influx, 0.00, upkeep] // No more cell here, so no uptake<br> </span></h5> </article> </section> </div> <div id="Navigator"></div> <br class="clear"> <script> prettyPrint();</script> <script src="scripts/linenumber.js"> </script> </body> </html>