cacatoo
Version:
Building, exploring, and sharing spatially structured models
135 lines (109 loc) • 6.35 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 -->
<head>
<title>Cacatoo</title>
</head>
<script>
/*-----------------------Start user-defined code ---------------------*/
let sim; // Declare a variable named "sim" globally, so that we can access our cacatoo-simulation from wherever we need.
/**
* 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: "Predator prey with deterministic death", // The name of your cacatoo-simulation
description: "Traveling and chaotic waves.", // And a description if you wish
maxtime: 1000000, // How many time steps the model continues to run
ncol: 100, // Number of columns (width of your grid)
nrow: 100, // Number of rows (height of your grid)
wrap: [true, true], // Wrapped boundary conditions? [COLS, ROWS]
scale: 12, // Scale of the grid (nxn pixels per grid point)
bgcolour: "white",
statecolours: { 'species': { 'prey': '#c043eeff', 'predator': "#e59101ff"} }, // 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 "gol" (Game Of Life)
let init_individuals = [{species:'prey', growth_rate: 0.8, age: 0, max_age:10},
{species:'predator', growth_rate: 0.8, age: 0,max_age:20}]
sim.populateGrid(sim.model, init_individuals, [0.1,0.1]) // Place the three 'species' in grid points (33% A, 33% B, 33% C)
//sim.createDisplay("model", "species", "") // Create a display so we can see our newly made gridmodel
sim.createDisplay_discrete({model:"model", property:"species",
drawdots:true, stroke: true, strokeWidth: 1, strokeStyle: "white", radius: 6.4,
label:"Predator prey", minval:0, maxval:1, decimals:1, num_colours: 100})
/*
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 n = this.randomMoore8(this, x, y) // Random neighbour
let t = this.grid[x][y] // This gridpoint
t.age++
if (!t.species) // If empty, and neighbour is prey
{
if (n.species == 'prey' && this.rng.random() < n.growth_rate) {
this.copyIntoGridpoint(x,y,n)
t.age = 0 // reset age
}
}
else if (t.species == 'prey') // If prey
{
if (n.species == 'predator' && this.rng.random() < n.growth_rate) {
this.copyIntoGridpoint(x,y,n)
t.age = 0 // reset age
}
}
//if (this.rng.random() < 0.001+0.003*t.age)
if (t.age > t.max_age)
{
t.species = undefined // death
t.age = 0
}
}
/*
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.synchronous() // Applied as many times as it can in 1/60th of a second
this.plotPopsizes('species', ['prey', 'predator'])
}
/*
OPTIONAL: Now that we have everything setup, we can also add some interactive elements (buttons or sliders). See cheater.html for more examples of this.
*/
sim.addButton("Play/pause sim", function () { sim.toggle_play() })
sim.addButton("Disable/enable mix", function () { sim.toggle_mix() })
sim.addButton("Kill prey", function () { sim.my_custom_killprey_function() })
sim.addButton("step", function () { sim.step(); sim.display() })
sim.addStatebrush('model', 'species', undefined, 100);
sim.my_custom_killprey_function = function () {
for (let x = 0; x < sim.model.nc; x++) for (let y = 0; y < sim.model.nr; y++) {
if (sim.model.grid[x][y].species == 'prey' && this.rng.genrand_real1() < 0.9)
sim.model.grid[x][y].species = undefined
}
}
sim.start()
sim.addMovieButton(sim.model,"")
}
/*-------------------------End user-defined code ---------------------*/
</script>
<body onload="cacatoo()">
<div class="header" id="header">
<h2>Cacatoo (example project)</h2>
</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="examples">
</div>
<div class="footer" id="footer"></div>
</div>
</body>
</html>