cacatoo
Version:
Building, exploring, and sharing spatially structured models
108 lines (89 loc) • 4.01 kB
HTML
<!--
-->
<html>
<script src="../../dist/cacatoo.js"></script> <!-- Include cacatoo library (compiled with rollup) -->
<script src="../../lib/all.js"></script> <!-- Load other packages -->
<link rel="stylesheet" href="../../style/cacatoo.css"> <!-- Set style sheet -->
<script>
/*-----------------------Start user-defined code ---------------------*/
// First, we declare a variable named "sim" globally, so that we can access our cacatoo-simulation from wherever we need.
let sim;
/**
* function cacatoo() contains all the user-defined parts of a cacatoo-model.
Configuration, update rules, what is displayed or plotted, etc. It's all here.
*/
function cacatoo() {
/*
1. SETUP. First, set up a configuration-object. Here we define how large the grid is, how long will it run, what colours will the critters be, etc.
*/
let config = {
title: "Chemotaxis race", // The name of your cacatoo-simulation
description: "", // And a description if you wish
maxtime: 1000000, // How many time steps the model continues to run
// (note, the onscreen FPS may drop below 60 fps when using fast mode, although many more timesteps may be handled per second)
ncol: 300, // Number of columns (width of your grid)
nrow: 100, // Number of rows (height of your grid)
wrap: [false, false], // Wrapped boundary conditions? [COLS, ROWS]
scale: 2, // Scale of the grid (nxn pixels per grid point)
sleep: 0,
statecolours: {
'alive': {
0: 'black',
1: 'violet',
2: 'gold'
}
}, // Colours for each state. Background (0) defaults to black.
}
/*
1. SETUP. (continued) Now, let's use that configuration-object to generate a new Cacatoo simulation
*/
sim = new Simulation(config) // Initialise the Cacatoo simulation
sim.makeGridmodel("model") // Build a new Gridmodel within the simulation called "model"
for(let x=0; x<sim.ncol; x++){
for(let y=0; y<sim.nrow; y++){
if(x < 10) {
if(sim.rng.random() < 0.5) sim.model.grid[x][y].alive = 1
else sim.model.grid[x][y].alive = 2
}
else sim.model.grid[x][y].alive = 0
sim.model.grid[x][y].R = 0.01 + 0.01* x
}
}
sim.createDisplay("model", "alive", "Cell types") // Create a display so we can see our newly made gridmodel
sim.createDisplay_continuous({model:"model", property:"R", label:"Resource concentration",
minval:0, maxval:4, num_colours: 400, fill:"viridis"})
/*
2. DEFINING THE RULES. Below, the user defines the nextState function. This function will be applied for each grid point when we will update the grid later.
*/
sim.model.nextState = function(x, y) {
let me = sim.model.grid[x][y]
let neighbour = this.randomMoore8(this, x,y)
if(me.alive > 0 && neighbour.alive == 0){
let fail_chance = 0.5
if(me.alive == 2) fail_chance = 0.01
if(me.R < neighbour.R || sim.rng.random() < fail_chance){
let me_alive = me.alive
me.alive = neighbour.alive
neighbour.alive = me_alive
}
}
}
/*
3. MAIN SIMULATION LOOP. Finally, we need to set the update-function, which is the mainwill be applied to the whole grid each time step. For now, all we will do is call "synchronous", which
applies the next-state function shown above to each grid point. All cells are updated at the same time, rather than in turn (for this, use the function "asynchonous")
*/
sim.model.update = function() {
this.asynchronous() // Applied as many times as it can in 1/60th of a second
}
sim.start()
}
</script>
<body onload="cacatoo()">
<div class="header" id="header"></div>
<div class="content" id="canvas_holder"> </div>
<div class="content" id="graph_holder"> </div>
<div class="content" id="form_holder"> </div>
<div class="content" id="output"> </div>
<div class="footer" id="footer"></div>
</body>
</html>