cacatoo
Version:
Building, exploring, and sharing spatially structured models
269 lines (227 loc) • 24.6 kB
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) -->
<style>
#box{
font-size:25px;
font-weight: bold;text-align: center; vertical-align: center;
top:50%;
display:inline-block;
width:40px;
border: 2px solid darkgrey;
padding: 5px;
border-radius: 2px 2px 2px 2px;
margin: 5px;
}
#bo{
font-size:25px;
font-weight: bold;text-align: center; vertical-align: center;
top:50%;
display:inline-block;
width:44px;
padding: 5px;
border-radius: 2px 2px 2px 2px;
margin: 5px;
}
</style>
</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)</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">Neighboorhood retrieval (gridmodels)</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
In a grid-based model, the next state of a grid point is often influenced by its neighbours. An array of functions is available in Cacatoo to get information on
neighbours in the Moore or Neumann neighboorhood (see table below). Each compass direction is also linked to a number (0 is self, 1 is North, etc) which can be used
to extract specific neighbours. <br><br>
<div style="display:inline-block; margin-right:2%"> <b>Moore neighbourhood</b> <br>
<table>
<tr><td id="box">5</td><td id="box">1</td><td id="box">6</td></tr>
<tr><td id="box">2</td><td id="box">0</td><td id="box">3</td></tr>
<tr><td id="box">7</td><td id="box">4</td><td id="box">8</td></tr>
</table>
</div>
<div style="display:inline-block; margin-left:2%"> <b>Neumann neighbourhood</b> <br>
<table>
<tr><td id="bo"></td><td id="box">1</td><td id="bo"></td></tr>
<tr><td id="box">2</td><td id="box">0</td><td id="box">3</td></tr>
<tr><td id="bo"></td><td id="box">4</td><td id="bo"></td></tr>
</table>
</div>
<br><br>
<h2> Directly retreiving neighbours </h2>
To get a single neighbour from one of these neighbourhood, you can use the following function:
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbour<span class="signature">(model, col, row, direction)</span><span class="type-signature"></span></h5>
<br>For example, to get the 'North-West' neighbour (5) directly within the nextState function, you can use:
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbour<span class="signature">(this, i, j, 5)</span><span class="type-signature"></span></h5>
<br>
To get all neighbours from the Moore [1,8] or Neumann [1,4] range (irregardless of their properties), use:
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getAllNeighbours<span class="signature">(model, col, row, range)</span><span class="type-signature"></span></h5>
To get multiple neighbours corresponding to a certain "type", store them in an array, you can use getNeighbours (plural!):
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbours<span class="signature">(model, col, row, property, value, neighbour_array)</span><span class="type-signature"></span></h5>
<br>For example, to get the 'North' and 'South' neighbour (1 and 4), you can use:
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbours<span class="signature">(this, i, j, [1,4])</span><span class="type-signature"></span></h5>
<br>If you want to use one of the default neighbourhoods, you can use one fo the following shortcuts: <br><br>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbours8<span class="signature">(model, col, row, property, value, neighbour_array) // Moore, self exclusive</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbours9<span class="signature">(model, col, row, property, value, neighbour_array) // Moore, self inclusive</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbours4<span class="signature">(model, col, row, property, value, neighbour_array) // Neumann, self exclusive</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbours5<span class="signature">(model, col, row, property, value, neighbour_array) // Neumann, self inclusive</span><span class="type-signature"></span></h5>
<br>
<hr>
<br>
Standardised functions are also available to count, sum, or sample from adjacent grid points, listed below. <br><br>
<h2> Summing a property of all neighbours </h2>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>sumNeighbours<span class="signature">(model, col, row, property, neighbour_array)</span><span class="type-signature"></span></h5>
<br>The neighbour array can be any array which includes all neighbours ([0,1,2,3,4,5,6,7,8]) or only a few ([0,4,6]). A few frequently used neighbourhoods can be called like this:<br><br>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.sumMoore8<span class="signature">(model, col, row, property, value)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.sumNeighbours8<span class="signature">(model, col, row, property, value) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.sumMoore9<span class="signature">(model, col, row, property, value)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.sumNeighbours9<span class="signature">(model, col, row, property, value) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.sumNeumann4<span class="signature">(model, col, row, property, value)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.sumNeighbours4<span class="signature">(model, col, row, property, value) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.sumNeumann5<span class="signature">(model, col, row, property, value)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.sumNeighbours5<span class="signature">(model, col, row, property, value) // same as above, different name</span><span class="type-signature"></span></h5>
<br>
<hr>
<br>
<h2> Counting all neighbours with 'property' set to 'value' </h2>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countNeighbours<span class="signature">(model, col, row, property, value, neighbour_array)</span><span class="type-signature"></span></h5>
<br>The neighbour array can be any array which includes all neighbours ([0,1,2,3,4,5,6,7,8]) or only a few ([0,4,6]). A few frequently used neighbourhoods can be called like this:<br><br>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countMoore8<span class="signature">(model, col, row, property)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countNeighbours8<span class="signature">(model, col, row, property) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countMoore9<span class="signature">(model, col, row, property)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countNeighbours9<span class="signature">(model, col, row, property) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countNeumann4<span class="signature">(model, col, row, property)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countNeighbours4<span class="signature">(model, col, row, property) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countNeumann5<span class="signature">(model, col, row, property)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.countNeighbours5<span class="signature">(model, col, row, property) // same as above, different name</span><span class="type-signature"></span></h5>
<br>
<hr>
<br>
<h2> Getting a random neighbour </h2>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>randomNeighbour<span class="signature">(model, col, row, neighbour_array)</span><span class="type-signature"></span></h5>
<br>The neighbour array can be any array which includes all neighbours ([0,1,2,3,4,5,6,7,8]) or only a few ([0,4,6]). A few frequently used neighbourhoods can be called like this:<br><br>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomMoore8<span class="signature">(model, col, row)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeighbours8<span class="signature">(model, col, row) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomMoore9<span class="signature">(model, col, row)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeighbours9<span class="signature">(model, col, row) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeumann4<span class="signature">(model, col, row)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeighbours4<span class="signature">(model, col, row) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeumann5<span class="signature">(model, col, row)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeighbours5<span class="signature">(model, col, row) // same as above, different name</span><span class="type-signature"></span></h5>
<br>
<hr>
<br>
<h2> Roulette wheel selection </h2>
This is similar to random neighbour selection, but you can assign a grid point property to do weighted sampling:
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>rouletteWheel<span class="signature">(gridpoints, property)</span><span class="type-signature"></span></h5>
For example, to sample an individual with 'fitness' as weight, you can do:
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getNeighbours<span class="signature">(gridpoints, property)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.rouletteWheel<span class="signature">(gridpoints, property)</span><span class="type-signature"></span></h5>
<br>The neighbour array can be any array which includes all neighbours ([0,1,2,3,4,5,6,7,8]) or only a few ([0,4,6]). A few frequently used neighbourhoods can be called like this:<br><br>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomMoore8<span class="signature">(model, col, row)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeighbours8<span class="signature">(model, col, row) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomMoore9<span class="signature">(model, col, row)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeighbours9<span class="signature">(model, col, row) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeumann4<span class="signature">(model, col, row)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeighbours4<span class="signature">(model, col, row) // same as above, different name</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeumann5<span class="signature">(model, col, row)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.randomNeighbours5<span class="signature">(model, col, row) // same as above, different name</span><span class="type-signature"></span></h5>
<br>
<hr>
<br>
<h5>Getting or setting a grid point at arbitrary position:</h5>
When programming, you may often want to 'get' or 'set' objects. To do this with gridpoints, you need to know the coordinates of these grid points, and modify them with 'getGridpoint' and 'setGridpoint'.
Note that the i,j coordinates will automatically wrap arround the grid.
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.getGridpoint<span class="signature">(i, j)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.setGridpoint<span class="signature">(i, j, template_gridpoint)</span><span class="type-signature"></span></h5>
So for example, to get a random grid point in the entire grid, and copy it to a random position, you can do:
sim.model.rng.genrand_int
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span> let x_get = sim.rng.genrand_int(0,sim.ncol)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span> let y_get = sim.rng.genrand_int(0,sim.nrow)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span> let template = this.getGridpoint<span class="signature">(x_get, y_get)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span> let x_set = sim.rng.genrand_int(0,sim.ncol)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span> let y_set = sim.rng.genrand_int(0,sim.nrow)</span><span class="type-signature"></span></h5>
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span>this.setGridpoint<span class="signature">(x_set, y_set, template)</span><span class="type-signature"></span></h5>
</article>
</section>
<h1 class="page-title">Neighboorhood retrieval (flockmodel/boids)</h1>
<section>
<header>
For flockmodels, there are two important functions for neighbourhood retreival. Firstly, this function gets the boids
in range (where range is 20)
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span> let neighbours = this.getIndividualsInRange(boid.position, 20)</span><span class="type-signature"></span></h5>
But you may also want to select the gridpoints of a model that corresond to this boids position. This happens via this function, here with range 5:
<h5 style="margin-left:40px;" class="name"><span class="type-signature"></span> let gps_in_range = this.getNearbyGridpoints(boid,sim.gridmodel,5)</span><span class="type-signature"></span></h5>
</header>
<article>
</article>
</section>
</div>
<div id="Navigator"></div>
<br class="clear">
<script> prettyPrint();</script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>